Pro jednoduchost jsme vybrali pouze povinná pravidla - tedy ta, která splňují potřebné standardy s úrovní A a AA.

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ší něž 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.

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.

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ánkach, je nezbytné, aby byla prezentována konzistentním způsobem.
  

Smyslové vlastnosti (A)

• Obsah a pokyny k jeho užívaní 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.