WCAG 2.4.3 Pořadí fokusu

Kritérium úspěšnosti 2.4.3 zajišťuje, že uživatelé klávesnice a čteček obrazovky procházejí interaktivní prvky stránky v pořadí, které dává smysl, takže stránce rozumějí a mohou ji ovládat. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.4.3). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud lze webovou stránkou procházet postupně (například klávesou Tab) a pořadí procházení ovlivňuje význam nebo ovládání, získávají komponenty, které mohou mít fokus, fokus v pořadí, které zachovává význam a ovladatelnost.

Pořadí fokusu nemusí kopírovat vizuální rozvržení pixel po pixelu. Chybou je, když kvůli pořadí je obsah matoucí nebo nepoužitelný. Mezi chyby zdokumentované W3C patří:

• použití tabindex k vytvoření pořadí, které narušuje význam nebo ovládání;
• umístění dialogů nebo menu v pořadí fokusu daleko od prvku, který je otevírá.

Typické chyby v e-shopu

• tabindex="1", "2" … u prvků záhlaví, takže fokus přeskakuje, než se dostane k běžnému pořadí;
• rozvržení v CSS (flexbox order, umístění v gridu), které zobrazí „Přidat do košíku“ vedle ceny, ale v DOM ho dá až na konec, za recenze a související produkty;
• popup s tabulkou velikostí nebo rychlým náhledem připojený na konec stránky, takže se do něj fokus nepřesune a uživatel musí kvůli němu projít klávesou Tab celou stránku;
• po zavření vysouvacího košíku fokus skočí na začátek stránky, místo aby se vrátil na tlačítko košíku;
• pole pokladny v jiném pořadí, než je zobrazené (PSČ před ulicí).

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Zda pořadí „zachovává význam“, je úsudek o stránce, proto je potřeba ruční kontrola. (Kladné hodnoty tabindex hlásí náš nástroj jako varování dobré praxe, ne jako porušení 2.4.3.)

Ručně: od začátku stránky mačkejte Tab a sledujte indikátor fokusu. Prochází záhlavím, hlavním obsahem a patičkou v rozumném pořadí? Na stránkách produktů: varianta, množství, „Přidat do košíku“. Otevřete každý popup a vysouvací panel: fokus by se do něj měl přesunout, zůstat v něm, dokud je otevřený, a po zavření se vrátit na spouštěč. Vyplňte formulář pokladny jen pomocí klávesy Tab.

Jak to opravit

• Nechte pořadí v DOM odpovídat vizuálnímu a logickému pořadí; vyhněte se přeskupování pomocí CSS, pokud mění význam.
• Odstraňte kladné hodnoty tabindex; pro vlastní prvky, které mají získat fokus, použijte 0 a pro prvky, které dostávají fokus skriptem, -1.
• Při otevření dialogu přesuňte fokus do něj; při zavření ho vraťte na spouštěč.
• Dynamický obsah (popupy, chybové zprávy) vkládejte v DOM vedle prvku, ke kterému patří.

Související kritéria

• 2.1.1 Klávesnice — každá funkce musí fungovat z klávesnice.
• 2.4.7 Viditelný fokus — uživatelé musí vidět, kde je fokus.
• 2.4.11 Fokus není zakrytý (minimum) — prvky s fokusem nesmí být skryté.

Časté otázky

Musí pořadí fokusu odpovídat vizuálnímu pořadí?

Ne přesně. WCAG požaduje, aby pořadí zachovalo význam a ovladatelnost. Malé rozdíly nevadí; skoky, kvůli kterým je formulář nebo dialog matoucí či nepoužitelný, jsou chybou.

Je kladný tabindex porušením WCAG?

Ne automaticky, ale W3C uvádí použití tabindex k vytvoření pořadí fokusu, které narušuje význam nebo ovladatelnost, jako běžnou chybu. Hodnoty vyšší než 0 to téměř vždy způsobí, proto se jim vyhněte.

Kam má jít fokus, když se otevře popup?

Do popupu a po jeho zavření zpět na tlačítko, které ho otevřelo. W3C uvádí dialogy umístěné v pořadí fokusu daleko od svého spouštěče jako chybu 2.4.3.