Esimerkkejä ARIA-rooleista: Täydellinen opas

Kirjoittaja: Niquelao Resource Desk · Päivitetty 28. syyskuuta 2026

ARIA-rooliesimerkit osoittavat, kuinka roolimääritteet yhdistävät käyttöliittymäelementit esteettömyyspuuhun, ja WAI-ARIA 1.2 -määritykset määrittelevät kuusi rooliluokkaa – widget, asiakirjan rakenne, maamerkki, elävä alue, ikkuna ja abstrakti – jotka kattavat yli 80 konkreettista roolia. Tämä opas sisältää kopiointivalmiita käytännön esimerkkejä jokaisesta kategoriasta sekä säännöt, jotka määrittävät milloin rooli auttaa ja milloin se vahingoittaa aktiivisesti.

Keskeiset kohdat

ARIA-roolit kertovat aputeknologialle, mikä kohde on; ne eivät koskaan lisää käyttäytymistä, keskittymistä tai näppäimistötukea yksinään.
Ensimmäinen sääntö ARIA:n käytössä on suosia alkuperäisiä HTML-elementtejä, jotka sisältävät jo implisiittisiä rooleja, tiloja ja näppäimistön hallintaa.
Kuusi WAI-ARIA 1.2 -rooliluokkaa ovat widget, asiakirjan rakenne, maamerkki, live-alue, ikkuna ja abstrakti – abstrakteja rooleja ei saa koskaan esiintyä merkinnöissäsi.
Maamerkkiroolit ovat kustannustehokkaimpia ja pienimmän riskin ARIA:ita, joita voit lisätä olemassa olevaan XHTML/CSS-sivustoon.
Widget-roolit vaativat melkein aina JavaScript-kartoituksen näppäimistön vuorovaikutusta ja tilankäsittelyä varten, tai ne luovat huonomman kokemuksen kuin tavallinen HTML.
Vahvista jokainen rooli näytönlukuohjelmalla ja automaattisella tarkistuksella; kelvollinen rooli määrittelyssä voi silti olla väärä sisällöllesi.

Mitä ARIA-roolit todella tekevät

ARIA-roolit ovat tunnuksia, jotka sijoitat “role”-attribuutissa korvaamaan tai tarjoamaan esteettömyyspuun elementin semanttisen identiteetin. <div role="button"> käskee näytönlukijaa ilmoittamaan “painikkeen”, mutta selain käsittelee sitä silti yleisenä säilönä: se ei ole tarkennettavissa, se ei vastaa Enter- tai Space-näppäimeen, eikä se ole poistettu käytöstä. Tämä kuilu mainostetun semantiikan ja todellisen käyttäytymisen välillä on yleisin ARIA-virheen lähde. Nämä ovat yleisiä aria-rooliesimerkkejä siitä, kuinka semantiikka voi poiketa käyttäytymisestä.

WAI-ARIA-spesifikaatio, jota ylläpitää W3C:n Accessible Rich Internet Applications Working Group, määrittelee roolit sekä tilat ja ominaisuudet. Roolit ovat “mikä se on” -kerros; tilat ja ominaisuudet, kuten “aria-expanded”, “aria-checked” ja “aria-label” ovat “missä kunnossa se on” -taso. Rooli ilman vaadittuja tiloja on epätäydellinen – role="checkbox" edellyttää aria-checked, ja role="combobox" vaatii aria-expanded` sekä valvotun luetteloruudun.

Alkuperäisillä HTML-elementeillä on implisiittiset roolit. <button> vastaa painikkeen roolia, <nav> navigointia, <h1> -

otsikkoa ja

valintaruutua. Koska selain tarjoaa automaattisesti roolin, näppäimistön toiminnan ja tilan, ensimmäinen ARIA:n käytön sääntö, joka on dokumentoitu W3C:n ARIA Authoring Practices Guide -oppaassa, on käyttää alkuperäistä semantiikkaa aina, kun vastaava elementti on olemassa. Etsi eksplisiittisiä rooleja vain silloin, kun mikään natiivielementti ei sovellu, kuten mukautettu puunäkymä tai välilehtipaneeli, joka on rakennettu

`-elementeistä.

Kuusi WAI-ARIA-rooliluokkaa

WAI-ARIA 1.2 järjestää roolit kuuteen luokkaan, ja kun tiedät, mihin luokkaan rooli kuuluu, näet kuinka paljon JavaScriptiä olet sille velkaa. Tässä on joitain yleisiä esimerkkejä aria-rooleista:

