Takhle vypadá audit od Axively.

Nález č. 1, Příliš malý dotykový cíl

Pravidlo:

target-size

Závažnost:

vážná

WCAG:

2.5.8 Velikost cíle (minimální), úroveň AA (nové ve WCAG 2.2)

Výskytů:

252 výskytů

Element:

telefonní odkaz v hlavičce, dotykový cíl menší než 24 × 24 px, blízko dalších odkazů

Lidé s motorickým či zrakovým postižením a uživatelé dotykových zařízení se na malý cíl trefují obtížně a chybují. Zvětšete klikací plochu odsazením:

/* before */
<a href="tel:..." class="page-header--link">+33 1 00 00 00 00</a>

/* after */
<a href="tel:..." class="page-header--link"
   style="padding:10px; display:inline-block;">+33 1 00 00 00 00</a>

V praxi doporučujeme opravu třídou v CSS místo inline stylu, návrh ukazuje princip.

Nález č. 2, Formulářové pole bez viditelného štítku

Pravidlo:

label-title-only

Závažnost:

vážná

WCAG:

3.3.2 Štítky nebo instrukce (A) + 4.1.2 Název, role, hodnota (A)

Výskytů:

64 výskytů

Element:

vyhledávací pole označené jen atributem title, bez <label>

Čtečka obrazovky u pole bez viditelného <label> nedokáže spolehlivě říct, k čemu slouží. title ani placeholder nestačí. Doplňte propojený štítek:

/* before */
<input class="search" title="address" type="text">

/* after */
<label for="locality">Address</label>
<input id="locality" class="search" type="text">

Nález č. 3, Obsah mimo orientační oblasti (landmarky)

Pravidlo:

region

Závažnost:

střední

WCAG:

1.3.1 Informace a vztahy, úroveň A

Výskytů:

6 400 výskytů

Element:

obsah ležící mimo orientační oblasti (landmarky), jeden prvek šablony opakovaný na všech stránkách

Čtečky obrazovky se v obsahu mimo orientační oblasti (landmarky) neumí spolehlivě orientovat ani ho přeskakovat. Protože jde o prvek šablony, obalte ho jedinou orientační oblastí:

/* before */
<div class="page-content">
  ...
</div>

/* after */
<main class="page-content">
  ...
</main>

Jedna oprava v šabloně odstraní všech ~6 400 výskytů — řeší se po šablonách, ne po stránkách.