ARIA Roles -huijauslehti: Parhaat valinnat verrattuna

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

ARIA-roolien muistilista (cheat sheet) on viite, joka yhdistää kunkin ARIA-roolin vastaavaan natiiviin HTML-elementtiin, sen kategoriaan (widget, maamerkki, rakenne, live-alue tai ikkuna) sekä siihen liittyviin ominaisuuksiin ja tiloihin. WAI-ARIA 1.2 määrittelee 82 roolia, ja useimmat projektit tarvitsevat niistä vain 15–20 toistuvasti. Tämä vertailu kokoaa vuoden 2026 parhaat muistilistat ja selittää, mikä niistä sopii parhaiten työnkulkuusi.

Miksi ARIA-roolien muistilista on edelleen tarpeellinen

WAI-ARIA 1.2:n ja sen seuraajan WAI-ARIA 1.3:n kaltaiset määritykset ovat tiiviitä asiakirjoja, jotka on suunnattu selainten ja avustavien teknologioiden kehittäjille, ei henkilölle, joka rakentaa lomaketta tiistai-iltapäivänä. ARIA:n ensimmäinen sääntö —käytä natiivia HTML:ää aina kun mahdollista— ratkaisee useimmat tapaukset, mutta on malleja, joille ei ole natiivia vastinetta: välilehdet, puut, interaktiiviset ruudukot, automaattisen täydennyksen sisältävät yhdistelmäruudut sekä valikot alivalikkoineen. Tällöin muistilista säästää aikaa ja ennen kaikkea ehkäisee virheitä.

Yleisin virhe ei ole roolin unohtaminen, vaan tarpeettoman roolin lisääminen. <button>-elementti, jolla on role="button", ei tuo mitään lisäarvoa ja voi rikkoa natiivin toiminnan joissakin ruudunlukuohjelmissa. Hyvin tehty muistilista osoittaa selkeästi, mitkä roolit ovat tarpeettomia natiivielementtien yhteydessä, mitkä roolit vaativat fokuksen hallintaa JavaScriptillä ja mitkä attribuutit ovat pakollisia tai valinnaisia.

Toinen syy on tarkistus. Rooleilla on omistussuhteita: aria-labelledby viittaa tunnukseen (id), aria-activedescendant edellyttää, että viitattu elementti on olemassa ja näkyvissä, ja aria-owns on perusteltu vain, kun DOM-järjestys ei vastaa visuaalista järjestystä. Taulukko, joka yhdistää roolin, pakolliset attribuutit ja kielletyt attribuutit, havaitsee virheet ennen auditointia.

Mitä hyvän ARIA-roolien muistilistan tulisi sisältää

Front-end-kehitykseen hyödyllinen muistilista täyttää viisi kriteeriä. Listaan ne, koska olen käyttänyt juuri näitä tämän vertailun vaihtoehtojen arvioinnissa.

**Kattaa kaikki viisi rooliluokkaa. **WAI-ARIA ryhmittelee roolit yhteenvedoissa, widgeteissä, asiakirjarakenteessa, maamerkeissä ja live-alueilla. Yhteenvetoja (roolityyppi, widget, syöttö) ei käytetä kehyksessä. hyvä viittaus näkyvään muototietoon.
Natiivi HTML-vastine roolille. Ilman tätä saraketta viite kehottaa käyttämään ARIAa siellä koskematta.
Pakolliset, tuetut ja kielletyt attribuutit. role="checkbox" vaatii aria-checked; role="heading" edellyttää aria-level'; role=“presentation”` ei ole sallittu.
Patron de teclado asociado. Rooli ilman teclado-hallintaa on lupaus. role="tablist" tarkoittaa eri elementtejä/derechaa, Homea ja End.
Haettavissa oleva muoto. Buscador, suodatus luokan mukaan, spesifikaatioversio ja kyky kopioida koodinpätkä.

Vertailu: parhaat ARIA-roolien viitteet vuonna 2026

Seuraava taulukko tiivistää luotettavimmat vaihtoehdot. Mikään niistä ei ole maksullinen; kaikki ovat aktiivisia ja mainitsevat kattamansa määrittelyversion.

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

