WCAG 3.1.1 Jazyk stránky

Kritérium úspěšnosti 3.1.1 umožňuje prohlížečům, čtečkám obrazovky a překladačům zjistit, v jakém jazyce je stránka napsaná. Čtečka obrazovky pak zvolí správný hlas a výslovnost a braillské řádky i titulky použijí správná pravidla. Bez toho může být německá stránka produktu předčítána s anglickou výslovností a stane se těžko srozumitelnou. Jde o úroveň A a norma EN 301 549 ji obsahuje jako článek 9.3.1.1. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Výchozí lidský jazyk každé webové stránky musí být programově určitelný — software ho musí umět přečíst z kódu. V HTML se to dělá atributem lang u prvku <html>, například <html lang="cs">.

Pokud stránka obsahuje více jazyků, výchozím je ten, který se používá nejvíc. Pokud se dva jazyky používají stejně, je to ten, který se použije jako první. Kritérium nemá výjimky, ale požaduje jen výchozí jazyk stránky; jednotlivé fráze v jiných jazycích pokrývá 3.1.2.

Typické chyby v e-shopu

• šablona vzhledu nemá atribut lang vůbec;
• každá jazyková verze e-shopu uvádí lang="en", protože je atribut v šabloně zapsaný napevno;
• neplatná hodnota jako lang="english" nebo lang="ua" (kód pro ukrajinštinu je uk);
• lang a xml:lang u stejného prvku uvádějí různé jazyky;
• stránky pokladny nebo účtu obsluhované jinou aplikací nebo šablonou, která na atribut zapomene.

Jak to zkontrolovat

Automaticky: náš nástroj to testuje na každé kontrolované stránce pravidly html-has-lang, html-lang-valid a html-xml-lang-mismatch: chybějící atribut, hodnota, která není platným kódem jazyka, a nesoulad mezi lang a xml:lang.

Ručně: otevřete každou jazykovou verzi e-shopu a zobrazte zdrojový kód stránky (nebo panel Elements v nástrojích pro vývojáře). Ověřte, že hodnota lang odpovídá jazyku, který návštěvníci skutečně čtou. Totéž udělejte u pokladny, účtu a stránek nápovědy, které často používají jiné šablony.

Jak to opravit

• Do prvku <html> v rozvržení šablony přidejte lang s platným kódem jazyka (en, de, pl, uk, cs, ro…). Regionální podznačka jako en-GB je povolena, ale není nutná.
• V e-shopech s více jazyky vypisujte hodnotu podle aktuálního jazyka obchodu, místo abyste ji zapisovali napevno. Šablony Shopify, WooCommerce a PrestaShop k tomu obvykle mají proměnnou.
• Ověřte, že atribut nastavují i aplikace a pokladny třetích stran.

Související kritéria

• 3.1.2 Jazyk částí — fráze v jiném jazyce uvnitř stránky.
• 2.4.2 Název stránky — další nastavení na úrovni stránky, které se kontroluje na každé stránce.
• Kontrolní seznam WCAG 2.2 — všechna kritéria úrovně A a AA v jednom seznamu.

Časté otázky

Jak splním WCAG 3.1.1?

Nastavte atribut lang prvku html na hlavní jazyk stránky, například lang="de" pro německou stránku. Každá jazyková verze e-shopu by měla uvádět svůj vlastní jazyk.

Co když stránka používá dva jazyky?

Výchozím jazykem je ten, který se na stránce používá nejvíc. Pasáže v jiném jazyce řeší 3.1.2 Jazyk částí.

Dokáže 3.1.1 otestovat automatický nástroj?

Většinou ano. Pozná, zda atribut lang chybí nebo je neplatný. Nepozná však, zda uvedený jazyk odpovídá jazyku, ve kterém je text skutečně napsaný, proto by se na to měl podívat člověk.