Dostopno ime: aria-label ali aria-labelledby

Poglejmo naslednji gumb:

<button aria-label="Zapri okno">
  Prekliči
</button>

Na zaslonu piše:

Prekliči

Toda dostopno ime gumba je:

Zapri okno

Uporabnik glasovnega upravljanja vidi napis »Prekliči« in izgovori:

Klikni Prekliči.

Računalnik pa gumba s tem imenom morda ne prepozna. Zanj se kontrolnik imenuje »Zapri okno«.

Vidna oznaka in dostopno ime sta se razšla.

Težava ni samo tehnična. Uporabnik vidi eno informacijo, njegova podporna tehnologija pa dobi drugo.

Kaj je dostopno ime?

Dostopno ime je programsko določeno ime elementa uporabniškega vmesnika.

Uporabljajo ga na primer:

• bralniki zaslona, da uporabniku povedo, kateri element je dosegel;
• programska oprema za glasovno upravljanje, da lahko uporabnik element prikliče po imenu;
• druga podporna tehnologija, ki potrebuje programsko določen namen kontrolnika.

Ko uporabnik bralnika zaslona doseže gumb, lahko sliši:

Prekliči, gumb.

»Prekliči« je dostopno ime, »gumb« pa njegova vloga.

Dostopno ime ni nujno zapisano v enem samem atributu. Brskalnik ga izračuna iz HTML-ja, vsebine elementa, povezav med elementi in atributov ARIA.

Od kod pride dostopno ime?

Celoten algoritem Accessible Name and Description Computation je precej obsežen. Upošteva vrsto elementa, njegovo vlogo, povezave z drugimi elementi, vsebino in več posebnih pravil.

Za vsakodnevno delo pa lahko uporabimo poenostavljeno orientacijo.

Pri številnih običajnih uporabniških komponentah imajo pomembno vlogo naslednji viri:

1. aria-labelledby;
2. aria-label;
3. domorodni vir v HTML-ju;
4. rezervni viri, kot je title.

Domorodni vir je lahko na primer:

• besedilo znotraj <button>;
• besedilo povezave;
• element <label> za obrazčno polje;
• atribut alt pri sliki;
• element <legend> pri skupini <fieldset>;
• element <caption> pri tabeli.

To ni popoln algoritem in ne velja enako za vse elemente. Je pa dovolj dobra osnova za najpomembnejše praktično pravilo:

Kadar HTML že zagotavlja primerno dostopno ime, ne dodajajmo ARIA brez potrebe.

Najboljše ime je pogosto že v HTML-ju

Ta gumb že ima dostopno ime:

<button>Prekliči</button>

Brskalnik ga pridobi iz njegove vsebine:

Prekliči

Dodatni atribut ni potreben.

Naslednja rešitev je slabša:

<button aria-label="Zapri okno">
  Prekliči
</button>

aria-label pri izračunu dostopnega imena prevlada nad besedilom gumba. Beseda »Prekliči« ostane vidna na zaslonu, vendar praviloma ni več dostopno ime kontrolnika.

Če dejanje res pomeni preklic, naj bo rešitev preprosta:

<button>Prekliči</button>

Če dejanje pomeni zapiranje okna, uskladimo tudi vidno oznako:

<button>Zapri okno</button>

Dostopno ime naj se ne bori z vmesnikom. Opisuje naj isti element in isto dejanje kot vidna oznaka.

Zakaj je ujemanje z vidnim besedilom pomembno?

Uporabniki glasovnega upravljanja pogosto upravljajo kontrolnike tako, da izgovorijo besedilo, ki ga vidijo na zaslonu.

Če na gumbu piše »Prekliči«, njegovo dostopno ime pa je »Zapri okno«, ukaz:

Klikni Prekliči

morda ne bo deloval.

To obravnava tudi merilo WCAG 2.5.3 Oznaka v imenu. Kadar ima kontrolnik vidno besedilno oznako, mora dostopno ime vsebovati besedilo te oznake.

Najvarneje je, da se dostopno ime z vidno oznako začne in jo po možnosti v celoti ohrani.

Dobro:

<button aria-label="Prekliči urejanje">
  Prekliči
</button>

Dostopno ime vsebuje celotno vidno oznako »Prekliči«.

Še bolje, kadar dodatni kontekst ni nujen:

