„Přístupný“ zní jako vlastnost celého webu. V praxi je to řada malých rozhodnutí ve frontendu. Tady je šest z nich, tak jak je nacházíme na skutečných stránkách, a tak, jak vypadají, když jsou v pořádku.
1. Šedý text na bílé
Jak to nacházíme. Pomocné texty, ceny pod produkty a nápovědy u formulářů ve světle šedé. Působí to klidně a v návrhu na jasném monitoru se to čte dobře.
Jak to má být. Text a pozadí dosáhnou poměru kontrastu 4,5:1. Velký text, od 24 px nebo od 18,66 px tučně, si vystačí s 3:1. Dvojici barev ověřte v kontrole kontrastu WCAG dřív, než skončí v designovém systému.
Kritérium. 1.4.3 Kontrast (minimální), úroveň AA.
2. Zaměření není vidět
Jak to nacházíme. V CSS je outline: none, protože rámeček při klikání překážel. S myší si toho nikdo nevšimne. Kdo ovládá web klávesnicí, od té chvíle nevidí, kde je.
Jak to má být. Vlastní viditelný styl zaměření místo žádného: zřetelný rámeček nebo prstenec, který se odliší od pozadí, na každém odkazu, tlačítku i poli.
Kritérium. 2.4.7 Viditelné zaměření, úroveň AA.
3. Formulářové pole bez popisku
Jak to nacházíme. Vyhledávací pole nebo pole pro newsletter, které má jen zástupný text. Ten při psaní zmizí a odečítače obrazovky ho jako název nečtou spolehlivě.
Jak to má být. label, jehož for míří na id pole. Když v layoutu viditelný popisek být nemá, zůstává popisek v kódu a schová se vizuálně, neodstraní se.
Kritérium. 3.3.2 Popisky nebo pokyny, úroveň A, spolu se 4.1.2 Název, role, hodnota.
4. Cookie lišta, ze které se zaměření nedostane
Jak to nacházíme. Lišta drží zaměření, dokud je otevřená. To je správně. Špatně je, že její tlačítka reagují jen na myš: kdo mačká tabulátor, vrací se na „Přijmout“, Enter nic neudělá a na stránku se nedostane.
Jak to má být. Každé tlačítko v liště funguje z klávesnice a po zavření se zaměření vrátí tam, kde bylo. Zavření klávesou Escape je navíc dobrá praxe.
Kritérium. 2.1.1 Klávesnice a 2.1.2 Žádná past na klávesnici, obě úroveň A. Proč to automatický sken nenajde, je v článku proč automatický sken nenajde past na klávesnici.
5. Obrázek se špatnou textovou alternativou
Jak to nacházíme. alt="obrazek", alt="foto_2024_final.jpg", nebo alternativa popisující, co je na fotce, i když je obrázek ve skutečnosti tlačítko.
Jak to má být. Textová alternativa říká, co obrázek na daném místě dělá. U obrázkového tlačítka tedy akci, ne motiv. Čistě dekorativní obrázky dostanou prázdné alt="", aby je odečítač přeskočil.
Kritérium. 1.1.1 Netextový obsah, úroveň A.
6. Nadpisy, které jen velké vypadají
Jak to nacházíme. div s písmem 32 px jako titulek stránky a pod ním skutečné prvky h3. Opticky hierarchie sedí, v dokumentu chybí. Kdo se pohybuje podle seznamu nadpisů, se na stránce nevyzná.
Jak to má být. Jedna h1 na stránku, pod ní h2 a h3 v pořadí, které plyne z obsahu. Velikost dělá CSS, strukturu dělá kód.
Kritérium. 1.3.1 Informace a vztahy, úroveň A.
Co mají těch šest společného
Ani jeden z nich není zvláštní případ pro malou skupinu. Neviditelné zaměření se týká každého, kdo zrovna nemá myš. Šedý text se týká každého, kdo čte ve vlaku na slunci. Chybějící struktura nadpisů se týká každého, kdo se stránkou pohybuje po nadpisech.
A ani jeden z nich není drahý, dokud se najde v návrhu. Drahý je ve chvíli, kdy sedí v designovém systému a je rozvezený na všech stránkách naráz.
Zjistěte, jak si váš web stojí
Bezplatný sken zkontroluje stránku podle automatizovaných pravidel WCAG 2.1 AA a ukáže první zjištění.
Tento článek je informativní a nenahrazuje právní poradenství.