Recurso	Enfoque	Categorías cubiertas	Equivalente nativo	Patrón de teclado	Ihanteellinen para
WAI-ARIA Authoring Practices Guide (APG), W3C	Patrones completos con ejemplos	Widgetit, maamerkit, rakenteet, elävät alueet	Sí, en cada patrón	Sí, yksityiskohtia	Toteutettu konkreettinen widget
MDN Web Docs, referenssit rooleista ARIA	Ficha por rol	Todas, mukaan lukien abstractos	Sí	Parcial	Consultar un rol puntual
ARIA Authoring Practices, índice de rooles	Tabla rol → atributos	Widgetit ja rakenne	Parcial	Ei	Verificar atributos requeridos
Deque University, ARIA-viite	Fichas con notas de soporte	Widgetit ja maamerkit	Sí	Parcial	Conocer soporte real por lector
A11Y-projektin tarkistuslista	Lista de verificación	Poikittainen	Ei sovellusta	Ei	Auditar antes de publicar
HTML-ARIA (W3C), tabla de equivalencias	Rol permitido por elemento	Todas	Sí, es su propósito	Ei	Päätös siitä, onko ARIA välttämätön

WAI-ARIA Authoring Practices Guide (APG)

W3C:n APG on kanoninen viite malleille. Cada patrón sisältää HTML-rakenteen, roolit, asemat, interacción de teclado y un eemplo Funcional. Su punto fuerte es que no se limita a listar rooleja: explica el Comportamiento esperado. Su punto débil es que no es una tabla rápida; para consultar «qué atributos lleva role="slider"» hay que navegar hasta el patrón communicationiente.

APG ryhmittelee yleisimmät widgetit: harmonikka, hälytys, vaihemerkki, painike, valintaruutu, yhdistelmäruutu, valintaikkuna, ilmoitus, syöte, ruudukko, linkki, luetteloruutu, valikko, valikkopalkki, radioryhmä, liukusäädin, kiertonuppi, kytkin, taulukko, välilehtiluettelo, työkalupalkki, työkaluvihje, ruudukkopuu ja puunäkymä. Jos projektisi käyttää jotakin näistä, suorita se täällä.

MDN Web Docs: la referenssi por rol

MDN ylläpitää jokaista ARIA-roolia varten sivua, jossa on kuvaus, vaaditut attribuutit, sallitut attribuutit, niihin liittyvät esteettömyysongelmat ja linkit spesifikaatioihin. Tämä on nopein vaihtoehto, kun tiedät mitä olet tekemässä. Kattavuutesi sisältää abstrakteja rooleja ja käytössä olevia rooleja, vaikka monet muistutukset on jätetty pois.

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

Un detalle práctico: MDN marca qué roles están obsoletos o en riesgo de eliminación en futuras versiones de la especificación. Consultar esa marca evita adoptar un rol que desaparecerá.

HTML-ARIA: la tabla que evita ARIA innecesario

La Especificación HTML-ARIA del W3C define, para cada elemento HTML, qué rooleja ARIA se le pueden aplicar y cuáles son redundantes. Es la herramienta decisiva cuando dudas entre usar un elemento nativo o un div con rol. Si el rol que quieres aplicar aparece como redundante para ese elemento, la respuesta es no añadirlo.

Deque University ofrece fichas de rol con notas sobre soporte real en lectores de pantalla, algo que la especificación no cubre porque no es su cometido. El A11Y Project Checklist no es una cheat sheet de roles, pero funciona como lista de verificación previa a publicación ycomplementa bien a las anteriores.

Cómo elegir según tu caso

La decisión depende de tres preguntas. Primero, ¿ya sabes qué rol necesitas? Si la respuesta es sí, MDN es la más corta. Segundo, ¿estás construyendo un widget con interacción compleja? Entonces necesitas la APG, porque el rol por sí solo no description el comportamiento de teclado. Tercero, ¿dudas entre HTML nativo y ARIA? Consulta HTML-ARIA antes que cualquier otra fuente.

Para equipos que trabajan kanssa XHTML ja CSS sin kehyksiä, la combinación enemmän eficiente suele ser: HTML-ARIA para decidir, APG para implementar ja MDN para verificar attributos. Una cheat sheet de una sola página sirve como memoria a corto plazo, pero no sustituye a estas tres fuentes cuando aparece un caso límite.

Un criterio adicional que conviene aplicar: si el rol requiere JavaScript para funcionar correctamente (gestión de foco, aktualización de aria-expanded, sincronización de aria-selected), trátalo como una decisión de arquitectura, no decoroat atributo decoroat Widget-roolit ilman niihin liittyvää logiikkaa luovat enemmän esteitä kuin roolin puuttuminen.

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

Virheet frecuentes que ninguna huijausarkki evita por sí sola

Los rooles de landmark duplicados confunden la navigation por regiones. Un role="main" sobre un <main> on tarpeeton; dos role="navigation" sin etiqueta distintiva son ambiguos. La solución es “aria-label” tai “aria-labelledby” en cada landmark repetido.

