UX a přístupnost

Klávesnice a audit

Nejrychlejší test přístupnosti nestojí nic: odložíme myš a zkusíme stránku použít jen klávesnicí. Co projde tímhle testem, je napůl hotové. Zbytek doplní automatický audit a pár minut ruční kontroly.

Ovládání klávesnicí

Prvek, který právě přijímá vstup z klávesnice, má fokus (focus). Klávesnicí se fokus posouvá a ovládané prvky se spouštějí:

Klávesy jsou na Windows, Linuxu i Macu stejné. Jen Safari na Macu tabulátorem ve výchozím stavu přeskakuje odkazy: buď v nastavení Safari na kartě Pokročilé zapněte zvýrazňování každé položky tabulátorem, nebo místo Tab tiskněte Option+Tab.

Fokus prochází prvky v pořadí, v jakém stojí v HTML. Proto má pořadí v kódu odpovídat pořadí, ve kterém stránku čteme očima. Pokušení opravit pořadí atributem tabindex odolejte:

<!-- chyba, kladný tabindex přeskládá pořadí celé stránky -->
<input id="email" type="email" tabindex="1">

<!-- správně, pořadí určuje HTML -->
<input id="email" type="email">

Prvek s kladným tabindex dostane fokus dřív než všechno ostatní na stránce, včetně menu. Hodnota 0 zařadí do pořadí prvek, který v něm normálně není, a -1 ho z pořadí vyřadí. Kladné hodnoty nepoužíváme nikdy.

Viditelný fokus

Kdo ovládá stránku klávesnicí, musí vidět, kde fokus zrovna je. Prohlížeč k tomu kreslí obrys (outline), a ten bývá první obětí designu:

/* chyba, nejčastější prohřešek proti klávesnici */
*:focus {
  outline: none;
}

/* správně, vlastní obrys při ovládání klávesnicí */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

Obrys se maže, protože se po kliknutí myší objeví kolem tlačítka a „kazí vzhled“. Pseudotřída :focus-visible řeší přesně tohle: prohlížeč ji použije, když uživatel ovládá stránku klávesnicí, a po kliknutí myší na tlačítko obrys neukáže. Barva obrysu potřebuje proti okolí kontrast aspoň 3:1, takže na tmavé hlavičce bývá jiná než na bílé ploše.

Stejná hranice 3:1 platí pro všechno, bez čeho se ovládací prvek nedá použít: rámeček políčka formuláře, ikonu tlačítka bez textu, hranu přepínače. Kontrast textu 4,5:1 jsme měřili minule, rámečky se měří stejně. Světle šedý rámeček políčka na bílém pozadí vypadá decentně, jenže člověk se slabším zrakem políčko nenajde.

Přeskočit na obsah

Kdo prochází stránku tabulátorem, musí na každé stránce znovu projít celé menu, než se dostane k obsahu. Odkaz pro přeskočení (skip link) stojí v HTML jako první, je schovaný a vyjede, až když na něj dojde fokus:

<a class="skip-link" href="#main">Přeskočit na obsah</a>
<!-- hlavička a navigace -->
<main id="main">...</main>

.skip-link {
  position: absolute;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

Automatický audit

Část chyb najde automat. Ve vývojářských nástrojích Chromu a Edge je panel Lighthouse: zaškrtněte jen kategorii Accessibility a spusťte analýzu tlačítkem Analyze page load. Výsledkem je skóre od 0 do 100 a seznam nálezů. U každého je vysvětlení, odkaz do dokumentace a seznam prvků, kterých se týká; najetím myší na prvek se zvýrazní na stránce.

Druhý nástroj je rozšíření axe DevTools pro Chrome, Edge a Firefox, které přidá do vývojářských nástrojů vlastní panel. Lighthouse stojí na stejné knihovně axe, rozšíření ale ukáže víc nálezů, včetně doporučení nad rámec pravidel WCAG.

Automat spolehlivě najde obrázek bez alt, políčko bez popisku, nízký kontrast textu, chybějící lang, přeskočenou úroveň nadpisu nebo kladný tabindex. Nepozná ale, jestli alt dává smysl, jestli jde stránka projít klávesnicí, jestli je fokus vidět ani jestli tok dává smysl. Klikací div je pro něj obyčejný blok textu. Odhady se různí, obvykle se uvádí, že automat najde zhruba třetinu až polovinu problémů. Skóre 100 proto znamená, že automat nic nenašel, ne že je stránka přístupná.

Ruční kontrola

Zbytek se hledá ručně a stačí na to pár minut:

1. Odložte myš a projděte stránku tabulátorem. Je fokus pořád vidět, jde shora dolů a dá se všechno ovládat?
2. Zvětšete stránku na 200 % – na Windows a Linuxu zkratkou Ctrl a +, na Macu Cmd a +. Nic se nesmí ztratit ani překrýt.
3. Přimhuřte oči nebo si v panelu Rendering zapněte Emulate vision deficiencies. Pozná se vybraná možnost nebo chyba i bez barvy?
4. Přečtěte si nadpisy a texty odkazů samostatně, vytržené ze stránky. Dávají smysl?