ARIA ominaisuudet määrittävät komponentin ominaisuuksia, joita ei ole tuettu HTML:ssä. Useimmat ARIA ominaisuudet ovat pysyviä, eivätkä ne muutu, kun ne on asetettu. Esimerkki ARIA ominaisuudesta on <button aria-haspopup="true">. Tämä ominaisuus laajentaa nappieleemntin toimintaa ja saa ruudunlukijan ilmoittamaan, että mikäli nappi aktivoidaan, avataan pop-up. Tällä sivulla listaan joitakin yleisimpiä ominaisuuksia, ja miten niitä käytetään.
Attibuutilla aria-describedby annetaan saavutettava kuvaus elementille. Tämä on samankaltainen attribuutin aria-labelledby kanssa siinä mieleessä, että myös tälle annetaan kuvauksen sisältävän elementin ID.
<label for="my-field">Kentän nimitieto</label><input type="text" id="my-field" aria-describedby="help-text" /><div id="help-text">Tämä on kentän ohjeteksti</div>
Attribuutin aria-required avulla voidaan kertoa avustaville teknologioille, että lomakkeen kenttä on pakollinen. Tällä attribuutilla ei ole muita toimintoja. Tätä attribuuttia voidaan käyttää tilanteessa, jossa ei haluta käyttää HTML:n tarjoamaa lomakevalidaatiota jostakin syystä, vaan halutaan käyttää esimerkiksi jotakin JavaScript-pohjaista validointia. Mikäli käytetään HTML:n validaatiota, ei tätä aria-attribuuttia tarvita, vaan käytetään normaalisti HTML:n required-attribuuttia.
Pyri aina välttämään elementtejä ilman visuaalista merkintää. Mutta jos elementti kuitenkin tarvitaan, muista käyttää ARIAa, jotta sille voidaan antaa helppokäyttöinen nimi.
Attribuutti aria-label on hyödyllinen tilanteissa, joissa visuaalisesti näkyvää nimitietoa ei ole tarjolla. Tämä attribuutti määrittää kyseisen elementin nimen. Aria-label ylikirjoittaa minkä tahansa natiivin nimitiedon, esimerkiksi HTML-elementin <label>. Hyvä käyttöesimerkki aria-labelille on napissa, jossa visuaalisena sisältönä on pelkkä kuva. Tällaisessa tilanteessa on myös hyvä pysähtyä miettimään onko tämä kuvaelementti riittävän selkeä yksinään näkevälle käyttäjälle. Mikäli ei, voi käyttää esimerkiksi HTML:n attribuuttia title.
Aria-labelia ei tule käyttää kaikkialla. Esimerkiksi avustavaa teknologiaa käyttävä henkilö ei tarvitse tietoa, että elementti on alatunniste, eli niin sanottu footer. Footer tulisi määrittää käyttämällä HTML-elementtiä <footer>.
Tapaus 1: Nappi, jonka visuaalisena sisältönä no kuva. Jotta avustavaa teknologiaa käyttävä voi ymmärtää mitä elementissä on, tarjoa tieto aria-labelilla.
<button aria-label="Sulje ikkuna"><img src="/kuvan/polku/" /></button>
Tapaus 2: Lomakekenttä ilman näkyvää nimitietoa. Tarjoa avustavaa teknologiaa käyttäville nimitieto. Paras käytäntö on tarjota aina lomakkeiden kentille näkyvä nimitieto. Näin voidaan varmistaa, että kaikki käyttäjät ymmärtävät kentän toiminnallisuuden. Älä missään tapauksessa käytä placeholder-attribuuttia toimimaan nimitietona, sillä placeholder ei ole hyväksyttävä nimitieto.
<input aria-label="Hae sisältöä" />
Attribuutilla aria-labelledby annetaan HTML elementti, jolla on tämän elementin nimitieto. Nimitietona käytettävä elementti voi olla visuaalisesti piilotettu, mutta yleensä tällaiset elementit kannattaa pitää näkyvissä myös näkeviä käyttäjiä ajatellen. Tälle attribuutille annetaan nimitiedon sisältävän elementin ID.
Jos elementti on vanhemman elementin sisällä DOM:ssa, älä käytä tämäntyyppistä ARIAa. Mutta jos et voi päätellä suhdetta DOM:sta, käytä ARIAa. ARIAn käyttö auttaa avustavia teknologioita ymmärtämään elementtien väliset suhteet.
Kun yksi elementti ohjaa toisen elementin käyttäytymistä, valitse aria-controls. Kun elementti omistaa toisen elementin, käytä aria-owns.
Aria-controls -attribuutti kertoo, että elementti ohjaa toista elementtiä. Tyypillinen käyttötapa on, kun yksi elementti ohjaa toisen elementin käyttäytymistä tai tilaa. Esimerkki käyttötapauksesta ovat harmonikat tai välilehdet.
<button aria-controls=”tabContent”>Välilehti</button><div id=”tabContent” role=”tabpanel”>Välilehden sisältö</div>
Aria-owns kertoo, että elementtiä tulisi käsitellä nykyisen elementin lapsena. Elementillä voi olla yksi omistaja.
Esimerkki käyttötapauksesta voisi olla pudotusvalikko, kuten pop-up alivalikko. Usein toisessa elementissä on dynaamisesti tuotettua sisältöä, kuten dialogi tai valikko.
<button id=”dropdownButton” aria-haspopup=”true” aria-owns=”dropdownMenu”>Valikko</button> <div id=”dropdownMenu” role=”menu”>Valikon sisältö</div>