<button>Prekliči</button>

Manj kode pomeni manj možnosti, da se vidna in programska informacija pozneje razideta.

Kdaj uporabiti aria-labelledby?

aria-labelledby uporabimo, kadar ustrezno besedilo že obstaja drugje na strani in naj ta element poimenuje.

Namesto da ime prepišemo v atribut, se sklicujemo na ID obstoječega elementa.

<h2 id="cenik-naslov">Cenik</h2>

<section aria-labelledby="cenik-naslov">
  ...
</section>

Dostopno ime območja <section> je:

Cenik

Prednost te rešitve je, da vidni naslov in dostopno ime izhajata iz istega besedila. Ko urednik spremeni naslov, se spremeni tudi dostopno ime območja.

Ni dveh ločenih nizov, ki bi ju bilo treba vzdrževati.

Več referenc

aria-labelledby lahko vsebuje več ID-jev, ločenih s presledki:

<span id="izdelek">Brezžične slušalke</span>
<span id="razlicica">črne</span>

<button aria-labelledby="izdelek razlicica dejanje">
  <span id="dejanje">Dodaj v košarico</span>
</button>

Dostopno ime se sestavi po vrstnem redu ID-jev v atributu:

Brezžične slušalke črne Dodaj v košarico

Pomemben je vrstni red v aria-labelledby, ne nujno vrstni red elementov v DOM-u.

Vendar več referenc ne pomeni samodejno boljšega imena. Dostopno ime mora ostati kratko, jasno in razumljivo.

V zgornjem primeru bi bilo z vidika glasovnega upravljanja in predvidljivosti verjetno bolje, da se začne z vidnim besedilom gumba:

<button aria-labelledby="dejanje izdelek razlicica">
  <span id="dejanje">Dodaj v košarico</span>
</button>

Dostopno ime je tako:

Dodaj v košarico Brezžične slušalke črne

Vidna oznaka »Dodaj v košarico« ostane na začetku dostopnega imena.

Sklicevanje nase

Element je lahko ena od referenc v lastnem atributu aria-labelledby.

<button id="dodaj"
        aria-labelledby="dodaj ime-izdelka">
  Dodaj v košarico
</button>

<span id="ime-izdelka">
  Brezžične slušalke
</span>

Ime gumba postane:

Dodaj v košarico Brezžične slušalke

Takšne rešitve so uporabne, vendar jih moramo uporabljati premišljeno. Kompleksna imena se težje vzdržujejo in testirajo.

Kdaj uporabiti aria-label?

aria-label je uporaben, kadar element potrebuje dostopno ime, vendar ustreznega vidnega besedila ni in ni drugega elementa, na katerega bi se lahko smiselno sklicevali.

Najpogostejši primer je ikonski gumb.

<button type="button" aria-label="Zapri">
  <svg aria-hidden="true" focusable="false">
    ...
  </svg>
</button>

Gumb nima vidnega besedila, zato mu aria-label zagotovi dostopno ime:

Zapri

Dekorativna ikona je odstranjena iz dostopnostnega drevesa, saj uporabniku ni treba posebej sporočati, da je v gumbu grafika.

Toda tudi pri ikonskih gumbih se vprašajmo, ali bi vidna oznaka izboljšala razumljivost. Ikona, ki je oblikovalcu očitna, ni nujno razumljiva vsakemu uporabniku.

Poimenovanje orientirjev

aria-label je lahko uporaben tudi pri orientirjih brez vidnega naslova:

<nav aria-label="Drobtine">
  ...
</nav>

Ko je na strani več orientirjev iste vrste, naj jih imena razlikujejo:

<nav aria-label="Glavna navigacija">
  ...
</nav>

<nav aria-label="Navigacija v nogi">
  ...
</nav>

Če je na strani samo en element <nav> in je njegov namen iz konteksta jasen, dodatno ime pogosto ni potrebno.

Obrazčna polja brez vidne oznake

Tehnično lahko napišemo:

<input type="search" aria-label="Iskanje">

Toda aria-label ni nadomestilo za premišljeno oblikovanje.

Vidna oznaka pomaga tudi:

• uporabnikom z motnjami pozornosti;
• ljudem s kognitivnimi oviranostmi;
• uporabnikom povečave;
• uporabnikom, ki ne prepoznajo pomena ikone;
• ljudem, ki se prvič srečajo z vmesnikom.