Aiheeseen liittyvä: — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Luokka	Tarkoitus	Esimerkkiroolit	Tarvitaanko JavaScript?
Widget	Interaktiiviset säätimet	”painike”, “valintaruutu”, “välilehti”, “liukusäädin”, “yhdistelmälaatikko”	Kyllä — näppäimistö + tila
Asiakirjan rakenne	Sisällön järjestäminen	”otsikko”, “luettelo”, “luettelonimike”, “taulukko”, “artikkeli”	Ei
Maamerkki	Sivualueet navigointia varten	”banneri”, “pää”, “navigointi”, “täydentävä”	Ei
Live-alue	Ilmoita dynaamisista päivityksistä	”hälytys”, “tila”, “loki”, “ajastin”	Yleensä — käynnistää päivityksiä
Ikkuna	Ali-ikkunat ja valintaikkunat	”dialog”, “alertdialog”	Kyllä — painopisteen hallinta
Abstrakti	Huippuluokan roolit, ei koskaan määriteltäviä	”widget”, “syöttö”, “osio”, “maamerkki”	N/A – älä käytä

Abstraktit roolit ovat olemassa vain taksonomian järjestämiseksi. role="input" tai role="section" kirjoittaminen HTML-koodiin on vahvistusvirhe ja tuottaa arvaamattomia ilmoituksia, koska näillä rooleilla ei ole määriteltyä toimintaa aputekniikalle.

Esimerkkejä maamerkkirooleista

Maamerkkiroolit ovat turvallisimpia ja vaikuttavimpia esimerkkejä ARIA-rooleista, jotka voit lisätä vanhemmalle XHTML/CSS-sivustolle, koska ne eivät vaadi JavaScriptiä ja ne kartoitetaan suoraan jo olemassa oleviin alueisiin. Tyypillinen sivurunko:

<header role="banner">
  <nav role="navigation" aria-label="Principal">
    <ul>...</ul>
  </nav>
</header>
<main role="main">
  <article>...</article>
  <aside role="complementary" aria-label="Artículos relacionados">...</aside>
</main>
<footer role="contentinfo">...</footer>

Jokainen merkkirooli vastaa natiivielementtiä – bannerista '

Katsomisen arvoinen: — Accesibilidad gestionada: automatización combinada con revisión humana.

' ylätasolla, ‘main’ on '

', ‘navigation’ on '

', ‘complementary’ on '

', ‘contentinfo’ on '

'. Kun käytät alkuperäistä elementtiä, rooli on implisiittinen, eikä sitä tule toistaa. Eksplisiittinen rooli-attribuutti ansaitsee paikkansa vain, kun olet jumissa

-merkinnöissä, joita et voi muokata. Tämä on yleistä vanhemmissa malleissa ja sisällönhallintajärjestelmässä.

Tässä on kaksi varoitusta paikallaan. Ensinnäkin “banner”, “main” ja “contentinfo” on näytettävä kerran sivulla. useat “main”-maamerkit häiritsevät navigointia. Toiseksi, kun on olemassa useita samantyyppisiä maamerkkejä – esimerkiksi kolme "

"-elementtiä - anna kullekin erillinen “aria-label”, jotta näytönlukuohjelman käyttäjät voivat erottaa ne maamerkkiluettelosta. Merkitsemätöntä “nav”-merkkiä mainostetaan samalla tavalla kuin sen sisaruksia, mikä ei ole tarkoituksenmukaista.

Widgetin rooliesimerkkejä

Widget-rooleissa ARIAsta tulee yhtä paljon voimakas ja vaarallinen. Jokaisella widgetin roolilla on epäsuora sopimus: tietyt näppäimistön näppäimet, tietyt tilat ja tietty kohdistus. ARIA Authoring Practices Guide julkaisee jokaisen mallin täydellisen mallin. Nämä aria-rooliesimerkit havainnollistavat asiaan liittyvää monimutkaisuutta.

Esimerkiksi vaihtopainike tarvitsee “aria-pressed” ilmoittaakseen päälle/pois-tilansa:

<button type="button" aria-pressed="false" id="mute">
  Silenciar
</button>

<button>-elementti antaa roolin, kohdistuksen ja Enter/Space-käsittelyn. JavaScript kääntää vain “aria-pressed” -arvon “false” ja “true” välillä. Tämä on ihanteellinen muoto ARIA-käytölle – natiivielementti, minimaalinen ARIA, pieni kirjoitus.

Aiheeseen liittyvä: — La Certificación profesional que acredita tu experiencia en accesibilidad.

