- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 26 / 193
3.1.1 Język strony
Strona musi deklarować swój język, inaczej czytnik ekranu przeczyta polski tekst angielskim głosem.
/ Czego wymaga
Każda strona musi podawać w kodzie, w jakim języku naturalnym jest napisana. W HTML służy do tego atrybut lang na elemencie html. Czytnik ekranu wybiera na jego podstawie głos i zasady wymowy, więc polska strona oznaczona jako angielska albo nieoznaczona wcale zostaje odczytana z angielską wymową i trudno ją zrozumieć. Z tego samego atrybutu korzystają monitory brajlowskie, automatyczne dzielenie wyrazów i dobór cudzysłowów.
Strona spełnia kryterium, gdy element html ma poprawny znacznik języka zgodny z głównym językiem treści, na przykład lang="pl" albo lang="en-GB". Brak atrybutu lub pusty atrybut to błąd, podobnie jak wartość, która nie jest prawdziwym znacznikiem języka. Kryterium nie wymienia żadnych wyjątków. Jeśli strona miesza języki, zadeklaruj ten, którego jest najwięcej, a pozostałe fragmenty oznacz osobno, o czym mówi kryterium 3.1.2. Znacznik niewłaściwego języka mija się z celem, nawet jeśli jest poprawnie zbudowany.
/ Jak strony go nie spełniają
- Element html w ogóle nie ma atrybutu lang.
- Polska lub niemiecka witryna zachowała lang="en" z szablonu, na którym ją zbudowano.
- Wartość nie jest znacznikiem języka, na przykład lang="polish" albo lang="pl_PL" z podkreślnikiem.
- Atrybut istnieje, ale jest pusty i ma postać lang="".
- Wszystkie wersje językowe wielojęzycznej witryny mają tę samą wartość, więc strony niemieckie są zapowiadane jako angielskie.
/ Jak sprawdzić samodzielnie
- Otwórz źródło strony i spójrz na otwierający znacznik html u góry, który powinien mieć atrybut lang.
- Możesz też wpisać w konsoli przeglądarki document.documentElement.lang. Pusty wynik oznacza, że atrybutu brakuje.
- Sprawdź, czy wartość jest prawdziwym znacznikiem języka: krótkim kodem takim jak pl, de lub en, ewentualnie z łącznikiem i regionem, jak w en-GB.
- Porównaj wartość z językiem, który faktycznie czytasz na stronie, i powtórz to dla każdej wersji językowej witryny.
- Odsłuchaj jeden akapit w darmowym czytniku ekranu, na przykład NVDA. Niewłaściwy głos słychać od razu.
/ Jak to naprawić
- Dodaj atrybut do elementu głównego, na przykład lang="pl" na elemencie html polskiej strony.
- W witrynie wielojęzycznej wypełniaj tę wartość z ustawień regionalnych każdej strony w szablonie albo z ustawienia języka w CMS, nigdy stałym napisem.
- Warianty regionalne zapisuj z łącznikiem, jak en-GB lub de-AT, a nie z podkreślnikiem.
- W XHTML serwowanym jako XML dodaj obok lang atrybut xml:lang z tą samą wartością.
- Nie polegaj na znaczniku meta z http-equiv="content-language", bo technologia wspomagająca nie odczytuje z niego języka strony.
/ Co sprawdza nasz skaner
Cztery testy szukają jednego błędu, czyli elementu html bez języka. Test html_lang_missing czyta surowy HTML, a lang-missing, reguła axe html-has-lang i H57.2 z HTML_CodeSniffer czytają wyrenderowaną stronę. Żaden z nich nie porównuje zadeklarowanego języka ze słowami na stronie. Piąty test przypisany do tego kryterium, charset_missing, zgłasza brak deklaracji kodowania znaków, której to kryterium nie wymaga.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| HealthCare.gov | health · US | 3 | 57 |
| Medicare | health · US | 3 | 51 |
| Łódź | city · PL | 3 | 3 |
| Federal Aviation Administration | transport · US | 2 | 14 |
| Kielce | city · PL | 2 | 71 |
| Miami-Dade County | government · US | 2 | 20 |
| Narodowy Bank Polski | government · PL | 2 | 23 |
| National Weather Service | government · US | 2 | 34 |
| New York Public Library | culture · US | 2 | 23 |
| Social Security Administration | government · US | 2 | - |
| Sąd Najwyższy | government · PL | 2 | 14 |
| Dallas | city · US | 1 | 23 |
| Gorzów Wielkopolski | city · PL | 1 | 66 |
| Humboldt-Universität zu Berlin | education · DE | 1 | 35 |
| Instytut Pamięci Narodowej | government · PL | 1 | 43 |
| Kraków | city · PL | 1 | 12 |
| Las Vegas | city · US | 1 | 8 |
| Najwyższa Izba Kontroli | government · PL | 1 | 41 |
| Narodowy Instytut Zdrowia Publicznego | health · PL | 1 | 25 |
| New York City | city · US | 1 | 37 |
| Rzeszów | city · PL | 1 | 8 |
| Seattle | city · US | 1 | 12 |
| Sejm RP | government · PL | 1 | 9 |
| Universität Heidelberg | education · DE | 1 | 21 |
| Uniwersytet Łódzki | education · PL | 1 | 9 |
| Zarząd Transportu Miejskiego Warszawa | transport · PL | 1 | 77 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Jaki atrybut lang powinna mieć strona po polsku lub po niemiecku?
Wpisz na elemencie html dwuliterowy kod języka: lang="pl" dla polskiego, lang="de" dla niemieckiego, lang="en" dla angielskiego. Po łączniku można dodać region tam, gdzie ma to znaczenie, jak w de-AT lub en-GB. Kody pochodzą z rejestru podznaczników językowych IANA, czyli z listy, którą rozumieją przeglądarki i czytniki ekranu.
Co się dzieje, gdy brakuje atrybutu lang?
Czytnik ekranu wraca do głosu domyślnego, zwykle do języka systemu operacyjnego albo do tego, którego używał ostatnio. Tekst w innym języku jest wtedy wymawiany według niewłaściwych zasad i bywa niezrozumiały. Funkcje przeglądarki zależne od języka, takie jak automatyczne dzielenie wyrazów, również mogą na takiej stronie przestać działać.
Czy lang="en" na stronie, która nie jest po angielsku, to błąd WCAG?
W praktyce tak. Kryterium wymaga, żeby oprogramowanie mogło ustalić domyślny język strony, a znacznik wskazujący inny język daje mu błędną odpowiedź. Wiele automatycznych narzędzi sprawdza tylko, czy atrybut istnieje i czy jest poprawnie zbudowany, więc ten błąd przechodzi przez nie niezauważony. Wychwyci go dopiero człowiek czytający stronę albo czytnik ekranu.