Kadar je mogoče, je bolje zagotoviti pravo oznako:

<label for="iskanje">Iskanje</label>
<input id="iskanje" type="search">

Če oblikovanje zahteva kompaktnejši prikaz, lahko oznako vizualno prilagodimo, ne da bi jo samodejno odstranili.

Kdaj aria-label ne pomaga?

aria-label ni splošni način za prepisovanje besedila poljubnega elementa.

Njegov učinek je odvisen od semantike in vloge elementa. Nekatere vloge podpirajo ime iz avtorjevega atributa, nekatere dobijo ime iz vsebine, pri nekaterih pa je poimenovanje prepovedano.

Generični elementi

<div aria-label="Cena izdelka">
  129 €
</div>

Navaden <div> praviloma nima uporabniške vloge, zaradi katere bi njegovo dostopno ime uporabniku prineslo smiselno informacijo.

aria-label mu ne spremeni pomena. Še vedno je generični vsebnik.

Če želimo predstaviti ceno izdelka, potrebujemo ustrezno vsebinsko strukturo:

<p>
  <span>Cena:</span>
  <strong>129 €</strong>
</p>

ARIA ne sme nadomeščati običajnega besedila in semantičnega HTML-ja.

Statično besedilo

Tudi to ni zanesljiv način, kako uporabniku bralnika zaslona ponuditi drugačno besedilo:

<p aria-label="Posebna ponudba">
  Popust
</p>

Odstavek ni kontrolnik, ki bi ga uporabnik prepoznal po dostopnem imenu. Rezultat je lahko prezrt, nedosleden ali drugačen od pričakovanega.

Če mora uporabnik prebrati »Posebna ponudba«, naj bo ta informacija v dejanski vsebini strani.

<p>Posebna ponudba</p>

ARIA ni skrivni kanal za drugačno različico vsebine.

Skriti stroški atributa aria-label

aria-label je priročen, vendar prinaša stroške, ki jih pri pisanju kode zlahka spregledamo.

1. Vidna in dostopna oznaka se lahko razideta

<button aria-label="Prijava na e-novice 2019">
  Naroči se
</button>

Vidno besedilo se je skozi leta spremenilo, skriti atribut pa je ostal enak.

Ker ga večina članov ekipe ne vidi, napaka lahko dolgo ostane neopažena.

2. Besedilo v atributu se lahko izogne prevajanju

Prevajalski sistemi in uredniški postopki ne obravnavajo vedno besedila v atributih enako kot vidno vsebino.

Rezultat je lahko slovenska stran z dostopnimi imeni v drugem jeziku.

Vidno besedilo je praviloma lažje opaziti, prevesti, pregledati in vzdrževati.

3. Glasovno upravljanje lahko izgubi povezavo z vmesnikom

Če aria-label ne vsebuje vidne oznake, uporabnik ne more zanesljivo priklicati elementa z besedami, ki jih vidi na zaslonu.

Zato aria-label ne sme biti refleksna rešitev za »izboljševanje« že dobrega vidnega besedila.

4. Vsebina elementa se lahko skrije pred podpornimi tehnologijami

Pri elementih, ki dobijo ime iz svojih potomcev, lahko ime iz aria-label ali aria-labelledby nadomesti ime iz vsebine.

To je posebej pomembno pri kompleksnih gumbih in povezavah:

<button aria-label="Odpri">
  <span>Profil uporabnika</span>
  <span>Nastavitve in zasebnost</span>
</button>

Uporabnik podporne tehnologije lahko kot ime dobi samo:

Odpri

Čeprav vidni element vsebuje veliko več informacij.

Pred dodajanjem ARIA zato vedno preverimo, kaj bo z obstoječo vsebino.

Narobe in bolje

Vidno in dostopno ime se razhajata

Napačno:

<button aria-label="Zapri okno">
  Prekliči
</button>

Bolje:

<button>Prekliči</button>

Če naj gumb res pomeni zapiranje:

<button>Zapri okno</button>

Nepotreben aria-label

Napačno:

<button aria-label="Shrani">
  Shrani
</button>

Bolje:

<button>Shrani</button>

Obe različici imata lahko enako dostopno ime, vendar je druga krajša, preglednejša in lažja za vzdrževanje.

aria-label na generičnem vsebniku

