Mikä on ARIA? Roolit, maamerkit ja live-alueet

Mitä ARIA on — ja mitä se ei ole

ARIA tulee sanoista Accessible Rich Internet Applications. Se on W3C:n Web Accessibility Initiative -aloitteen (WAI) määrittelemä attribuuttijoukko, jonka avulla kehittäjät voivat välittää käyttöliittymäelementtien merkityksen ja tilan avustaville teknologioille, kuten ruudunlukijoille.

Tärkein ARIA:a koskeva sääntö on myös se, joka useimmin sivuutetaan: älä käytä ARIA:a, kun natiivi HTML hoitaa asian. <button>-elementti ilmoittaa jo itsestään painikkeena ja reagoi näppäimistötapahtumiin. <nav>-elementti välittää jo navigointimaamerkin ruudunlukijoille. Attribuutin role="button" lisääminen <div>-elementtiin ja sen käyttäytymisen skriptaaminen on vaikeampi ylläpitää, helpompi rikkoa ja yleensä saavutettavuuden kannalta huonompi kuin oikean elementin käyttäminen alun perin.

ARIA ei:

• Tee sisällöstä näkyvää tai vuorovaikutteista — se muuttaa vain sitä, mitä avustava teknologia ilmoittaa
• Korjaa rikkinäistä näppäimistökäyttöä — tarvitset silti tabindex-attribuutin ja tapahtumakuuntelijat
• Korvaa hyvin jäsenneltyä semanttista HTML:ää

ARIA auttaa aidosti silloin, kun natiivissa HTML:ssä ei ole elementtiä sille mitä rakennat: päivämäärävalitsin, elävä ilmoitusbanneri, mukautettu yhdistelmäruutu, puunäkymä. Näissä tapauksissa ARIA antaa sinun välittää semantiikan, jota HTML ei pysty.

ARIA-roolit

Rooli kertoo avustavalle teknologialle, millaisen elementin kanssa se on tekemisissä. Jokaisella vuorovaikutteisella elementillä on implisiittinen rooli, joka johdetaan sen HTML-tagista. <a>-elementillä on rooli link. <input type="checkbox"> -elementillä on rooli checkbox. <h2>-elementillä on rooli heading.

Kun rakennat mukautetun elementin, jolle ei ole HTML-vastinetta, määrität sille eksplisiittisen roolin:

<!-- Div-elementistä rakennettu mukautettu kytkin -->
<div
  role="switch"
  aria-checked="false"
  tabindex="0"
>
  Tumma tila
</div>

Ruudunlukija ilmoittaa tämän nyt kytkinsäätimenä ja lukee sen valintatilan. Ilman roolia se ilmoitettaisiin pelkkänä tekstinä, eikä käyttäjällä olisi aavistustakaan siitä, että se on vuorovaikutteinen.

Yleiset roolit ja milloin niitä käytetään

Vimpainroolit kuvaavat vuorovaikutteisia säätimiä:

Rooli	Käytä kun
button	Mukautettu napsautettava elementti, jolle ei ole parempaa HTML-tagia
checkbox	Mukautettu monivalintakytkin
combobox	Tekstikenttä yhdistettynä listalaatikon pudotusvalikkoon
dialog	Modaali peiteikkuna (vain kun natiivia <dialog>-elementtiä ei käytetä)
listbox	Mukautettu pudotuslista
slider	Mukautettu liukusäädin
switch	Päälle/pois-kytkin
tab, tablist, tabpanel	Välilehtikäyttöliittymä
tooltip	Lyhyt kuvaus, joka näytetään osoitettaessa tai kohdistettaessa

Dokumenttirakenteen roolit kuvaavat ei-vuorovaikutteista sisältöä:

• article — itsenäinen sisältökokonaisuus
• figure — kuva ja siihen liittyvä kuvateksti
• list, listitem — kun listasemantiikkaa tarvitaan elementeille jotka eivät ole listoja
• presentation / none — poistaa elementin implisiittisen roolin (käytä harvoin ja harkiten)

Kriittinen virhe: roolien lisääminen ilman käyttäytymistä

