SC 3.1.1 Poziom A WCAG 2.0

Język strony

Należy programowo określić domyślny język naturalny każdej strony — zwykle za pomocą atrybutu lang na elemencie html. Czytniki ekranu, monitory brajlowskie i narzędzia tłumaczące używają tej informacji do doboru reguł wymowy, profili głosowych i mapowań znaków.

Czego wymaga kryterium

Każda strona internetowa musi deklarować swój domyślny język naturalny w sposób możliwy do odczytu przez technologie wspomagające. W HTML oznacza to poprawny atrybut lang na głównym elemencie <html>, ustawiony na podstawowy znacznik języka zgodny z BCP 47 (en, de, bg, zh-Hans). Wartość musi odzwierciedlać rzeczywisty domyślny język treści tekstowej — nie język systemu CMS ani kraj serwera.

Strona łącząca kilka języków nadal ma jeden język domyślny; języki dodatkowe obsługuje kryterium 3.1.2 Język części.

Jak spełnić wymaganie

Należy dodać atrybut lang do elementu <html> każdej strony: <html lang="pl">.
Należy stosować poprawny znacznik BCP 47. en stosuje się dla ogólnej angielszczyzny; en-GB lub en-US tylko wtedy, gdy wymowa regionalna ma znaczenie.
W przypadku języka chińskiego należy rozróżniać pismo: zh-Hans (uproszczone), zh-Hant (tradycyjne).
Dla języków pisanych od prawej do lewej (arabski, hebrajski, perski) atrybut lang należy łączyć z dir="rtl".
W projektach opartych na React/Next.js/Astro atrybut należy ustawiać w głównym szablonie układu, nie w treści _document, tak aby każda trasa go dziedziczyła.
W serwisach wielojęzycznych wartość lang należy zmieniać dla każdej trasy — nigdy nie należy serwować jednego globalnego domyślnego dla zlokalizowanych stron.

Typowe błędy

Brak atrybutu lang — najczęstszy błąd w starszych serwisach i serwisach opartych na szablonach CMS.
lang="" (pusta wartość) lub lang="english" — niepoprawne; zgodne są wyłącznie znaczniki BCP 47.
Wszystkie strony zakodowane na stałe jako lang="en", nawet gdy treść jest w języku niemieckim, francuskim lub bułgarskim.
Strona w języku francuskim z lang="en", ponieważ szablon CMS domyślnie używa języka angielskiego i nikt tego nie zmienił.
Atrybut lang ustawiony na elemencie <body> zamiast <html> — akceptowane przez niektóre narzędzia, lecz nie jest to właściwa lokalizacja.

Dlaczego to ważne

Czytniki ekranu używają atrybutu lang do wyboru odpowiedniego syntezatora mowy. Przy zadeklarowanym złym języku anglojęzyczny czytnik odczytuje tekst niemiecki fonetycznie — „Schmetterling” brzmi jak bezsensowna sekwencja sylab. Monitory brajlowskie używają tej informacji do doboru właściwych tabel skrótów brajlowskich stopnia drugiego. Przeglądarki używają jej do wykrywania języka źródłowego przy tłumaczeniu. Wyszukiwarki używają jej przy rankingowaniu i generowaniu fragmentów.

To naprawa zajmująca 30 sekund, która odblokowuje zrozumienie treści dla każdego użytkownika czytnika ekranu na danej stronie — a mimo to brakuje jej na znacznym odsetku serwisów produkcyjnych. Jest to jedno z najczęściej cytowanych problemów w automatycznych audytach, ponieważ jest binarny i łatwy do wykrycia.