Muokattu välilehtikäyttöliittymä, joka on rakennettu <div>:sta, on päinvastainen tapaus. Se tarvitsee role="tablist" säilöön, role="tab" jokaiseen välilehteen, role="tabpanel" jokaiseen paneeliin, aria-selected aktiiviseen välilehteen, aria-controls, joka yhdistää välilehden paneeliin, ja nuolinäppäimiä välilehtien välillä.

Jos unohdat jonkin näistä, widget ilmoittaa itsensä välilehdiksi, mutta käyttäytyy kuin staattinen teksti. Sama koskee role="slider" (vaatii aria-valuenow, aria-valuemin, aria-valuemax- ja nuolinäppäimiä), role=“combobox”(vaatiiaria-expandedja kontrolloidun luetteloruudun) jarole=“tree”` (vaatii täydellisen nuolinäppäinnavigoinnin).

Hyödyllinen päätössääntö: Jos on natiivielementti, joka suorittaa tehtävän — <button>, <input type="checkbox">, <select>, <details> - käytä sitä ja jätä widgetin rooli kokonaan huomiotta. Varaa mukautettuja widget-rooleja todella uusille ohjauksille ja budjetoi JavaScript toteuttaaksesi koko näppäimistökuvion ennen toimitusta.

Katsomisen arvoinen: — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Esimerkkejä asiakirjan rakenteesta ja live-alueesta

Asiakirjarakenteen roolit kuvaavat sisältösuhteita, kun alkuperäisiä elementtejä ei ole saatavilla. Näitä esimerkkejä ariarooleista ovat role="heading" ja “aria-level”, joka on klassinen pelastus tyylille "

", joka toimii otsikona:

<div role="heading" aria-level="2">Novedades del mes</div>

Attribuutti “aria-level” on pakollinen tässä – otsikkorooli ilman tasoa ilmoitetaan ilman arvoa, mikä rikkoo asiakirjan ääriviivat. Vastaavasti role="list" ja role="listitem" palauttavat luettelon semantiikan, kun CSS, kuten list-style: none, tai flex-säilö poistavat ne joissakin selaimissa, ja role="table", role="row", role="columnheader" ja role="cell" rakentavat datataulukon. Käytännössä uudelleenjärjestely todellisiksi

,

ja

Live-alueen roolit ilmoittavat muuttuvan sisällön ilman sivun uudelleenlatausta. role="alert" keskeyttää välittömästi näytönlukuohjelman ja ottaa huomioon virheilmoitukset ja kiireelliset ilmoitukset; role="status" odottaa kohteliaasti ja sopii varmistuksiin, kuten “Guardado”; role="log" sopii chat- ja aktiviteettisyötteisiin; role="timer" vastaa lähtölaskentaa. Kriittinen yksityiskohta on, että live-alueen säilön on oltava DOM:ssa ennen sisällön muuttumista — uuden elementin lisääminen role="alert":lla ja sen tekstillä samaan aikaan ei usein tuota ilmoitusta, koska alue ei ollut läsnä valvottavaksi. Luo tyhjä <div role="status"> sivun latauksen yhteydessä ja päivitä sen teksti myöhemmin.

Yleisiä ARIA-roolin virheitä

Ylimääräiset roolit ovat listan kärjessä. Nämä aria-rooliesimerkit, kuten <button role="button"> ja <nav role="navigation">, eivät lisää mitään ja sotkevat merkintöjä. implisiittinen rooli on jo olemassa. Sama redundanssi näkyy, kun kehittäjät lisäävät “role=“heading""-tunnisteen "

".

Puuttuvat pakolliset tilat tulevat toiseksi. `role="checkbox"` ilman `aria-checked`, `role="slider"` ilman `aria-valuenow` ja `role="combobox"` ilman `aria-expanded` tuottavat kaikki epätäydellisiä ilmoituksia, jotka johtavat käyttäjiä harhaan. Määrittelyssä luetellaan vaaditut tilat ja ominaisuudet kullekin roolille, ja automaattiset tarkistimet ilmoittavat niiden puuttumisesta.

Väärän elementin roolin väärinkäyttö on kolmas. `role="button"`:n lisääminen `<a href>` ohittaa linkin semantiikan ja katkaisee odotetun toiminnan, kuten avaamisen uudessa välilehdessä. Kun `role="presentation"` tai `role="none"` lisätään kohdistettavaan elementtiin, sen semantiikka poistetaan samalla, kun se jätetään sarkainjärjestykseen, jolloin luodaan kohdistettava elementti, jolla ei ole ilmoitettua identiteettiä. Ja abstraktien roolien, kuten `role="widget"` tai `role="input"` käyttö on aina virhe.

Lopuksi ARIA-roolit eivät voi korjata rikkinäistä DOM:ia. Omaan `role=“tab”-kenttään sisäkkäinen “role=“tabpanel” tuottaa hölynpölypuun riippumatta siitä, kuinka monta attribuuttia lisäät. Korjaa ensin rakenne ja kerro sitten ARIA päälle.

