Smernice

Jasna poimenovanja, namen in stanje interaktivnih elementov

Interaktivni elementi, kot so gumbi, povezave, obrazci in stikala, morajo imeti jasno določeno ime, vlogo in trenutno stanje. Tako lahko vsi uporabniki, tudi uporabniki podpornih tehnologij, razumejo njihov namen in jih pravilno uporabljajo.
Vrsta: Digitalna dostopnost
Zahtevnost: Napredno
Avtor: DigARegion
Objavljeno:
Posodobljeno:
Deli na:

Smernica pokriva oviranosti:

Podporne tehnologije, kot so bralniki zaslona, uporabnikom sporočajo ime elementa, njegovo vlogo (npr. gumb ali potrditveno polje) ter trenutno stanje (npr. izbrano, razširjeno ali označeno). Če te informacije niso pravilno določene ali posodobljene, uporabniki ne morejo zanesljivo razumeti, kako element deluje, kar lahko oteži ali celo onemogoči uporabo spletne strani.

Za katere uporabnike je to posebej pomembno?

Pravilno določeno ime, vloga in stanje elementov so ključni predvsem za:

  • slepe in slabovidne uporabnike, ki uporabljajo bralnike zaslona,
  • uporabnike, ki splet uporabljajo izključno s tipkovnico,
  • osebe z motnjami pozornosti ali kognitivnimi oviranostmi,
  • uporabnike podpornih tehnologij, ki informacije o elementih pridobivajo programsko.

Ko uporabnik doseže interaktivni element, mora podporna tehnologija jasno sporočiti, za kakšen element gre, kakšen je njegov namen in v kakšnem stanju se trenutno nahaja. Šele na podlagi teh informacij lahko uporabnik samozavestno nadaljuje z uporabo spletne strani.

Kaj pomenijo ime, vloga in stanje elementa?

Vsak interaktivni element mora podpornim tehnologijam posredovati tri ključne informacije:

  • Ime (Name) – pove, kako se element imenuje oziroma kaj predstavlja (npr. »Potrdi in nadaljuj« ali »Odpri navigacijo«).
  • Vloga (Role) – določa vrsto elementa, na primer gumb (button), potrditveno polje (checkbox), zavihek (tab) ali drsnik (slider).
  • Stanje (State) – opisuje trenutno stanje elementa, na primer ali je razširjen, izbran, označen, onemogočen ali prazen.
Namig: Uporabnik bralnika zaslona ne vidi videza elementa. O njegovi funkciji sklepa na podlagi imena, vloge in stanja, ki jih spletna stran posreduje podporni tehnologiji.

Primer gumba, ki ima ustrezno poimenovanje, vlogo in stanje:

Gumb ima ustrezno dostopno ime »Potrdi in nadaljuj na drugi korak registracije-Moji produkti« in pravilno določeno vlogo (button).

Pogoste težave

Element nima ustreznega imena

Če interaktivni element nima dostopnega imena, uporabnik ne ve, kaj predstavlja ali kaj se zgodi ob njegovi aktivaciji.

Slaba praksa: Gumb za odpiranje navigacije nima imena, zato ga bralnik zaslona prebere le kot »gumb« ali celo kot neimenovan element.

Primer neustrezno poimenovanega gumba:

Gumb za odpiranje navigacijskega menija (hamburger meni) brez dostopnega imena.
Dobra praksa: Gumb ima jasno dostopno ime »Odpri navigacijo«, zato uporabnik takoj razume njegovo funkcijo.

Primer ustrezno poimenovanega gumba:

Gumb vsebuje jasno dostopno ime, ki uporabniku pove, kaj se zgodi ob njegovi aktivaciji.

Element nima pravilno določene vloge

Če element nima ustrezne vloge ali uporablja napačno, ga podporne tehnologije predstavijo napačno ali sploh ne vedo, kako ga obravnavati.

Na primer, element, ki deluje kot gumb, ne sme biti predstavljen kot splošen (generic) element ali kot zavihek (tab), če dejansko ne opravlja te funkcije.

Namig: Kjer je mogoče, uporabljajmo semantične HTML elemente, kot so <button>, <input> ali <select>, saj imajo ustrezno vlogo določeno že privzeto.

Stanje elementa ni pravilno posodobljeno

Pogosta težava je, da se vizualno stanje elementa spremeni, programsko pa ostane nespremenjeno.

To se pogosto pojavlja pri:

  • harmonikah (accordion),
  • spustnih seznamih,
  • zavihkih,
  • stikalih,
  • potrditvenih poljih.

Če je harmonika odprta, mora biti to razvidno tudi iz njenega programskega stanja (npr. aria-expanded="true"). Če je zaprta, mora biti stanje ustrezno posodobljeno.

Slaba praksa: Harmonika je vizualno odprta, vendar ima napačno določeno vlogo in stanje, zato podporna tehnologija sporoča napačne informacije.

Primer napačno določene vloge in stanja elementa:

Element harmonike ima napačno določeno vlogo (tab) in nepravilno stanje (ni razširjeno), čeprav je trenutno odprt.
Dobra praksa: Ob odprtju harmonike se programsko posodobi tudi njeno stanje, zato uporabnik prejme pravilne informacije.

Primer ustrezno določene vloge in stanja elementa:

Primer harmonike z ustrezno določeno vlogo (button) ter pravilno določenim stanjem elementa (aria-expanded in aria-checked), ki je trenutno razširjen in izbran.

Vizualno stanje in programsko stanje nista usklajena

Včasih je element na zaslonu videti izbran, označen ali odprt, podporne tehnologije pa tega ne zaznajo.

To povzroči zmedo, saj različni uporabniki prejmejo različne informacije o istem elementu.

Namig: Vizualne spremembe morajo biti vedno usklajene s programskimi informacijami, ki jih uporabljajo podporne tehnologije.

Primer pravilno posodobljenega stanja:

Primer harmonike s pravilno določenim stanjem elementa (aria-expanded=”false”), ki trenutno ni razširjen.

Na kaj moramo biti še posebej pozorni?

Pri preverjanju interaktivnih elementov si lahko pomagamo z naslednjimi vprašanji:

  • Ali ima vsak gumb, povezava ali drug interaktivni element jasno ime?
  • Ali je elementu določena pravilna vloga?
  • Ali se stanje elementa ob spremembi ustrezno posodobi?
  • Ali se vizualno in programsko stanje vedno ujemata?
  • Ali uporabniki bralnikov zaslona prejmejo enake informacije kot videči uporabniki?

Povezava s smernicami dostopnosti (WCAG)

Področje poimenovanja, vloge in stanja elementov naslavlja predvsem naslednji kriterij uspeha WCAG:

  • 4.1.2 Ime, vloga, vrednost (Name, Role, Value)

S pravilno določenimi imeni, vlogami in stanji interaktivnih elementov zagotovimo, da vsi uporabniki – ne glede na način uporabe spleta – prejmejo enake informacije o funkcionalnosti spletne strani. Tako izboljšamo dostopnost, zmanjšamo možnost napak ter omogočimo učinkovito uporabo digitalnih storitev tudi uporabnikom podpornih tehnologij.