Jokainen rooli kantaa mukanaan sopimuksen, jonka noudattamista ruudunlukijat ja näppäimistön käyttäjät odottavat. role="button" -elementin on reagoitava sekä Enteriin että välilyöntiin. role="checkbox" -elementin on vaihdettava tilaa välilyönnillä. role="link" -elementin on siirryttävä linkkiin Enterillä.

Jos lisäät roolin mutta et vastaavaa käyttäytymistä, johdat avustavan teknologian käyttäjiä aktiivisesti harhaan. He kuulevat säätimen ilmoitettavan, yrittävät käyttää sitä odotetulla näppäinkomennolla, eikä mitään tapahdu. Tämä on huonompi lopputulos kuin se, ettei ARIA:a olisi lainkaan.

ARIA-maamerkit

Maamerkit ovat sivun navigoinnin luuranko. Ne antavat ruudunlukijan käyttäjille mahdollisuuden hypätä keskeisten alueiden välillä lukematta kaikkea niiden välissä olevaa — vastine sille, että näkevä käyttäjä silmäilee sivun asettelun yhdellä katseella.

HTML5 toi mukanaan semanttisia elementtejä, jotka vastaavat suoraan maamerkkirooleja. Käytä niitä, niin saat maamerkit ilmaiseksi:

HTML-elementti	Maamerkkirooli	Tarkoitus
<header>	banner	Sivustonlaajuinen ylätunniste (vain kun se on ylimmän tason ylätunniste, ei <article>-elementin sisällä)
<nav>	navigation	Navigointivalikko
<main>	main	Sivun pääsisältö
<aside>	complementary	Pääsisältöön liittyvä toissijainen sisältö
<footer>	contentinfo	Sivustonlaajuinen alatunniste
<form>	form	Lomake (vain kun sillä on saavutettava nimi)
<section>	region	Nimetty osio (vain kun sillä on saavutettava nimi aria-label- tai aria-labelledby-attribuutin kautta)

Sinun ei tarvitse lisätä role="main" -attribuuttia <main>-elementtiin — se on turha. ARIA-maamerkkirooleja tarvitaan vain silloin, kun semanttista HTML-elementtiä ei voi käyttää, esimerkiksi vanhassa koodikannassa joka tuottaa merkinnän <div class="sidebar">:

<div class="sidebar" role="complementary" aria-label="Aiheeseen liittyvät artikkelit">
  <!-- sivupalkin sisältö -->
</div>

Maamerkkien nimeäminen, kun niitä on useampi kuin yksi

Kun sivulla on useita saman maamerkin esiintymiä — kaksi <nav>-elementtiä tai kaksi role="region" -attribuutin sisältävää <section>-elementtiä — jokaisella on oltava yksilöllinen saavutettava nimi, jotta käyttäjät voivat erottaa ne toisistaan:

<nav aria-label="Päänavigointi">...</nav>
<nav aria-label="Alatunnisteen navigointi">...</nav>

Ilman nimiä ruudunlukija ilmoittaa molemmat vain sanalla “navigointi”. Nimien kanssa käyttäjät kuulevat “Päänavigointi, navigointimaamerkki” ja “Alatunnisteen navigointi, navigointimaamerkki” ja voivat valita oikean maamerkkiluettelosta.

ARIA live -alueet

Live-alue on sivun alue, jonka sisältö päivittyy dynaamisesti ja jonka päivitykset tulisi ilmoittaa ruudunlukijan käyttäjille automaattisesti ilman että heidän tarvitsee siirtää kohdistusta.

Keskeinen attribuutti on aria-live. Se hyväksyy kolme arvoa:

• off — päivityksiä ei ilmoiteta (oletus kaikille elementeille)
• polite — päivitykset ilmoitetaan sen jälkeen, kun käyttäjä on saanut nykyisen tehtävänsä päätökseen
• assertive — päivitykset keskeyttävät välittömästi sen, mitä ruudunlukija on sanomassa

<!-- Tilaviestialue, joka täytetään lomakkeen lähettämisen jälkeen -->
<div aria-live="polite" id="status-message"></div>

