1.1.1; 1.4.13; 2.1.1 Náhľady tlačiva pri ikonách nápovedy sú dostupné iba myšou a majú ako alternatívny text názov súboru

URL: priznanie.digital/zamestnanie

Popis problému:

V kroku „Mali ste v roku 2025 príjmy zo zamestnania v SR?“ (po výbere „Áno“) je pri piatich poliach za nápovedou („Tento údaj nájdete v riadku 01.“ a ďalšie) ikona <svg width="20" height="21"> v elemente <div class="tooltipHint_container__…">. Po umiestnení kurzora myši na ikonu sa zobrazí obrázok s výrezom tlačiva „Potvrdenie o zdaniteľných príjmoch fyzickej osoby zo závislej činnosti“, na ktorom je zvýraznený príslušný riadok.

• Náhľad reaguje iba na udalosti onMouseEnter a onMouseLeave. Ikona nie je zastávkou tabulátora, nemá rolu ani prístupný názov a klávesnicou sa náhľad zobraziť nedá; pri prechode poliami tabulátorom sa nezobrazí ani jeden.
• Zobrazený náhľad sa nedá zavrieť klávesom Escape (po stlačení zostane zobrazený), iba odsunutím kurzora.
• Obrázky majú ako alternatívny text názov súboru: alt="zamestnanie-hint-01", zamestnanie-hint-02a, zamestnanie-hint-02b, zamestnanie-hint-04 a zamestnanie-hint-13.
• Pri šírke zobrazovacej oblasti do 600 CSS pixelov sú ikony skryté úplne (display: none).

Dopad:

Používatelia klávesnice a čítačov obrazovky sa k náhľadom tlačiva nedostanú, a ak by sa k obrázku dostali, namiesto opisu počujú technický názov súboru. Používatelia zväčšenia obrazovky nemôžu náhľad, ktorý prekrýva text nad poľom, zavrieť bez pohybu myši. Ide o doplnkovú pomôcku — číslo riadku je uvedené aj v texte nápovedy —, no práve pre používateľov, ktorí sa v tlačive orientujú ťažko, je obrázok podstatný. Postihnutí sú používatelia, ktorí ovládajú stránku iba klávesnicou, nevidiaci a ťažko slabozrakí používatelia čítačov obrazovky, používatelia zväčšenia obrazovky a používatelia s kognitívnym znevýhodnením.

Závažnosť: stredná — doplnková pomôcka je nedostupná, základná informácia (číslo riadku) je v texte.

Efektívne riešenie:

Pre splnenie kritérií úspešnosti je potrebné ikonu vytvoriť ako tlačidlo s prístupným názvom a stavom (napríklad <button type="button" aria-expanded="false" aria-label="Ukázať riadok 01 na tlačive">), ktoré náhľad zobrazí aj klávesnicou a dotykom; náhľad sa musí dať zavrieť klávesom Escape bez presunu zamerania alebo kurzora. Obrázky potrebujú alternatívny text, ktorý opisuje ich obsah, napríklad „Výrez z tlačiva Potvrdenie o zdaniteľných príjmoch, oddiel II: zvýraznený riadok 01 – úhrn vyplatených zdaniteľných príjmov“. Alternatívne je možné náhľad zobrazovať trvalo v rozbaľovacej nápovede <details> pri poli, čo funguje aj na mobilných zariadeniach.