Vyhledávání

Pokud máte video s vizuálním obsahem, který není popsán v audio stopě, musíte poskytnout buď:

• Audiopopisk – hlasový komentář popisující důležité vizuální informace
• Textová alternativa – kompletní přepis včetně popisu vizuálních prvků

Kdy to platí:

• Videa kde se něco děje na obrazovce, co není řečeno
• Prezentace kde mluvčí ukazuje na něco, co není slovně popsáno

Živé přenosy se zvukem (webináře, online konference, streamy) musí mít titulky v reálném čase.

Praktické řešení:

• Použijte služby živého přepisu (CART services)
• Automatické titulky (YouTube, Zoom) jsou dobrý začátek, ale vyžadují lidskou korekci
• Pro přenosy ve znakovém jazyce zajistěte i textový přepis

Předtočená videa musí mít audiopopisk – hlasový komentář popisující důležité vizuální informace, které nejsou zmíněny v původní audio stopě.

Co popisovat:

• Akce postav a jejich výrazy
• Změny scény a prostředí
• Text zobrazený na obrazovce
• Grafické prvky a vizuální efekty

Toto kritérium úrovně AAA vyžaduje, aby předtočená videa obsahovala tlumočení do znakového jazyka.

Proč je to důležité:

• Pro některé neslyšící je znakový jazyk jejich primární jazyk
• Písemný text může být pro ně obtížnější než znakový jazyk

Poznámka: Toto je kritérium úrovně AAA a není povinné pro základní shodu.

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.