ARIA roolit

ARIA rooleja on kuutta kategoriaa:

• Maamerkit
• Tiedostorakenteen roolit
• Vimpain-roolit
• Ikkunaroolit
• Live-alueen roolit
• Abstraktit roolit

Maamerkkiroolit

Maamerkkirooleja on seuraavia:

• Banner. Tämä sisältää tyypillisesti verkkosivuston nimen, logon, hakuelementin ja/tai päänavigaation. Tämä vastaa semanttisesti HTML-elementtiä <header>.
• Complementary. Tämä sisältää sivun sisältöä, kuten sivupalkissa näytettävää sisältöä. Tämä vastaa semanttisesti HTML-elementtiä <aside>.
• Contentinfo. Tämä sisältää informatiivista alisisältöä, kuten linkkejä alaviitteisiin tai yksityisyydensuojaan. Tämä vastaa semanttisesti HTML-elementtiä <footer>.
• Main. Tämä sisältää sivun pääsisältöalueen tai keskeisen sisällön. Tämä vastaa semanttisesti HTML-elementtiä <main>.
• Navigation. Tämä on alue, joka sisältää sivuston navigointilinkit. Tämä vastaa semanttisesti HTML-elementtiä <nav>.
• Region.Tämä on käytössä määrittämään sisällön alueita, joita pidetään merkittävänä. Tämä on yleinen maamerkki, joka on käytettävissä tilanteissa, joissa mikään muu maamerkkirooli ei ole sopiva. Tämä vastaa semanttisesti HTML-elementtiä <section>, kunhan sille on annettu saavutettava nimi.
• Search. Tämä sisältää sivuston hakutoiminnallisuuden. Tälle maamerkkiroolille ei tällä hetkellä ole semanttisesti vastaavaa HTML-elementtiä.

Kuten olet saattanut huomata, useimmalla maamerkkiroolilla on vastaava HTML-elementti. Aina, kun on mahdollista, pyri käyttämään HTML-elementtejä. Olen nähnyt myös tilanteita, joissa on käytetty sekä HTML-elementtiä, että vastaavaa maamerkkiroolia, esimerkiksi <header role="banner">. Tämä on teknisesti sallittua, mutta tarpeetonta, ellei haluta tukea erityisen vanhoja selaimia tai vanhaa avustavaa teknologiaa.

Jokaisella elementillä, jolla on region-rooli, tulisi olla myös nimitieto, joka kuvaa tämän maamerkin tarkoitusta. Toivotuin merkintätapa on attribuutti aria-labelledby, joka viittaa näkyvään otsikkoon. Mikäli sopivaa näkyvää otsikkoa ei ole, käytä mieluummin attribuuttia aria-label.

Tiedostorakenteen roolit

Tiedostorakenteen rooleja käytetään tarjoamaan rakenteellinen kuvaus sisällön osasta. Useimmat näistä rooleista ovat tuettuja semanttisten HTML-elementtien avulla, joilla on sama merkitys. Eli näitä ei pitäisi enää käyttää. Seuraaville rooleille ei tällä hetkellä ole vastaavaa natiivia HTML-elementtiä:

• toolbar
• tooltip
• feed
• math
• presentation / none
• note

Vimpain-roolit

Vimpain-rooleja käytetään määrittämään yleisiä interaktiivisia kuvioita. Vastaavasti kuin tiedostorakenteen roolit, joillakin näistä rooleista on vastaava semanttinen HTML-elementti. Näiden kahden roolin erona on, että pääasiassa vimpain-roolit vaativat JavaScript-toiminnallisuutta, kun taas tiedostorakenteen roolit eivät välttämättä vaadi.

Ikkunaroolit

Ikkunarooleilla määritetään ali-ikkunoita pääikkunaan saman ikkunan sisällä, kuten pop-upeja ja modaaleja:

• alertdialog
• dialog

Live-alueen roolit

Live-alueen rooleilla määritetään elementtejä, joiden sisältöä tullaan dynaamisesti päivittämään. Näkevät käyttäjät voivat nähdä dynaamiset muutokset, koska ne ovat yleensä visuaalisesti havaittavia. Nämä roolit auttavat avustavaa teknologiaa käyttäviä käyttäjiä tietämään, että jokin sisältö on päivittynyt. Avustavat teknologiat voidaan asettaa ilmoittamaan dynaamisista muutoksista:

• log
• marquee
• status
• timer

Abstraktit roolit

Abstrakteja rooleja eivät sivustojen kehittäjät käytä tuottaessaan HTML:ää. Selaimet käyttävät näitä rooleja järjestämään sisältöä. Mikäli abstrakteja rooleja yrittää käyttää, avustaville teknologioille ei välity mitään hyödyllistä tietoa.

Esimerkki ARIA roolista

ARIA roolit lisätään role-attribuutilla:

<div role="menuitem">Tekstiä</div>