<script>
  document.getElementById('status-message').textContent =
    'Viestisi on lähetetty.';
</script>

Kun tekstisisältö muuttuu, aria-live="polite" -attribuutin havaitseva ruudunlukija odottaa taukoa puheessa ja ilmoittaa sitten uuden sisällön. Käytä arvoa polite valtaosaan dynaamisista päivityksistä. Varaa assertive vain kriittisiin virhetilanteisiin — maksuvirhe, istunnon aikakatkaisuvaroitus — joissa tieto on riittävän kiireellinen oikeuttaakseen käyttäjän keskeyttämisen.

Roolioikotiet live-alueille

Kaksi roolia niputtaa aria-live-semantiikan yhteen attribuuttiin:

• role="status" — vastaa arvoa aria-live="polite". Käytä onnistumisviesteihin, latautumistiloihin ja ei-kiireellisiin päivityksiin.
• role="alert" — vastaa arvoa aria-live="assertive" ja sisältää lisäksi aria-atomic="true" -merkityksen. Käytä virheilmoituksiin ja kriittisiin virhetilanteisiin.

<!-- Virhe ilmoitetaan välittömästi, nykyisen puheen keskeyttäen -->
<div role="alert" id="payment-error"></div>

<!-- Tilapäivitys ilmoitetaan kohteliaasti nykyisen puheen jälkeen -->
<div role="status" id="cart-count">3 tuotetta ostoskorissa</div>

Yleisiä live-alueiden virheitä

Sisällön lisääminen ennen kuin elementti on DOM:ssa. Selain rekisteröi live-alueen silloin, kun elementti jäsennetään ensimmäisen kerran. Jos lisäät elementin ja asetat sen tekstisisällön samanaikaisesti, jotkin ruudunlukijat jättävät ilmoituksen kokonaan huomiotta. Sisällytä live-alueen säiliö aina alkuperäiseen HTML:ään ja päivitä sen sisältö JavaScriptillä vasta myöhemmin.

Arvon assertive käyttäminen kaikkeen. Assertiiviset live-alueet keskeyttävät kaiken mitä käyttäjä on tekemässä, myös muut ilmoitukset. Hakutulosten lukumäärä, joka päivittyy käyttäjän kirjoittaessa, ei ansaitse role="alert" -attribuuttia. Arvon assertive liikakäyttö tuottaa vihamielisen kokemuksen ruudunlukijan käyttäjille.

Live-alueen päivittäminen liian usein. Jos edistymisilmaisin päivittää live-aluettaan 100 millisekunnin välein, puhejono tulvii yli eivätkä käyttäjät kuule mitään hyödyllistä. Päivitä live-tekstiä vain merkityksellisissä virstanpylväissä — 25 %, 50 %, 75 %, valmis — tai vaimenna päivitykset ajastimella.

aria-atomic-attribuutin unohtaminen. Oletuksena live-alueen sisällä ilmoitetaan vain muuttunut tekstisolmu. Jos haluat koko alueen luettavan uudelleen (eikä vain muuttunutta katkelmaa), lisää aria-atomic="true":

<div aria-live="polite" aria-atomic="true">
  <span id="count">2</span> kohdetta jäljellä
</div>

Ilman aria-atomic-attribuuttia ruudunlukija saattaa ilmoittaa vain “2”, kun laskuri muuttuu kolmesta kahteen. Attribuutin kanssa luetaan koko ilmaus “2 kohdetta jäljellä”, mikä on lähes aina haluttu lopputulos.

Muita keskeisiä ARIA-attribuutteja

aria-label — antaa saavutettavan nimen silloin, kun näkyvä teksti ei ole tarkoituksenmukainen:

<button aria-label="Sulje valintaikkuna">✕</button>

aria-labelledby — osoittaa toiseen elementtiin, jonka teksti toimii saavutettavana nimenä. Suositeltavampi kuin aria-label silloin, kun nimilapputeksti on jo näkyvissä sivulla:

<h2 id="billing-heading">Laskutusosoite</h2>
<form aria-labelledby="billing-heading">...</form>

aria-describedby — osoittaa täydentävään tekstiin, joka kuvaa elementtiä sen nimeä laajemmin:

