Čitelný web: kontrast, velikost písma a popisky formulářů

Když se řekne přístupnost webu, mnoho lidí si představí speciální úpravy pro malou skupinu návštěvníků. Většina z toho ale prospívá všem. Šedý text na bílém pozadí, který se na slunci na mobilu nedá přečíst, je problém nás všech.

Kontrast textu

Směrnice WCAG, která se na přístupnost webu běžně odkazuje, určuje poměr světlosti textu a pozadí. Orientačně:

• 4,5 : 1 pro běžný text (úroveň AA),
• 3 : 1 pro velký text a prvky rozhraní,
• 7 : 1 pro přísnější úroveň AAA.

Poměr se dá spočítat nebo zkontrolovat nástrojem. U ukázkového webu LUMEN Capital vychází krémový text na tmavě zeleném pozadí zhruba na 12,6 : 1 a zlatý akcent zhruba na 7,5 : 1. U webu VOLTCHECK je žlutá na černé zhruba 13,8 : 1. Obojí s velkou rezervou.

Nejčastější chyba bývá jemný šedý text na bílém, světlý text na fotografii a odkazy, které se barvou téměř neliší od okolí.

Velikost a řádkování

Základní text by neměl být menší než zhruba 16 px. Delší odstavce se čtou dobře při řádkování kolem 1,5 a šířce řádku, která se vejde přibližně do 60 až 80 znaků. Příliš dlouhé řádky unavují oči.

Popisky formulářových polí

Každé pole formuláře má mít viditelný popisek propojený s polem. Zástupný text uvnitř pole (placeholder) po začátku psaní zmizí, takže popisek nenahrazuje.

<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>

Díky atributu for se po kliknutí na popisek aktivuje pole a čtečka obrazovky ví, co do pole patří.

Obrázky a odkazy

U obrázků, které něco sdělují, vyplňte alternativní text (alt). U čistě dekorativních obrázků ponechte prázdné alt="", aby je čtečky přeskočily. Odkazy by měly říkat, kam vedou: „Kontakt“ je lepší než „Klikněte zde“.

Ovládání klávesnicí

Zkuste se na svém webu pohybovat jen klávesou Tab. Pokud nevidíte, kde zrovna jste, chybí zvýraznění zaměřeného prvku. Je to snadné opravit stylem :focus-visible.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #ffd600;
  outline-offset: 2px;
}

Jak to zjistit rychle

Otevřete web na telefonu venku na světle. Pak ho zkuste ovládat bez myši. Obojí zabere pár minut a ukáže víc než jakákoli zpráva.

Čitelnost kontroluji při návrhu a stavbě webů, ne dodatečně. V generátoru náhledů, který používám na schůzkách, je kontrola kontrastu podle WCAG zabudovaná, aby se nenavrhovaly barvy, které by nešly přečíst.