ARIA (Accessible Rich Internet Applications)

 

Mikä se on?

ARIA on WAI:n luoma tekninen eritelmä, ja WAI on W3C:n aloite. ARIA 1.1 on nykyinen versio mutta ARIA 2.0 ilmestyy lähitulevaisuudessa.

Rich web-sovellukset (aiemmin tunnettu nimellä “rich Internet applications”) ovat verkkosivustoja, joilla on monimutkaisia ​​ominaisuuksia, jotka aiemmin olivat mahdollisia vain työpöytäsovelluksissa. ARIA on suunniteltu täydentämään HTML:ää tarjoamalla lisäominaisuuksia, jotka helpottavat ja parantavat Rich Web -sovellusten saavutettavuutta.

Monet tekniikat, joita voidaan käyttää WCAG:n onnistumiskriteerien täyttämiseen, perustuvat ARIA:an. Sinun on kuitenkin käytettävä ARIA:a vastuullisesti, koska sen väärinkäyttö on vahingollisempaa vammaisille kuin sen käyttämättä jättäminen.

Muista aina: ARIA:n käyttämättä jättäminen on parempi asia kuin huonon ARIA:n käyttäminen.

ARIA-määritteitä, joita voidaan lisätä HTML-koodiin, on kolmen tyyppisiä:

  • Roolit määrittelevät komponentin tarkoituksen käyttöliittymässä.
  • Ominaisuudet määrittelevät komponentin ominaisuuksia.
  • Tila määrittelee komponentin nykyisen tilan.

Jatka lukemista saadaksesi lisätietoja näistä!

ARIA roolit

ARIA -roolit välittävät komponentin tarkoituksen käyttöliittymässä; esim. role="radiogroup" määrittää joukon radiopainikkeita.

Rooleja on yhteensä 82, jaettuna kuuteen kategoriaan:

  1. Abstraktit roolit: älä huoli näistä liikaa, et koskaan käytä niitä suoraan. Ne ovat olemassa käsitteellisenä perustana muille rooleille.
  2. Maamerkkiroolit: nämä rajaavat sivun tärkeimmät alueet, jotka ovat navigointikohteita. Näitä ovat päänavigaatio, hakukentät, alatunnisteet jne.
  3. Tiedostorakenteen roolit: nämä kertovat meille sivun erityyppisestä sisällöstä ja siitä, kuinka ne on järjestetty. Näitä ovat otsikot, taulukot, kuvat, artikkelit jne.
  4. Vimpain-roolit: nämä ovat interaktiivisia elementtejä, joita käyttäjä voi jollain tavalla hallita. Näitä ovat painikkeet, vierityspalkit, välilehdet jne.
  5. Live-alueen roolit: nämä ovat sivun osia, jotka muuttavat sisältöä, kun painopiste on muualla. Ne voivat muuttua vastauksena käyttäjän suorittamiin toimiin tai johonkin ulkoiseen tapahtumaan. Näitä ovat esim. hälytykset ja ajastimet.
  6. Ikkunaroolit: nämä ovat ikkunoita selaimessa tai sovelluksessa. Näitä ovat esim.  valintaikkunat ja hälytysikkunat.

ARIA ominaisuudet ja tilat

ARIA ominaisuuksia on 27 kappaletta, jotka määrittelevät komponentin ominaisuuksia. Esimerkiksi aria-required="true" voi kertoa, että kohteen valinta radioryhmästä vaaditaan ennen lomakkeen lähettämistä.

There are 9 ARIA tiloja on 9 kappaletta, jotka määrittelevät komponentin nykyistä tilaa. Esimerkiksiaria-checked="true" voi kertoa, että jokin tietty radiopainike on valittuna.

Kaikilla ARIA ominaisuuksilla ja tiloilla on etuliite aria-*ja niihin voidaan yhteisesti viitata “aria-* -attribuutteina”.

Jotkut aria-* attribuutit ovat globaaleja; niitä voidaan soveltaa elementteihin, joissa on mikä tahansa ARIA-rooli, tai elementteihin, joissa ei ole ARIA-roolia. Näitä ovat yleisesti käytetty aria-hidden (joka piilottaa elementin avustavilta teknologioilta) ja aria-label (joka tarjoaa elementille saavutettavan etiketin).

Muita aria-* attribuutteja voidaan vain soveltaa elementteihin, joilla on tietyt ARIA-roolit. Esimerkiksi aria-checked voidaan käyttää esim. role="radio" :n kanssa mutta ei role="navigation":nkanssa

ARIA ja semanttinen HTML

Kuten keskustelimme semanttisessa HTML-sivullamme, useimmilla HTML-elementeillä on tietty natiivi semantiikka, joista monet vastaavat ARIA-attribuutteja (roolit, ominaisuudet ja tilat).

Kun käytät HTML-semanttisia elementtejä, älä koskaan lisää ARIA-attribuutteja, jotka jo sisältyvät elementtiin. Esimerkiksi:

  • <button> -elementillä on jo selkeä role="button".
  • Valittu radiopainike, jossachecked HTML-attribuutilla on jo selkeäaria-checked="true".