Napačno:

<div aria-label="Cena izdelka">
  129 €
</div>

Bolje:

<p>
  Cena izdelka:
  <strong>129 €</strong>
</p>

Ikonski gumb brez imena

Napačno:

<button type="button">
  <svg>
    ...
  </svg>
</button>

Gumb morda nima uporabnega dostopnega imena.

Dobro:

<button type="button" aria-label="Zapri">
  <svg aria-hidden="true" focusable="false">
    ...
  </svg>
</button>

Alternativa z vizualno skritim besedilom:

<button type="button">
  <svg aria-hidden="true" focusable="false">
    ...
  </svg>

  <span class="visually-hidden">
    Zapri
  </span>
</button>

Ker gumb dobi ime iz vsebine, je njegovo dostopno ime:

Zapri

Povezava na obstoječi naslov

<h2 id="cenik-naslov">Cenik</h2>

<section aria-labelledby="cenik-naslov">
  ...
</section>

To je primer, kjer je aria-labelledby primernejši od podvajanja besedila:

<section aria-label="Cenik">
  ...
</section>

Obe različici lahko ustvarita isto ime, vendar prva uporablja že obstoječe vidno besedilo.

Poseben primer: »Preberi več«

Na strani je deset kartic s povezavo:

<a href="/clanek-1">Preberi več</a>

<a href="/clanek-2">Preberi več</a>

<a href="/clanek-3">Preberi več</a>

V kontekstu posamezne kartice je morda jasno, kam povezava vodi. V seznamu povezav bralnika zaslona pa uporabnik dobi deset enakih imen:

Preberi več
Preberi več
Preberi več

Refleksna rešitev je lahko:

<a href="/clanek-o-aria"
   aria-label="Odpri članek Dostopno ime v ARIA">
  Preberi več
</a>

Toda vidno besedilo »Preberi več« ni več del dostopnega imena. To lahko povzroči težave uporabnikom glasovnega upravljanja.

Boljša rešitev je, da vidno besedilo ostane del dostopnega imena:

<a href="/clanek-o-aria">
  Preberi več
  <span class="visually-hidden">
    o dostopnem imenu v ARIA
  </span>
</a>

Dostopno ime je:

Preberi več o dostopnem imenu v ARIA

Vidna oznaka »Preberi več« je ohranjena in povezava je razumljiva tudi zunaj neposrednega konteksta.

Še boljša rešitev je lahko opisno vidno besedilo:

<a href="/clanek-o-aria">
  Preberite članek o dostopnem imenu
</a>

Vidno in dostopno ime sta enaka, namen povezave pa je jasen vsem uporabnikom.

Najpogostejše napake

1. aria-label prepiše dobro vidno ime

<button aria-label="Potrditev naročila">
  Oddaj naročilo
</button>

Dostopno ime ne sledi več besedilu na zaslonu.

Najprej preverimo, ali vidno besedilo že dovolj dobro opisuje dejanje. Pogosto dodatni atribut ni potreben.

2. aria-labelledby kaže na napačen ali neobstoječ ID

<h2 id="nastavitve-naslov">Nastavitve</h2>

<section aria-labelledby="nastavitev-naslov">
  ...
</section>

V atributu manjka črka »e«. Referenca zato ne kaže na naslov.

Takšna napaka je v kodi težko opazna, saj ne spremeni vidnega prikaza. Dostopno ime pa je lahko manjkajoče ali izračunano iz drugega vira, kot smo pričakovali.

3. Dekorativna ikona prispeva neželeno besedilo

SVG lahko vsebuje svoj <title>, besedilo ali drugo semantiko:

<button>
  <svg>
    <title>Grafični simbol križca</title>
    ...
  </svg>
  Zapri
</button>

Odvisno od brskalnika, strukture in podporne tehnologije se lahko v ime ali izgovor vključijo dodatne informacije.

Če je ikona dekorativna in gumb že ima jasno besedilo, jo odstranimo iz dostopnostnega drevesa:

<button>
  <svg aria-hidden="true" focusable="false">
    ...
  </svg>
  Zapri
</button>

Kako testirati dostopno ime

Kode ne ocenjujmo samo vizualno.

1. Preverimo dostopnostno drevo

V razvojnih orodjih brskalnika poiščemo element in preverimo:

