1.1.1 Dekoratívne ikony nie sú skryté pred asistenčnými technológiami

Porušenie sa týka celého webového sídla.

Popis problému:

Ikony v navigácii, tlačidlách a kartách sú vložené ako inline <svg> bez atribútu aria-hidden="true" a bez prístupného názvu, napríklad <svg class="h-5 w-5 shrink-0 text-gray-400 …" viewBox="0 0 24 24"> pred textom „Nový dokument“. Prehliadač ich v strome prístupnosti vystavuje ako obrázky bez názvu (na všetkých 38 testovaných stavoch). Správne skryté sú iba ikony v notifikáciách (aria-hidden="true").

Dopad:

Niektoré kombinácie čítača obrazovky a prehliadača (napríklad Narrator alebo VoiceOver) oznamujú pri každej položke navigácie „obrázok“ alebo „grafika“ bez ďalšieho významu. Používatelia čítačov obrazovky tak počúvajú zbytočný šum a pri prechádzaní po obrázkoch narazia na desiatky nepomenovaných prvkov.

Závažnosť: nízka — vedľajší text ikonu vždy vysvetľuje, ide o zbytočný šum.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné všetkým dekoratívnym ikonám doplniť atribúty aria-hidden="true" a focusable="false". Ikonám, ktoré sú jediným obsahom ovládacieho prvku, je naopak potrebné dať prístupný názov cez aria-label na nadradenom tlačidle alebo odkaze.

<svg aria-hidden="true" focusable="false" class="h-5 w-5 …">…</svg>