Nii näeb Axively audit välja.

Leid 1, Puutelsihtmärk liiga väike

Reegel:

target-size

Raskusaste:

tõsine

WCAG:

2.5.8 Sihtmärgi suurus (miinimum), tase AA (uus WCAG 2.2-s)

Esinemisi:

252 esinemisi

Element:

telefonilink päises, puutelsihtmärk väiksem kui 24 × 24 px, teiste linkide lähedal

Mootori- või nägemispuudega inimestel ja puuteseadmete kasutajatel on väikest sihtmärki raske tabada ja nad teevad vigu. Suurendage klikitavat ala täidisega (padding):

/* 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>

Praktikas soovitame seda parandada CSS-klassiga, mitte inline-stiiliga, soovitus näitab põhimõtet.

Leid 2, Vormiväli ilma nähtava sildita

Reegel:

label-title-only

Raskusaste:

tõsine

WCAG:

3.3.2 Sildid või juhised (A) + 4.1.2 Nimi, roll, väärtus (A)

Esinemisi:

64 esinemisi

Element:

otsingumärgendis, millel on silt ainult title-atribuudi kaudu, ilma <label>-ita

Ilma nähtava <label>-ita ei suuda ekraanilugeja usaldusväärselt öelda, milleks väli on. title ja placeholder ei piisa. Lisage seotud silt:

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

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

Leid nr 3 — Sisu väljaspool orientiiripiirkondi (landmark)

Reegel:

region

Raskusaste:

keskmine

WCAG:

1.3.1 Teave ja seosed, tase A

Esinemisi:

6400 esinemisi

Element:

sisu väljaspool orientiiripiirkondi (landmark) — üks malli element, mis kordub igal lehel

Ekraanilugejad ei suuda usaldusväärselt navigeerida ega vahele jätta sisu, mis on väljaspool orientiiripiirkondi. Kuna tegu on malli elemendiga, mähkige see ühte orientiiripiirkonda:

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

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

Üksainus parandus mallis eemaldab kõik ~6400 esinemist — lahendatakse malli, mitte lehe kaupa.