WCAG 3.1.1 Język strony

Kryterium sukcesu 3.1.1 pozwala przeglądarkom, czytnikom ekranu i narzędziom do tłumaczenia rozpoznać, w jakim języku napisano stronę. Czytnik ekranu wybiera wtedy właściwy głos i wymowę, a monitory brajlowskie i napisy stosują właściwe reguły. Bez tego niemiecka strona produktu może zostać odczytana z angielską wymową i stać się trudna do zrozumienia. To poziom A, a norma EN 301 549 zawiera je jako punkt 9.3.1.1.

Czego wymaga kryterium

Domyślny język naturalny każdej strony internetowej musi być możliwy do programowego określenia — oprogramowanie musi móc odczytać go z kodu. W HTML służy do tego atrybut lang elementu <html>, np. <html lang="pl">.

Gdy strona zawiera kilka języków, domyślny jest ten, którego używa się najwięcej. Jeśli dwa języki są używane w równym stopniu, domyślny jest ten użyty jako pierwszy. Kryterium nie ma wyjątków, ale wymaga tylko języka domyślnego strony; pojedynczymi zwrotami w innych językach zajmuje się 3.1.2.

Typowe błędy w sklepie internetowym

• szablon motywu w ogóle nie ma atrybutu lang;
• każda wersja językowa sklepu ma lang="en", bo atrybut jest wpisany na sztywno w motywie;
• nieprawidłowa wartość, np. lang="english" albo lang="ua" (kod języka ukraińskiego to uk);
• lang i xml:lang w tym samym elemencie wskazują różne języki;
• strony zamówienia lub konta obsługiwane przez inną aplikację lub szablon, który pomija atrybut.

Jak to sprawdzić

Automatycznie: nasz skaner sprawdza to na każdej zeskanowanej stronie za pomocą reguł html-has-lang, html-lang-valid i html-xml-lang-mismatch: brak atrybutu, wartość niebędąca prawidłowym kodem języka oraz niezgodność między lang a xml:lang.

Ręcznie: otworzyć każdą wersję językową sklepu i obejrzeć źródło strony (albo panel Elementy w narzędziach deweloperskich). Upewnić się, że wartość lang odpowiada językowi, w którym odwiedzający faktycznie czytają. To samo zrobić dla stron zamówienia, konta i pomocy, które często korzystają z innych szablonów.

Jak to naprawić

• Dodać lang do elementu <html> w układzie motywu, używając prawidłowego kodu języka (en, de, pl, uk, cs, ro…). Podznacznik regionu, np. en-GB, jest dozwolony, ale niewymagany.
• W sklepach wielojęzycznych wstawiać wartość na podstawie bieżącego języka sklepu zamiast wpisywać ją na sztywno. Motywy Shopify, WooCommerce i PrestaShop zwykle mają do tego zmienną.
• Sprawdzić, czy aplikacje i zewnętrzne strony zamówienia też ustawiają ten atrybut.

Powiązane kryteria

• 3.1.2 Język części — zwroty w innym języku wewnątrz strony.
• 2.4.2 Tytuł strony — kolejne ustawienie na poziomie strony sprawdzane na każdej stronie.
• Lista kontrolna WCAG 2.2 — wszystkie kryteria poziomu A i AA na jednej liście.

Najczęstsze pytania

Jak spełnić WCAG 3.1.1?

Ustawić atrybut lang elementu html na główny język strony, np. lang="de" dla strony niemieckiej. Każda wersja językowa sklepu powinna deklarować własny język.

Co, jeśli strona używa dwóch języków?

Językiem domyślnym jest ten, którego na stronie używa się najwięcej. Fragmentami w innym języku zajmuje się 3.1.2 Język części.

Czy automatyczny skaner może sprawdzić 3.1.1?

W większości tak. Widzi, czy atrybutu lang brakuje lub czy jest nieprawidłowy. Nie rozpozna jednak, czy zadeklarowany język to ten, w którym tekst faktycznie jest napisany, więc warto, by człowiek rzucił na to okiem.