Lost rooleja de widgetissä sobre elementos no enfocables rompen la interacción. role="button" sobre un <div> exige tabindex="0" y manejo de Enter ja Espacio. Sin eso, el rol anuncia un botón que no se puede activar con teclado.

Synkronimattomat tilat ovat yleisin syy käyttäjäkokemuksen heikkenemiseen. Esimerkiksi aria-expanded, joka ei muutu elementin avautuessa, aria-selected, joka ei päivity välilehden vaihtuessa, tai aria-checked role="switch"-elementissä, joka pysyy muuttumattomana. Ninguna tabla lo detecta: hace falta probar con teclado y con una reader de la pantalla real.

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

Abstraktit roolit markkinoilla ovat periaatteessa virhe. role="widget", role="input" tai role="section" eivät saa näkyä HTML:ssä; olemassa yksinään eritelmän jerarquíalle.

Keskeiset takeawayt

WAI-ARIA 1.2 määrittelee 82 roolia, pero la mayoría de proyectos solo usa entre 15 y 20 de forma toistuva.
La primera regla de ARIA —usar HTML nativo cuando cuando — convierte la tabla HTML-ARIA del W3C en la referent more importante antes de escribir calquier rol.
La APG del W3C on ylitsepääsemätön widgetin suojelija, mukaan lukien interacción de teclado; MDN es enemmän rápida para consultar un rol concreto.
Un rol sin gestión de foco y sin aktualización de estados genera más barreras de accesibilidad que no usar ARIA.
Ninguna cheat sheet sustituye la prueba con teclado y con lector de pantalla: los estados desincronizados solo se detectan en uso real.

Preguntas frecuentes

¿Cuántosin roolit ARIA olemassa?

WAI-ARIA 1.2 määrittelee 82 roolia, repartidos en cinco -kategorioita: abstraktit, widgetit, dokumentin rakenne, maamerkit ja elävät alueet. Los roles abstractos no se aplican nunca en el marcado; sirven para organzar la jerarquía de la especificación. En la práctica, un proyecto típico käyttää 15 ja 20 eri rooleja.

¿Cuál es la mejor huijauslehti rooleista ARIA?

Riippuu meistä. Paras implementar un widget con teclado, WAI-ARIA Authoring Practices Guide del W3C es la reference more completa. Para konsultar los atributos de un rol concreto, MDN Web Docs ja enemmän rápida. Para Päätös on välttämätön HTML-elementissä, W3C:n HTML-ARIA-taulukossa ja ratkaisevasti.

¿Käytätkö ARIAa, oletko nativo-HTML-elementissä?

No. La primera regla de ARIA establece que si olemassa un elemento HTML con la semantica y el Comportamiento que necesitas, se usa ese elemento en lugar de un div con rol. Añadir role="button" a un <button> es redundante y puede alterar el comportamiento nativo en algunos lectores de pantalla.

Kuvatun widgetin roolit ohjaavat interaktiivisia \u200b\u200bpainikkeita, valintaruutuja, liukusäätimiä, taulukkoluetteloita— ja vaaditaan gestión de foco y teclado. Los roles de landmark descriptionn regiones de la página — “main”, “navigation”, “banner”, “contentinfo” - y sirven para la navegación por regiones. Un mismo elemento no debería cumplir ambas funciones.

¿Los roolit ARIA cambian entre versiones de la specificación?

Si. WAI-ARIA 1.2:n roolit ovat “blockquote”, “caption”, “code”, “poisto”, “korostus”, “lisäys”, “mittari”, “kappale”, “vahva”, “alaindeksi” ja “yläindeksi”. Algunos roolit han quedado obsoletos en versiones posteriores. Conviene comprobar en MDN o en la propia especificación si un rol sigue vigente antes de adoptarlo.

¿Onko ARIA-roolien huijauslehti WCAG:lle?

Nro Los roolit ARIA son una parte del criterio 4.1.2 Nombre, rol y valor, pero WCAG 2.2 sisältää monia muita vaatimuksia: kontrasti, näkyvä fokus, tamaño de objetivo, vaihtoehtoinen teksti, rakenne de encabezados. Una cheat sheet ayuda ayuda a implementar roles correctamente, no a cumplir el conjunto de los criterios de conformidad.

Lähteet ja lisälukemista

Cheat sheet — Wikipedia: Huijauslehti (myös cheatsheet) tai seimilehti tai työapu on lyhyt muistiinpano, jota käytetään pikaohjeisiin. Opiskelijat käyttivät historiallisesti huijauslehtiä ilman…

Añade accesibilidad en 5 minuuttia

Widget de accesibilidad con plan gratuito para empezar hoy mismo