Takto vyzerá audit od Axively.

Nález č. 1, Príliš malý dotykový cieľ

Pravidlo:

target-size

Závažnosť:

závažná

WCAG:

2.5.8 Veľkosť cieľa (minimálna), úroveň AA (nové vo WCAG 2.2)

Výskytov:

252 výskytov

Element:

telefónny odkaz v záhlaví, dotykový cieľ menší ako 24 × 24 px, blízko ďalších odkazov

Ľudia s motorickým či zrakovým postihnutím a používatelia dotykových zariadení sa na malý cieľ trefujú ťažko a robia chyby. Zväčšite klikateľnú plochu odsadení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 odporúčame opravu triedou v CSS namiesto inline štýlu, návrh ukazuje princíp.

Nález č. 2, Formulárové pole bez viditeľného štítka

Pravidlo:

label-title-only

Závažnosť:

závažná

WCAG:

3.3.2 Štítky alebo inštrukcie (A) + 4.1.2 Názov, rola, hodnota (A)

Výskytov:

64 výskytov

Element:

vyhľadávacie pole označené len atribútom title, bez <label>

Čítačka obrazovky pri poli bez viditeľného <label> nedokáže spoľahlivo povedať, na čo slúži. title ani placeholder nestačí. Doplňte prepojený štítok:

/* 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žnosť:

stredná

WCAG:

1.3.1 Informácie a vzťahy, úroveň A

Výskytov:

6 400 výskytov

Element:

obsah ležiaci mimo orientačné oblasti (landmarky), jeden prvok šablóny opakovaný na všetkých stránkach

Čítačky obrazovky sa v obsahu mimo orientačné oblasti nedokážu spoľahlivo orientovať ani ho preskakovať. Keďže ide o prvok šablóny, obaľte ho jedinou orientačnou oblasťou:

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

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

Jedna oprava v šablóne odstráni všetkých ~6 400 výskytov — rieši sa po šablónach, nie po stránkach.