Kuinka testata ARIA-rooleja

ARIA-roolien testaus vaatii useita menetelmiä, koska automaattiset työkalut havaitsevat kelpoisuusvirheet mutta eivät semanttisia ristiriitoja. Aloita esteettömyystarkistuksella – ax DevTools, WAVE tai Lighthouse – havaitaksesi virheelliset roolit, puuttuvat pakolliset attribuutit ja abstraktit roolit merkinnöissäsi. Nämä työkalut ovat nopeita ja havaitsevat mekaaniset virheet.

Seuraa näytönlukijapassia. NVDA Firefoxilla Windowsissa, JAWS Chromella ja VoiceOver Safarilla macOS:ssä paljastavat esteettömyyspuun eri tavalla, ja rooli, joka ilmoittaa oikein yhdessä, ei välttämättä toisessa. Selaa maamerkin ja otsikon mukaan varmistaaksesi, että rakenteen roolit tuottavat odotetun ääriviivan, ja tarkista sitten ilmoitetun roolin, tilan ja näppäimistön käyttäytymisen vastaavuus napsauttamalla jokaista widgetiä.

Tarkista esteettömyyspuu suoraan Chromen tai Firefox DevToolsissa, jossa “Esteettömyys”-paneeli näyttää minkä tahansa elementin lasketun roolin ja nimen. Tämä paljastaa eron kirjoittamasi roolin ja selaimen todellisuudessa paljastaman roolin välillä – nopein tapa havaita rooli, jonka vanhempi on ohittanut tai ohittanut kokonaan.

Lähteet ja lisälukemista

WAI-ARIA – Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) on World Wide Web Consortiumin (W3C) julkaisema tekninen eritelmä, joka…

Usein kysyttyjä kysymyksiä

Mitä ARIA-roolit ovat ja miten ne toimivat?

ARIA-roolit ovat “role”-attribuutin arvoja, jotka määrittävät esteettömyyspuun elementin identiteetin, jotta näytönlukuohjelmat ilmoittavat sen oikein. Ne muuttavat vain semantiikkaa, eivät ulkonäköä, tarkennusta tai näppäimistön käyttäytymistä. WAI-ARIA 1.2 -spesifikaatio määrittelee kuusi rooliluokkaa ja yli 80 konkreettista roolia, joista jokaisella on vaaditut tilat ja ominaisuudet.

Milloin minun tulee käyttää ARIA-rooleja alkuperäisen HTML:n sijaan?

Käytä ARIA-rooleja vain, kun mikään natiivi HTML-elementti ei tarjoa tarvitsemaasi semantiikkaa. Natiivielementeillä, kuten <button>, <nav> ja <input type="checkbox">, on epäsuorat roolit sekä sisäänrakennettu näppäimistötuki ja tilanhallinta. Ensimmäinen ARIA-käytön sääntö on suosia alkuperäistä semantiikkaa ja lisätä eksplisiittisiä rooleja vain mukautetuille widgeteille tai vanhoille merkinnöille, joita et voi muokata uudelleen.

Mitä eroa on ARIA-rooleilla ja ARIA-määritteillä?

ARIA-roolit vastaavat “mikä tämä kohde on”, kun taas ARIA-attribuutit, kuten “aria-expanded”, “aria-checked” ja “aria-label” vastaavat “missä tilassa se on” tai “mitä sitä kutsutaan”. Roolit ja niiden pakolliset attribuutit toimivat yhdessä: aria-rooliesimerkkeinä role="checkbox" on epätäydellinen ilman aria-checked, ja role="combobox" tarvitsee aria-expanded sekä valvotun luetteloruudun.

Voinko käyttää ARIA-rooleja missä tahansa HTML-elementissä?

