Vyhledávání

Rozšířený audiopopisk pozastaví video, když je potřeba více času na popis složitých vizuálních scén.

Kdy použít:

• Akční scény s mnoha vizuálními detaily
• Komplexní grafy nebo diagramy
• Situace kde standardní pauzy nestačí

Poznámka: Toto je kritérium úrovně AAA.

Kompletní textová alternativa musí obsahovat vše, co je ve videu – dialogy, zvuky i popisy vizuálních prvků.

Obsah alternativy:

• Přepis všech dialogů a řeči
• Popis důležitých zvuků
• Popis vizuálních akcí a prostředí

Poznámka: Toto je kritérium úrovně AAA.

Živé audio přenosy (např. rozhlasové vysílání, podcasty živě) vyžadují textovou alternativu v reálném čase.

Řešení:

• Živý textový přepis
• Simultánní přepis (CART)
• Automatický přepis s lidskou korekcí

Poznámka: Toto je kritérium úrovně AAA.

Vizuální formátování musí být podloženo správnou HTML strukturou, aby ho mohly interpretovat asistivní technologie.

Příklady:

• Nadpisy – použijte <h1>-<h6>, ne jen velký tučný text
• Seznamy – použijte <ul>/<ol>, ne odrážky jako text
• Tabulky – použijte <th> pro záhlaví, ne jen tučný text
• Formuláře – propojte popisky s políčky pomocí <label>

Pořadí obsahu v HTML musí odpovídat logickému pořadí čtení, i když je vizuálně obsah uspořádán jinak pomocí CSS.

Časté problémy:

• CSS float nebo flexbox mění vizuální pořadí, ale ne pořadí v DOM
• Absolutně pozicované prvky jsou v HTML jinde než vizuálně
• Vícesloupcové layouty kde sloupce jsou v nesprávném pořadí

Instrukce nesmí být založeny pouze na vizuálních vlastnostech, které někteří uživatelé nemohou vnímat.

Špatně:

• "Klikněte na zelené tlačítko"
• "Vyplňte pole napravo"
• "Informace najdete v kulaté ikoně"

Správně:

• "Klikněte na tlačítko Odeslat (zelené)"
• "Vyplňte pole E-mail"
• "Informace najdete v sekci Nápověda"

Web musí fungovat jak na výšku, tak na šířku. Uživatelé s připevněnými zařízeními (vozíky) nemohou otáčet obrazovku.

Výjimky:

• Šeková knížka (vyžaduje orientaci na šířku)
• Pianová aplikace
• Prezentace na projektoru

Kontrola:

Otočte telefon/tablet a ověřte, že web funguje v obou orientacích.

Formulářová pole pro osobní údaje musí mít atribut autocomplete, aby prohlížeče mohly nabídnout automatické vyplnění.

Příklady:

• autocomplete="name" pro jméno
• autocomplete="email" pro e-mail
• autocomplete="tel" pro telefon
• autocomplete="street-address" pro adresu

To pomáhá uživatelům s kognitivními problémy a šetří čas všem.

Prvky rozhraní by měly mít sémantické značení umožňující asistivním technologiím a rozšířením prohlížeče přizpůsobit prezentaci.

Příklady:

• Použití landmark rolí (banner, navigation, main, contentinfo)
• ARIA atributy pro ikony a ovládací prvky
• Sémantické HTML5 elementy

Poznámka: Toto je kritérium úrovně AAA.

Informace předávané barvou musí být dostupné i jinak – textem, tvarem, vzorem nebo ikonou.

Příklady problémů:

• Červeně označené povinné pole bez hvězdičky nebo textu
• Graf používající jen barvy bez vzorů nebo popisků
• Odkaz odlišený jen barvou bez podtržení

Řešení:

Přidejte textový popisek, ikonu, vzor nebo jiný vizuální indikátor.

Automaticky přehrávaný zvuk může rušit uživatele čteček obrazovky a způsobovat problémy uživatelům s kognitivními poruchami.

Nejlepší praxe:

• Nepřehrávejte zvuk automaticky
• Pokud musíte, poskytněte viditelný ovládací prvek
• Zvuk kratší než 3 sekundy je výjimka

Text musí mít dostatečný kontrast vůči pozadí, aby byl čitelný pro uživatele se slabým zrakem.

Požadavky:

• Normální text – kontrast minimálně 4,5:1
• Velký text (18pt+ nebo 14pt tučný) – kontrast minimálně 3:1

Nástroje:

Použijte Color Contrast Analyzer, WebAIM Contrast Checker nebo DevTools.

Uživatelé musí mít možnost zvětšit text na dvojnásobek bez toho, aby se obsah stal nepoužitelným.

Kontrola:

1. Zvětšete zoom prohlížeče na 200%
2. Ověřte, že text je stále čitelný
3. Ověřte, že se obsah nepřekrývá
4. Ověřte, že nejsou nutné horizontální posuvníky pro text

Používejte skutečný text místo obrázků s textem. Text lze zvětšit, přebarvit a přečíst čtečkou.

Výjimky:

• Loga a značky
• Text na fotografiích
• Specifické písmo nezbytné pro informaci (historické dokumenty)

Vylepšené kontrastní požadavky pro lepší čitelnost.

Požadavky (AAA):

• Normální text – kontrast minimálně 7:1
• Velký text – kontrast minimálně 4,5:1

Poznámka: Toto je kritérium úrovně AAA.

Audio s řečí by nemělo mít rušivé pozadí, které ztěžuje porozumění.

Řešení:

• Nahrávejte v tichém prostředí
• Hudba na pozadí by měla být výrazně tišší než řeč
• Poskytněte verzi bez hudby na pozadí

Poznámka: Toto je kritérium úrovně AAA.

Uživatelé by měli mít možnost přizpůsobit si zobrazení textu pro lepší čitelnost.

Požadavky:

• Možnost změnit barvy textu a pozadí
• Šířka textu maximálně 80 znaků (40 pro CJK)
• Text není zarovnán do bloku
• Řádkování alespoň 1,5
• Možnost zvětšit text na 200%

Poznámka: Toto je kritérium úrovně AAA.

Přísnější verze kritéria 1.4.5 – obrázky textu jsou povoleny pouze ve výjimečných případech.

Povolené případy:

• Logotypy a značky
• Text, který je čistě dekorativní
• Případy kde je vizuální podoba textu klíčová pro informaci

Poznámka: Toto je kritérium úrovně AAA.

Při zvětšení na 400% (nebo na úzké obrazovce) se obsah musí přeformátovat do jednoho sloupce bez horizontálního scrollování.

Výjimky:

• Tabulky s daty
• Mapy
• Diagramy
• Video
• Toolbary pro editaci

Kontrola:

Zmenšete okno prohlížeče na 320px šířky a ověřte, že vše funguje.

Nejen text, ale i ovládací prvky a důležitá grafika musí mít dostatečný kontrast.

Příklady:

• Ohraničení formulářových polí
• Ikony tlačítek
• Grafy a diagramy
• Checkboxy a přepínače

Výjimky:

• Neaktivní prvky
• Vzhled určený prohlížečem