Cvičení 1
Vstupenky – pokračování
Co si vyzkoušíte
Tentokrát objednávka vstupenek existuje i v kódu. Stránka stojí na typografické škále, tokenech a mezerách v násobcích 8 z minulé lekce a na první pohled vypadá v pořádku, jenže ne každý na ní vstupenku koupí. Ve výchozím stavu máte index.html, style.css, script.js a složku images/ s logem, plakátem a ozdobným proužkem. Měnit můžete HTML, styly i texty, skript jen tam, kde to oprava HTML vyžaduje. Co přesně je špatně, nikde napsané není. Na audit budete potřebovat Chrome nebo Edge.
Zadání
- Odložte myš a zkuste jen klávesnicí objednat tři vstupenky na sobotu. Zapište do komentáře na začátek
style.css, kde to nešlo a kde jste nevěděli, kde zrovna jste. - Spusťte Lighthouse jen s kategorií Accessibility. Do stejného komentáře zapište skóre a nálezy. Které problémy z prvního kroku Lighthouse nenašel?
- Projděte
<head>a opravte všechno, co stránku nepopisuje nebo co návštěvníka omezuje. - Rozdělte stránku na oblasti a dejte jí osnovu nadpisů, která odpovídá tomu, co je na stránce vidět.
- Najděte všechno, na co se dá kliknout, a co není skutečné tlačítko nebo odkaz, nahraďte správným prvkem. Každý ovládací prvek musí mít název, který dává smysl i bez pohledu na obrazovku, a jeho stav se musí poznat i jinak než barvou.
- Propojte každé políčko formuláře s popiskem. Ověřte to kliknutím na popisek.
- Rozhodněte u každého obrázku, jestli nese informaci, nebo je jen ozdoba, a podle toho upravte jeho
alt. - Zařiďte, aby byl při ovládání klávesnicí vždycky vidět fokus a aby tabulátor procházel stránku ve stejném pořadí, v jakém ji čtete očima.
- Změřte kontrast všech textů a rámečků ovládacích prvků. Co nesplňuje 4,5:1 u textu nebo 3:1 u rámečku, opravte v tokenech.
- Přečtěte si všechny texty odkazů, jako by stály samostatně, a přepište ty, které samy o sobě nic neříkají.
- Zopakujte objednávku jen klávesnicí a znovu spusťte Lighthouse. Porovnejte výsledek s poznámkami z prvních dvou kroků.
Bonus
- Přidejte odkaz „Přeskočit na obsah“, který se ukáže až při fokusu.
- Když uživatel odešle objednávku se špatně vyplněným e-mailem, ukažte u políčka chybovou hlášku, která nestojí jen na barvě. Propojte ji s políčkem atributem
aria-describedby, jehož hodnota jeidhlášky, aby ji odečítač přečetl spolu s popiskem. - Projděte opravenou stránku rozšířením axe DevTools nebo odečítačem obrazovky. Najdete něco, co Lighthouse přehlédl?