Lisäksi, älä koskaan lisää ARIA-attribuutteja, jotka ovat ristiriidassa kyseisen elementin alkuperäisen semantiikan kanssa. Esimerkiksi:

  • <button> -elementillä ei voi olla rooliarole="heading"; painike on jotain, jonka aktivoit toiminnon suorittamiseksi, ei jotain, joka antaa sinulle tietoja sivun rakenteesta.
  • Radiopainikkeella ei voi ollaaria-checked="mixed"; radiopainikkeilla voi ainoastaan olla arvot true ja false. Valintaruudut puolestaan ​​tukevat kolmatta, mixed -tilaa.

Käytä aina semanttisia elementtejä, jos mahdollista, monesta syystä: 

  • Alkuperäisellä semantiikalla on parempi tuki, etenkin kun kyse on kansainvälistymisestä. Esimerkiksi, jos käytät ruudunlukijaa suomeksi, <nav>-elementti ilmoitetaan yleensä oikein nimellä “navigointi” (suomenkielinen sana, aksentti), mutta <div role="navigation"> ilmoitetaan usein väärin “navigation” (englanninkielinen sana, suomenkielinen aksentti).
  • Interaktiivisissa elementeissä on sisäänrakennettu toiminnallisuus, jonka selain on toteuttanut. Esimerkiksi <button> -elementti toimii sekä hiiren (tai hiiren kaltaisella laitteella) että näppäimistön (tai näppäimistön kaltaisella laitteella) kanssa. Lisäämällä role="button"ei automaattisesti tee sitä käyttäytymään kuin todellinen painike.

Joten käytä ARIA:a vastuullisesti. Ja on hyvä muistaa: ARIA:n käyttämättä jättäminen on parempi asia kuin huonon ARIA:n käyttäminen. 

ARIA maamerkit

ARIA-maamerkkiroolit vastaavat sivun alueita, joita pidetään navigoinnin kannalta merkittävinä. Niitä on kahdeksan:

  • Banner (enintään yksi per sivu): sisältää enimmäkseen yleistä tietoa sivustosta, ei niinkään yhden yksittäisen sivun tietoa.
  • Navigation (ei rajoituksia): sisältää enimmäkseen linkkejä sivulla tai sivustolla liikkumiseen.
  • Main (enintään yksi per sivu): sisältää sivuston pääsisällön.
  • Complementary (ei rajoituksia): sisältää tietoja, jotka täydentävät pääaluetta, mutta joita voidaan silti pitää erillisenä kokonaisuutena.
  • Content info (enintään yksi per sivu): sisältää tietoa sivustosta tai sivusta.
  • Form (ei rajoituksia): sisältää yhden tai useamman lomakkeen muodostavan elementin (mutta ei hakulomaketta).
  • Search (ei rajoituksia): sisältää yhden tai useamman elementin, joka toimii hakuna.
  • Region (ei rajoituksia): sisältöosioille, jotka ovat riittävän suuria ja tärkeitä, jotta niitä voidaan pitää tärkeänä maamerkkinä, mutta jotka eivät sovellu mihinkään muuhun maamerkkirooliin.

Tietyillä HTML5:ään sisällytetyillä elementeillä on nämä ARIA-roolit osana implisiittistä semantiikkaansa. Esimerkiksi <main> HTML-elementissä on implisiittinen role="main", eikä meidän pitäisi lisätä sitä nimenomaisesti koodiin. Tässä ovat niiden keskinäiset suhteet:

  • <header>: implisiittinen banner rooli.
  • <nav>: implisiittinen navigation rooli.
  • <main>: implisiittinen main rooli.
  • <aside>: implisiittinen complementary rooli.
  • <footer>: implisiittinen contentinfo rooli.
  • <form>: implisiittinen form rooli.
  • Mikään HTML-elementti ei sisällä implisiittistä search-roolia. Useimmissa tapauksissa käytämme lomake-elementtiä ja annamme sille nimenomaisenrole="search"-roolin.
  • <section>: implisiittinenregion rooli.

Kaikki sivun sisällöt tulisi sijaita ARIA-maamerkien sisällä: Joillakin apuvälineillä (kuten ruudunlukijoilla) on pikavalinnat tiettyihin maamerkkeihin tai nykyisen maamerkin alkuun tai loppuun siirtymiseen. Sisällöt, jotka eivät sijaitse maamerkkien sisällä, voivat jäädä näiltä käyttäjiltä huomaamatta.

Jotkut maamerkit ovat vain ylimmän tason maamerkkejä: <header>, <main>, <aside> ja <footer>eivät voi olla muiden maamerkkialueiden sisällä. Muille sallitaan sisäkkäin upottamisen tarvittaessa, mutta sitä ei vaadita. Esimerkiksi <nav> -elementti voi olla ylimmällä tasolla tai olla toisen maamerkin (kuten <header>) sisällä.

Vain joitain maamerkkejä voi esiintyä sivulla useita kertoja (katso aikaisempi luettelo): jos samantyyppisiä maamerkkejä on useita, ne on erotettava käyttämällä aria-label tai aria-labelledby. Sinulla voi olla esimerkiksi ensisijainen navigaatiopalkki (joka on aria-label="primary") sivun yläosassa ja toissijainen navigaatioelementti (joka on aria-label="secondary") alatunnisteen sisällä.

Tutustu myös:

Yleinen ARIA:

ARIA attribuutit:

ARIA ja HTML: