Shrnutí
UX začíná u cíle uživatele, ne u stránek. Z cíle vznikne uživatelský tok, z toku seznam obrazovek a z každé obrazovky low-fi wireframe, na kterém se pořadí a hlavní akce ověří dřív, než se napíše první řádek kódu. Přístupnost pak rozhoduje, jestli tou cestou projde každý: stojí na správných prvcích HTML, na textových náhradách obrázků, na ovládání klávesnicí a na kontrastu. Automatický audit najde jen část chyb, zbytek odhalí ruční průchod.
| Pojem | V jedné větě |
|---|---|
| Cíl uživatele | co chce mít hotové, popsané jeho slovy, ne slovy webu |
| Uživatelský tok | cesta od vstupu k cíli; ovál, obdélník, kosočtverec a šipky |
| Šťastná cesta | cesta, na které všechno vyjde; odbočky nesmí končit ve slepé uličce |
| Mapa webu | strom stránek, který vznikne sjednocením obrazovek ze všech toků |
| Low-fi wireframe | hrubý nákres obrazovky bez barev a písem, se skutečnými texty nadpisů a tlačítek |
| WCAG | standard přístupnosti se čtyřmi principy a úrovněmi A, AA a AAA; cílem je AA |
| Sémantika | header, nav, main, footer, nadpisy bez přeskakování a button pro akci, a pro přechod |
| Popisek políčka | label s for, který odkazuje na id políčka; placeholder ho nenahradí |
| Alt text | co obrázek sděluje; ozdoba má alt="", obrázkový odkaz popisuje cíl |
| Fokus | prochází prvky v pořadí HTML, bez kladného tabindex, a je vidět díky :focus-visible |
| Kontrast | text aspoň 4,5:1, rámečky a obrys fokusu aspoň 3:1 |
| Audit | Lighthouse a axe najdou zhruba třetinu až polovinu problémů, zbytek ruční průchod |
Umím?
- Popíšu cíl uživatele a rozložím ho na úkoly.
- Nakreslím uživatelský tok s rozhodnutím a odbočkou, která nekončí ve slepé uličce.
- Vyčtu z toku obrazovky, které web potřebuje.
- Nakreslím low-fi wireframe obrazovky pro úzký displej i pro široké okno.
- Vyjmenuji čtyři principy WCAG a vím, na kterou úroveň web míří.
- Postavím stránku z oblastí a nadpisů, které dávají osnovu.
- Rozhodnu, kdy patří na stránku tlačítko a kdy odkaz.
- Propojím políčko formuláře s popiskem.
- Napíšu alt text informativního obrázku, ozdoby i obrázkového odkazu.
- Projdu stránku jen klávesnicí a opravím neviditelný fokus i rozházené pořadí.
- Spustím audit v Lighthouse a vím, co z něj nevyčtu.