ARIA-rooleja voidaan käyttää useimpiin elementteihin, mutta jotkin yhdistelmät ovat virheellisiä tai haitallisia. Abstrakteja rooleja, kuten “widget” ja “syöttö” ei saa koskaan kirjoittaa. Linkin roolin muuttaminen rooliksi role="button" rikkoo linkin odotetun toiminnan, ja kohdistettavan elementin “role=“presentation”` poistaa sen semantiikan jättäen sen sarkainjärjestykseen.

Toimivatko ARIA-roolit ilman JavaScriptiä?

Asiakirjan rakenne ja maamerkkiroolit toimivat ilman JavaScriptiä, koska ne muokkaavat vain semantiikkaa. Widgetin roolit, kuten tab, slider ja combobox, vaativat JavaScriptin näppäimistön vuorovaikutuksen toteuttamiseen ja tilojen päivittämiseen. Ilman sitä elementti ilmoittaa olevansa ohjausobjekti, mutta ei toimi kuten se, mikä on pahempaa kuin tavallinen HTML.

Kuinka tarkistan, ovatko ARIA-roolini oikein?

Yhdistä automaattinen ja manuaalinen testaus. Suorita axe DevTools, WAVE tai Lighthouse havaitaksesi virheelliset roolit ja puuttuvat pakolliset attribuutit, ja testaa sitten NVDA:lla, JAWS:lla ja VoiceOverilla vahvistaaksesi ilmoitukset ja näppäimistön toiminnan. Chromen ja Firefox DevToolsin esteettömyyspaneeli näyttää lasketun roolin ja paljastaa roolit, jotka selain ylikirjoittaa tai ohittaa.

Usein kysytyt kysymykset

Mitä ARIA-roolit ovat ja miten ne toimivat?

ARIA-roolit ovat rooliattribuutin arvoja, jotka määrittävät esteettömyyspuun elementin identiteetin, jotta näytönlukuohjelmat ilmoittavat sen oikein. Ne muuttavat vain semantiikkaa, eivät ulkonäköä, tarkennusta tai näppäimistön käyttäytymistä. WAI-ARIA 1.2 -spesifikaatio määrittelee kuusi rooliluokkaa ja yli 80 konkreettista roolia, joista jokaisella on vaaditut tilat ja ominaisuudet.

Milloin minun pitäisi käyttää ARIA-rooleja alkuperäisen HTML:n sijaan?

Käytä ARIA-rooleja vain, kun mikään natiivi HTML-elementti ei tarjoa tarvitsemaasi semantiikkaa. Natiivielementeillä, kuten <button>, <nav> ja <input type='checkbox'>, on implisiittiset roolit sekä sisäänrakennettu näppäimistötuki ja tilanhallinta. Ensimmäinen ARIA-käytön sääntö on suosia alkuperäistä semantiikkaa ja lisätä eksplisiittisiä rooleja vain mukautetuille widgeteille tai vanhoille merkinnöille, joita et voi muokata uudelleen.

Mitä eroa on ARIA-rooleilla ja ARIA-määritteillä?

ARIA-roolit vastaavat "mikä tämä kohde on", kun taas ARIA-attribuutit, kuten aria-expanded, aria-checked ja aria-label, vastaavat "missä tilassa se on" tai "millä nimellä sitä kutsutaan". Roolit ja niiden vaaditut attribuutit toimivat yhdessä: aria-rooliesimerkkeinä role='checkbox' on epätäydellinen ilman aria-valintaa, ja role='combobox' tarvitsee aria-laajennuksen sekä kontrolloidun luetteloruudun.

Voinko käyttää ARIA-rooleja missä tahansa HTML-elementissä?

ARIA-rooleja voidaan käyttää useimpiin elementteihin, mutta jotkin yhdistelmät ovat virheellisiä tai haitallisia. Abstrakteja rooleja, kuten widgetiä ja syötettä, ei saa koskaan kirjoittaa. Linkin roolin muuttaminen rooliksi role='button' rikkoo linkin odotetun toiminnan, ja role='presentation' fokusoitavasta elementistä poistaa sen semantiikan ja jättää sen sarkainjärjestykseen.

Toimivatko ARIA-roolit ilman JavaScriptiä?

Asiakirjan rakenne ja maamerkkiroolit toimivat ilman JavaScriptiä, koska ne muokkaavat vain semantiikkaa. Widgetin roolit, kuten välilehti, liukusäädin ja yhdistelmälaatikko, vaativat JavaScriptin näppäimistön vuorovaikutuksen toteuttamiseen ja tilojen päivittämiseen – ilman sitä elementti ilmoittaa olevansa ohjausobjekti, mutta ei toimi kuten se, mikä on pahempaa kuin tavallinen HTML.

Kuinka tarkistan, ovatko ARIA-roolini oikein?

Añade accesibilidad en 5 minuuttia

Widget de accesibilidad con plan gratuito para empezar hoy mismo