Pro jednoduchost jsme vybrali pouze povinná pravidla - tedy ta, která splňují potřebné standardy s úrovní A a AA.
Barvy a viditelnost
Použití barev (A)
Vyvarujte se použití barev jako jediného nositele významu – nejenže barvy mají v jiných kontextech jiný význam, ale nevidomí lidé je nemusejí vidět nebo vidět správně.
Kontrast barev textů (AA)
Stáhněte si užitečný plugin pro měření kontrastu ve Figmě.
Dodržte alespoň minimální kontrast mezi textem a pozadím:
4,5:1 pro texty menší než 24pt a texty v bold řezu menší než 19pt.
3:1 pro texty větší než 24pt a texty v bold řezu větší než 19pt.
Kontrast barev (AA)
Všechny grafické prvky a komponenty musejí mít kontrast v poměru alespoň 3:1 vůči sousedním barvám. Toto pravidlo se vztahuje na všechny prvky, které napomáhají porozumět obsahu webu jako např. ikony, grafy, infografiky, ovládací prvky a všechny jejich stavy.
Viditelnost aktivního prvku (AA)
Musí být jednoduše a zřetelně viditelné, na kterém prvku je fokus. Například při ovládání klávesnicí.
Stav fokusu by se měl lišit od stavu najetí myší.
Indikátor fokusu by měl dodržovat poměr kontrastu vůči pozadí 3:1.
Copywriting
Text v obrázcích (AA)
Veškerý text, který je nevyhnutelný pro orientaci po stránce a pochopení obsahu, nesmí být součástí obrázku. V případě, že nelze takové pravidlo dodržet, dobře popište alternativní text k obrázku.
Nadpisy a štítky (AA)
Nadpisy musí popisovat téma, význam nebo účel obsahu pod ním a musí využívat velké první písmeno jen na začátku věty.
Štítky musí uvádět účel pole, ke kterému se vztahují.
Štítky je vhodné umístit nad pole s vysokým kontrastem textu.
Tlačítka a odkazy (AA)
Tlačítka nebo odkazy, které vedou na jiné místo, musí mít jiný popis.
Tlačítka i odkazy musí být natextované tak, aby dávaly smysl i bez kontextu - například “Zjistit více” je špatně, ale “Více o pojištění” už je v pořádku. V košíku není textace CTA “Pokračovat” ideální, ovšem “Přejít k platbě” už je.
Layout
Smysluplné rozvržení (A)
Uspořádání, pořadí čtení prvků a navigace by mělo být smysluplné, logické a intuitivní.
V případě, že je pořadí prvků důležité, musí uživatel k obsahu přistupovat v tomto pořadí.
Orientace obrazovky (AA)
Obrazovka nesmí být zamčena pro vertikální ani pro horizontální prohlížení obsahu.
Změna velikosti textu (AA)
Uživatel musí mít možnost zvětšit text o 200 % původní velikosti. Občas i o 400 %.
Konzistentní navigace (AA)
V případě, že se navigace opakuje na více stránkách, je nezbytné, aby byla prezentována konzistentním způsobem.
Smyslové vlastnosti (A)
Obsah a pokyny k jeho užívání nesmí spoléhat na tvar, velikost nebo vizuální umístění.
Nelze se odvolávat na akci na základě těchto vlastností – například pokračujte kliknutím na červené tlačítko.
Konzistentní identifikace (AA)
Opakující se prvky musejí být prezentovány konzistentně.
Pokud jste narazili na pravidlo, které by zde ještě mohlo být, určitě nám napište. Rádi seznam aktualizujeme.
