Zrozumiałość · Poziom A

3.1.1 Język strony

Główny język strony powinien być zapisany w kodzie.

Krótko

Na stronie po polsku element `html` powinien mieć `lang="pl"`. Dzięki temu przeglądarka, czytnik ekranu i narzędzia językowe wiedzą, jak traktować treść.

Problem w praktyce

Strona jest po polsku, ale w kodzie ma `lang="en"` albo nie ma języka wcale. Czytnik ekranu może czytać polskie słowa z angielską wymową, a przeglądarka może proponować błędne sprawdzanie pisowni lub tłumaczenie.

3.1.1 nie dotyczy jakości tłumaczenia ani prostego języka. Dotyczy technicznego oznaczenia głównego języka dokumentu.

Kogo to dotyczy

  • Osób korzystających z czytników ekranu.
  • Osób używających syntezy mowy i narzędzi do czytania tekstu.
  • Użytkowników funkcji tłumaczenia, korekty pisowni i wyszukiwania.
  • Osób wielojęzycznych, które przełączają treści między wersjami językowymi.

Dobry przykład

  • Polska strona ma `html lang="pl"`.
  • Angielska wersja strony ma `html lang="en"`.
  • Ukraińska wersja strony ma `html lang="uk"`.
  • W aplikacji SPA język dokumentu jest zgodny z aktualną wersją językową.

Zły przykład

  • Brak atrybutu `lang` w elemencie `html`.
  • Polska strona ma `lang="en"`.
  • Wszystkie wersje językowe serwisu mają zawsze `lang="pl"`.
  • Język ustawiono na elemencie wewnątrz strony, ale nie na dokumencie.

Przykłady kodu

Dobry przykład: polska strona

Główny język dokumentu jest ustawiony na polski.

Kod — HTML

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Szkolenia - Accessibility First</title>
</head>

Zły przykład: brak języka

Technologie wspomagające muszą zgadywać język strony.

Kod — HTML

<!DOCTYPE html>
<html>
<head>
  <title>Szkolenia - Accessibility First</title>
</head>

Dobry przykład: wersja językowa

Wersja angielska dokumentu ma inny główny język.

Kod — HTML

<html lang="en">
  <body>
    <h1>Accessibility audits</h1>
  </body>
</html>

Przykład graficzny

Źle

<html lang="en">

Strona jest po polsku, ale kod mówi, że po angielsku.

Dobrze

<html lang="pl">

Kod zgadza się z głównym językiem strony.

Statyczne demo pokazuje, że język strony jest ustawieniem dokumentu, a nie oceną jakości treści.

Jak sprawdzić

  1. Otwórz kod strony i znajdź element `html`.
  2. Sprawdź, czy ma atrybut `lang`.
  3. Porównaj wartość `lang` z głównym językiem treści.
  4. Sprawdź osobno każdą wersję językową serwisu.
  5. W aplikacji SPA sprawdź zmianę języka po przełączeniu wersji.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • brak atrybutu `lang`,
  • niepoprawny format kodu języka,
  • część sytuacji, gdy język wygląda na niezgodny z treścią.

Automat nie oceni pewnie

  • czy wybrany wariant języka jest najlepszy dla treści,
  • czy cała wersja językowa serwisu jest spójna,
  • czy tłumaczenie jest poprawne.

Typowe błędy

  • `lang` skopiowany z szablonu i nigdy niezmieniony.
  • Brak `lang` w aplikacji renderowanej po stronie klienta.
  • Ustawienie `lang="en"` dla polskiej strony.
  • Ten sam język na wszystkich wersjach językowych.