<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Vähintään 12 merkkiä ja vähintään yksi erikoismerkki.</p>

aria-expanded — kertoo, onko laajennettava elementti (pudotusvalikko, haitari, valikko) auki vai kiinni. Päivitä se JavaScriptissä aina tilan muuttuessa:

<button aria-expanded="false" aria-controls="nav-menu">Valikko</button>
<ul id="nav-menu" hidden>...</ul>

aria-hidden="true" — poistaa elementin saavutettavuuspuusta. Käytä koristeellisiin kuvakkeisiin, toistuvaan tekstiin tai visuaalisiin elementteihin, jotka olisivat ruudunlukijan käyttäjille pelkkää kohinaa:

<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 tähteä viidestä</span>

aria-disabled="true" — merkitsee säätimen poissa käytöstä olevaksi poistamatta sitä kohdistusjärjestyksestä. Hyödyllinen silloin, kun haluat käyttäjien huomaavan säätimen olemassaolon ja ymmärtävän miksi se ei ole käytettävissä, sen sijaan että se ohitettaisiin huomaamatta:

<button aria-disabled="true">Lähetä (täytä ensin kaikki kentät)</button>

ARIA:n testaaminen käytännössä

ARIA-attribuuttien kirjoittaminen on suoraviivaista. Niiden saaminen oikein vaatii testausta. Automaattiset skannerit havaitsevat selvästi rikkinäiset mallit — role="button" ilman saavutettavaa nimeä, aria-labelledby joka viittaa olemattomaan ID-tunnisteeseen, live-alue jonka aria-live-arvo on virheellinen. Ne eivät voi kertoa, onko ilmoitettu teksti kontekstissaan mielekäs tai käyttäytyykö monimutkainen mukautettu vimpain oikein, kun sitä navigoidaan pelkällä näppäimistöllä.

Käytännön testauksessa yhdistä vähintään kaksi ruudunlukijan ja selaimen paria:

• NVDA + Chrome Windowsissa — ilmainen, laajasti käytetty, lähellä todellista ruudunlukijoiden käyttäjäkuntaa
• VoiceOver + Safari macOS:ssä tai iOS:ssä — sisäänrakennettu, välttämätön mobiilisaavutettavuuden testaukseen
• JAWS + Chrome tai Edge Windowsissa — maksullinen, mutta yritysympäristöissä laajimmin käytetty ruudunlukija

Navigoi vuorovaikutteisia komponenttejasi pelkällä näppäimistöllä. Kuuntele tarkasti, mitä ilmoitetaan kun avaat valikon, lähetät lomakkeen jossa on validointivirhe tai laukaiset live-alueen päivityksen. Jos ilmoitus on epäselvä tai harhaanjohtava, ARIA-toteutus on väärä — riippumatta siitä, mitä mikään automaattinen työkalu raportoi.

Sääntö, joka kattaa kaiken

ARIA:n määrittely sisältää viisi kirjoittamista koskevaa sääntöä. Ensimmäinen on tärkein:

Jos voit käyttää natiivia HTML-elementtiä tai -attribuuttia, jossa tarvitsemasi semantiikka ja käyttäytyminen ovat jo valmiiksi sisäänrakennettuina, sen sijaan että ottaisit elementin toiseen käyttöön ja lisäisit siihen ARIA-roolin, -tilan tai -ominaisuuden tehdäksesi siitä saavutettavan, tee niin.

Rakenna semanttisella HTML:llä. Tartu ARIA:an vasta kun HTML loppuu kesken. Testaa oikealla ruudunlukijalla. Tämä kattaa lähes jokaisen tilanteen, johon tulet törmäämään.

Jos haluat käytännön tarkistuksen siitä, miten ARIA-attribuutit on toteutettu sivustollasi, manuaaliset saavutettavuusauditointimme sisältävät ruudunlukijatestauksen, jonka tekevät ihmiset jotka käyttävät avustavaa teknologiaa joka päivä ja jotka huomaavat hienovaraiset ARIA-ongelmat joita automaattiset työkalut eivät havaitse.