ARIA (Accessible Rich Internet Applications)

ARIA on W3C:n määrittely HTML-attribuuteille, jotka välittävät interaktiivisten verkkoelementtien roolin, tilan ja ominaisuudet apuvälineille.

Mikä on ARIA?

ARIA on lyhenne sanoista Accessible Rich Internet Applications. Se on joukko HTML-attribuutteja, jotka W3C on määritellyt. Attribuutit kertovat apuvälineteknologioille — kuten ruudunlukuohjelmille — mitä jokin interaktiivinen elementti tekee. ARIA toimii siltana mukautettujen verkkokomponenttien ja niiden työkalujen välillä, joita vammaiset ihmiset käyttävät joka päivä.^[1]

Miksi ARIA on olemassa?

Tavalliset HTML-elementit kuten <button> ja <input> sisältävät valmiiksi merkityksen. Selaimet välittävät sen ruudunlukuohjelmille automaattisesti. Mutta modernit verkkosivustot käyttävät mukautettuja elementtejä — pudotusvalikoita, modaali-ikkunoita, välilehtipaneeleja ja automaattisen täydennyksen kenttiä — joille ei ole natiivia HTML-vastinetta. Ilman lisämerkintöjä nämä komponentit ovat näkymättömiä apuvälineteknologioille. ARIA täyttää tämän aukon.

Organisaatioille, joilla on monimutkaisia verkkosovelluksia — kuten verkkopankkiportaaleja, vakuutuslaskureita tai viranomaislomakkeita — ARIA on välttämätön. Ilman sitä ruudunlukuohjelman käyttäjät eivät pysty tekemään asioita, jotka näkeviltä käyttäjiltä sujuvat sekunneissa.

Miten ARIA toimii?

ARIA käyttää kolmenlaisia attribuutteja:

Roolit — Kertovat apuvälineille, mikä elementti on. Esimerkiksi role="dialog" merkitsee ponnahdusikkunan modaaliksi. role="tabpanel" merkitsee sisältöruudun välilehtinäkymässä.
Ominaisuudet — Kuvaavat pysyviä piirteitä. aria-label antaa elementille saavutettavan nimen. aria-required merkitsee lomakekentän pakolliseksi.
Tilat — Kertovat, mitä tapahtuu juuri nyt. aria-expanded="true" tarkoittaa, että pudotusvalikko on auki. aria-checked="false" tarkoittaa, että valintaruutu on tyhjä. Tilat muuttuvat, kun käyttäjä toimii sivulla.

Nämä attribuutit syöttävät selaimen saavutettavuuspuuta — sivun taustalla olevaa karttaa, jota apuvälineet lukevat visuaalisen ulkoasun sijaan.^[2]

Mikä on ARIAn ensimmäinen sääntö?

W3C itse sanoo: jos natiivi HTML-elementti tekee jo saman asian, käytä sitä ARIA-attribuuttien lisäämisen sijaan.^[3] Oikea <button> on aina parempi kuin <div>, johon on lisätty role="button". Natiivi elementti tuo näppäimistötuen ja ruudunlukuohjelman tuen valmiina.

Väärin käytetty ARIA tekee enemmän haittaa kuin ARIAn puuttuminen kokonaan. Väärät roolit, puuttuvat lapsielementit tai vanhentuneet tila-arvot saavat ruudunlukuohjelman kertomaan virheellistä tietoa. IT-tiimien, jotka rakentavat mukautettuja komponentteja, pitäisi pitää ARIAa viimeisenä keinona — ei ensimmäisenä askeleena.

Miten ARIA liittyy WCAG-vaatimustenmukaisuuteen?

Useat WCAG-säännöt perustuvat suoraan oikeaan ARIA-käyttöön:

WCAG 4.1.2 Nimi, rooli, arvo (taso A) — Jokaisen interaktiivisen elementin pitää kertoa apuvälineille nimensä, roolinsa ja nykyinen tilansa. Mukautetut komponentit täyttävät tämän säännön ARIA-attribuuteilla.
WCAG 4.1.3 Tilaviestit (taso AA) — Tilapäivitykset — kuten "Lomakkeesi on lähetetty" — pitää kertoa ruudunlukuohjelmalle ilman kohdistuksen siirtämistä. ARIA-live-alueet (role="status", role="alert") tekevät tämän mahdolliseksi.

Laki- ja vaatimustenmukaisuustiimien kannalta tämä tarkoittaa, että ARIA-virheet eivät ole pelkkiä kehittäjäbugeja. Ne ovat WCAG-virheitä, jotka voivat näkyä auditointiraporteissa ja viranomaisten arvioinneissa.

Mitä ovat ARIA-live-alueet?

Live-alueet ratkaisevat yhden ongelman: miten kerrot ruudunlukuohjelmalle sisällöstä, joka muuttuu ilman sivun uudelleenlatausta? Ajattele saapuvaa chat-viestiä, ilmestyvää lomakevirhettä tai hakutuloksia, jotka päivittyvät kirjoittaessasi.

aria-live-attribuutti ja roolit kuten role="alert" ohjaavat ruudunlukuohjelmaa kertomaan nämä muutokset automaattisesti. Ilman live-alueita käyttäjät jäävät kokonaan paitsi tärkeistä päivityksistä.^[1]

Suurille verkkokauppa- tai pankkisivustoille, joissa on reaaliaikaisia ilmoituksia, live-alueet eivät ole valinnaisia — ne ovat olennainen osa saavutettavaa käyttökokemusta.

Mikä on ARIAn nykyinen versio?

WAI-ARIA 1.2 hyväksyttiin W3C-suositukseksi kesäkuussa 2023. Versio 1.3 on kehitteillä. Liittyviä resursseja ovat ARIA Authoring Practices Guide (APG), joka tarjoaa testattuja koodimalleja yleisille elementeille kuten valikoille, välilehdille ja ikkunoille.^[4]

Miten Askem auttaa?

Suurissa organisaatioissa, joissa on satoja sivuja ja mukautettuja komponentteja, manuaaliset ARIA-tarkistukset eivät ole käytännöllisiä. Automaattiset saavutettavuusskannerit antavat tiimeille kokonaiskuvan ARIA-ongelmista. Askemin kaltaiset työkalut skannaavat jokaisen sivun ja merkitsevät puuttuvat tai virheelliset attribuutit. Kun uusi ominaisuus julkaistaan rikkinäisellä aria-label-arvolla tai puuttuvalla role-attribuutilla, jatkuva seuranta havaitsee sen ja hälyttää tiimiä ennen kuin viranomaisten arviointi tai käyttäjäpalaute tuo ongelman esiin.

Lähteet

W3C — Accessible Rich Internet Applications (WAI-ARIA) 1.2: https://www.w3.org/TR/wai-aria-1.2/
W3C — Accessibility Tree: https://www.w3.org/TR/accname-1.2/
W3C — Using ARIA (First Rule): https://www.w3.org/TR/using-aria/#rule1
W3C — ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/