• njegovo vlogo;
• izračunano dostopno ime;
• vir dostopnega imena;
• morebitni dostopni opis;
• stanja in lastnosti.

Brskalnik lahko pokaže, ali ime prihaja iz:

• aria-labelledby;
• aria-label;
• elementa <label>;
• vsebine kontrolnika;
• atributa alt;
• drugega vira.

Ne preverjamo torej samo, ali atribut obstaja. Preverimo končni rezultat izračuna.

2. Preverimo seznam kontrolnikov

Z bralnikom zaslona odpremo seznam povezav, gumbov ali obrazčnih polj.

Pri NVDA lahko za seznam elementov uporabimo bližnjico:

NVDA + F7

Imena morajo biti razumljiva tudi takrat, ko jih slišimo brez okoliškega odstavka ali vizualne postavitve.

Posebej preverimo:

• povezave »Preberi več«;
• ikonske gumbe;
• več navigacijskih območij;
• ponavljajoče se gumbe v karticah;
• obrazčna polja brez vidnih oznak.

3. Poskusimo element priklicati po vidnem besedilu

Kadar je mogoče, testiramo tudi z glasovnim upravljanjem.

Vprašamo se:

Ali lahko uporabnik izgovori besede, ki jih vidi na zaslonu?

Če je na gumbu napis »Prekliči«, mora biti »Prekliči« tudi del njegovega dostopnega imena.

4. Preverimo spremembe jezika in vsebine

Ko se spremeni vidna oznaka, preverimo tudi:

• aria-label;
• elemente, na katere kaže aria-labelledby;
• vizualno skrito besedilo;
• prevode atributov;
• ponavljajoče se komponente.

Dostopno ime, ki je bilo pravilno ob prvi objavi, lahko po prenovi vsebine zastara.

Povezava z WCAG

Pravilno dostopno ime lahko pomaga pri izpolnjevanju več meril WCAG:

• 4.1.2 Ime, vloga, vrednost – raven A: uporabniške komponente morajo imeti programsko določljivo ime in vlogo. Podporna tehnologija mora razumeti, kateri kontrolnik je pred uporabnikom in čemu je namenjen.
• 2.5.3 Oznaka v imenu – raven A: kadar ima kontrolnik vidno besedilno oznako, mora dostopno ime vsebovati to besedilo. To je bistveno predvsem za ljudi, ki elemente upravljajo z glasovnimi ukazi.
• 2.4.4 Namen povezave v kontekstu – raven A: namen povezave mora biti mogoče določiti iz njenega besedila ali iz programsko določenega konteksta. Ponavljajoče se povezave »Preberi več« zato zahtevajo posebno pozornost.
• 1.1.1 Ne-besedilna vsebina – raven A: če je ne-besedilna vsebina kontrolnik, potrebuje besedilno alternativo oziroma ime, ki opisuje njen namen. To velja na primer za gumb, ki vsebuje samo ikono.

Atribut sam po sebi še ne zagotavlja skladnosti. aria-label je lahko prisoten in hkrati napačen, zastarel, nepreveden ali neusklajen z vidnim besedilom.

Pravilo za prakso

Preden napišemo aria-label, preverimo:

1. Ali element že ima dobro ime iz domorodnega HTML-ja?
2. Ali na strani že obstaja vidno besedilo, ki ga lahko uporabimo?
3. Ali bi bilo za uporabnike bolje dodati vidno oznako?
4. Ali bo dostopno ime vsebovalo besedilo, ki ga uporabnik vidi?
5. Ali smo končni rezultat preverili v dostopnostnem drevesu?

Priporočeni vrstni red razmišljanja je:

Najprej semantični HTML – spomnimo se tudi prvega pravila ARIA ( Pet pravil ARIA, ki jih večina prekrši ). Nato vidno besedilo. Nato aria-labelledby. aria-label šele takrat, ko primernejšega vira imena res ni.

Najpogosteje je najboljša rešitev tudi najkrajša:

<button>Shrani</button>

Ne:

<button aria-label="Shrani">
  Shrani
</button>

In zagotovo ne:

<button aria-label="Potrditev sprememb uporabniških nastavitev">
  Shrani
</button>

ARIA naj dostopno ime zagotovi tam, kjer ga HTML in vsebina ne moreta. Ne sme pa po nepotrebnem prepisati imena, ki ga uporabnik že vidi.