ARIA
Katso myös: WAI-ARIA, Accessible Rich Internet Applications
Accessible Rich Internet Applications — W3C-spesifikaatio, joka määrittelee roolit, tilat ja ominaisuudet mukautettujen käyttöliittymäelementtien saavutettavaksi tekemiseksi avustavalle teknologialle.
WAI-ARIA — Accessible Rich Internet Applications — on W3C-spesifikaatio, joka täyttää tietyn aukon: kun natiiviHTML-elementit eivät riitä kuvaamaan mukautettua käyttöliittymäelementtiä, ARIA tarjoaa roolien, tilojen ja ominaisuuksien sanaston, jonka avustavat teknologiat (erityisesti ruudunlukuohjelmat) ymmärtävät.
Mitä ARIA on ja ei ole
ARIA on kerros HTML:n päälle. Se ei lisää käyttäytymistä. role="button" lisääminen <div>-elementtiin saa ruudunlukuohjelman ilmoittamaan sen painikkeena, mutta ei tee <div>-elementistä kohdistettavaa, ei lisää näppäimistönkäsittelyä eikä visuaalista tyyliä. Kaikki nämä on lisättävä itse.
Tästä johtuvat useimmat tuotannossa esiintyvät ARIA-virheet: kehittäjät lisäävät roolin ja pysähtyvät siihen, toimittavat sitten “painikkeen”, joka ei reagoi Enter- tai välilyöntinäppäimeen, johon ei pääse tabulaattorilla eikä jossa ole kohdistuksen osoitinta.
ARIA:n ensimmäinen sääntö
Jos voit käyttää natiivi-HTML-elementtiä, jolla on tarvitsemasi semantiikka ja käyttäytyminen, käytä sitä.
Jokainen kirjoittamasi ARIA-rivi on rivi HTML-semantiikkaa, jonka olet päättänyt toteuttaa itse. <button> ilmoitetaan jo painikkeena, se on kohdistettava, reagoi Enter- ja välilyöntinäppäimeen ja siinä on kohdistusrengas — ilmaiseksi. <div role="button" tabindex="0"> mukautetuilla näppäimistökäsittelijöillä päätyy samaan paikkaan, hauraasti ja enemmällä koodilla.
Pääluokat
ARIA määrittelee kolme attribuuttityyppiä:
- Roolit — mitä elementti on (
role="button",role="dialog",role="navigation",role="alert"). Täydellinen rooliluettelo sisältää yli 80 merkintää; WAI:n ARIA Authoring Practices Guide ryhmittelee ne kiintopisterooleiksi, widget-rooleiksi ja dokumenttirakenteen rooleiksi. - Tilat — mikä on elementin nykyinen tila (
aria-expanded="true",aria-checked="false",aria-disabled="true"). Tilat muuttuvat ajon aikana. - Ominaisuudet — mitkä ovat elementin suhteet (
aria-labelledby="title-id",aria-describedby="help-id",aria-controls="menu-id"). Ominaisuudet ovat yleensä staattisia.
ARIA:n kolme jäljellä olevaa sääntöä
W3C:n viisisääntöinen järjestys “käytä natiivi-HTML:ää mahdollisuuksien mukaan” -periaatteen jälkeen:
- Älä muuta natiiveja semantiikkoja, ellei se ole todella välttämätöntä. (
<h1 role="button">hämmentää ruudunlukuohjelmia siitä, onko kyseessä otsikko vai painike.) - Kaikkien interaktiivisten ARIA-elementtien on oltava käytettävissä näppäimistöllä.
- Älä käytä
role="presentation"taiaria-hidden="true"kohdistettavassa elementissä. - Kaikilla interaktiivisilla elementeillä on oltava saavutettava nimi.
Näiden viiden säännön noudattaminen poistaa yli 80 % ARIA-virheistä.
Mistä löytää lisätietoa
Hyödyllisin käytännön viite on ARIA Authoring Practices Guide (APG), joka tarjoaa päästä päähän -toteutusmallit yleisille widgeteille — yhdistelmäruudut, dialogit, puunäkymät, välilehdet — mukaan lukien näppäimistövuorovaikutustaulukot ja DOM-esimerkit.