ARIA Rolle Cheat Sheet: Best Picks Sammenlignet

Av Niquelao Resource Desk · Oppdatert 28. september 2026

Et jukseark for aria-roller er en referanse som tilordner en rolle i ARIA som en HTML-ekvivalent, en kategori (widget, landemerke, struktur, levende region eller vindu) og egenskapene og tilstandene som følger med. WAI-ARIA 1.2 definerer 82 roller, og de fleste prosjekter bare trenger mellom 15 og 20 gjentakende. Denne sammenligningen samler de beste referansearkene tilgjengelig i 2026 og forklarer hvilket som passer best for din arbeidsflyt.

Hvorfor et jukseark for ARIA-roller fortsatt er nødvendig

Spesifikasjoner som WAI-ARIA 1.2 og etterfølgeren WAI-ARIA 1.3 er tette dokumenter, laget for nettleserutviklere og hjelpemiddelteknologi, ikke for den som koder et skjema en tirsdag ettermiddag. Den første regelen i ARIA —bruk nativ HTML så langt det er mulig— løser de fleste tilfeller, men det finnes mønstre som ikke har et nativt ekvivalent: faner, trestrukturer, interaktive rutenett, kombinasjonsbokser med autofullføring og menyer med undermenyer. Det er her et referanseark sparer tid og, viktigst av alt, forhindrer feil.

Den vanligste feilen er ikke å glemme en rolle, men å legge til en unødvendig en. En <button> med role="button" tilfører ingenting og kan ødelegge den native oppførselen i enkelte skjermlesere. Et godt jukseark markerer eksplisitt hvilke roller som er redundante på native elementer, hvilke roller som krever fokusstyring via JavaScript, og hvilke attributter som er obligatoriske kontra valgfrie.

Den andre grunnen er verifisering. Roller har eiendomsrelasjoner: aria-labelledby peker til en id, aria-activedescendant krever at det refererte elementet eksisterer og er synlig, og aria-owns er bare rettferdiggjort når DOM-rekkefølgen ikke samsvarer med den visuelle rekkefølgen. En tabell som kryssjekker rolle, påkrevde attributter og forbudte attributter oppdager feil før de når en revisjon.

Hva et godt jukseark for ARIA-roller bør inneholde

Et nyttig referanseark for front-end-utvikling oppfyller fem kriterier. Jeg lister dem opp fordi det er nøyaktig disse jeg har brukt for å evaluere alternativene i denne sammenligningen.

**Dekning av alle fem rollekategorier. **WAI-ARIA grupperer roller i sammendrag, widgets, dokumentstruktur, landemerker og levende regioner. Sammendrag (rolletype, widget, input) brukes ikke i rammeverket; en god referanse til synlige formdata.
Native HTML-ekvivalent for rollen. Uten denne kolonnen ber referansen om å bruke ARIA der uten å berøre.
Påkrevde, støttede og forbudte attributter. role="checkbox" krever aria-checked; role="heading" krever aria-nivå; role="presentation" er ikke tillatt.
Tilknyttet tastaturmønster. En rolle uten tastaturstyring er et brutte løfte. role="tablist" innebærer bruk av piltaster, Home og End.
Søkbart format. Søkefunksjon, filtrering etter kategori, spesifikasjonsversjon og mulighet for å kopiere kodefragmenter.

Sammenligning: De beste referansene for ARIA-roller i 2026

La tabla suuiente CV las opciones más sólidas. Ninguna es de pago; todas se mantienen activas y citan la versjon de la especificación que cubren.

Relatert: — Superposición de IA que promete cumplimiento WCAG en 48 timer.

Tilbake	Enfoque	Categorías cubiertas	Equivalente nativo	Patrón de teclado	Ideell para
WAI-ARIA Authoring Practices Guide (APG), W3C	Patrones completos con ejemplos	Widgets, landemerker, estructura, levende regioner	Sí, en cada patrón	Sí, detallado	Implementer en widget konkret
MDN Web Docs, referanser til roller ARIA	Ficha por rol	Todas, incluidos abstractos	Sí	Parcial	Consultar un rol puntual
ARIA Forfatterpraksis, innstilling av roller	Tabla roll → attributter	Widgets og struktur	Parcial	Nei	Verificar attributter requeridos
Deque University, ARIA-referanse	Fichas con notas de soporte	Widgets og landemerker	Sí	Parcial	Conocer soporte real por lector
A11Y prosjektsjekkliste	Liste de verificación	Tverrgående	Ingen applikasjon	Nei	Auditar antes de publicar
HTML-ARIA (W3C), ekvivalenttabell	Roll permitido por elemento	Todas	Sí, es su propósito	Nei	Decidir si ARIA er nødvendig

WAI-ARIA Authoring Practices Guide (APG)

La APG del W3C er la referencia canónica para patrones. Patronen inkluderer HTML-struktur, roller, tjenester, interaksjoner og funksjonelle funksjoner. Su punto fuerte es que no se limita a listar roller: 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 correspondiente.

APG grupperer de vanligste widgetbrukerne: trekkspill, varsling, brødsmule, knapp, avkrysningsboks, kombinasjonsboks, dialogboks, avsløring, feed, rutenett, lenke, listeboks, meny, menylinje, radiogruppe, skyveknapp, dreieknapp, bryter, tabell, faneliste, verktøylinje, verktøytips, rutenetttre og trevisning. Hvis prosjektet ditt bruker en av disse, kjør den her.

MDN Web Docs: la referencia por rol

MDN vedlikeholder en side for hver ARIA-rolle, med beskrivelsen, nødvendige attributter, tillatte attributter, tilhørende tilgjengelighetsproblemer og lenker til spesifikasjonen. Dette er det raskeste alternativet når du vet hva du gjør. Dekningen din inkluderer abstrakte roller og roller i bruk, selv om mange påminnelser er utelatt.

Verdt en titt: — Tilgjengelighet: automatisert kombinasjon med menneskelig revisjon.

En detaljert praktisering: MDN-marca qué roller están obsoletos or en riesgo de eliminación en futuras versiones de la especificación. Consultar esa marca evita adoptar un roll que desaparecerá.

HTML-ARIA: tabla que evita ARIA innecesario

La especificación HTML-ARIA del W3C definere, para cada elemento HTML, hvilke roller ARIA se le pueden aplicar og 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 roll con nots sobre soporte real en lectores de pantalla, algo que la especificación no cubre porque no es su cometido. Den A11Y Prosjektsjekklisten er ikke et jukseark for roller, men fungerer som en liste over bekreftelse fra tidligere publisering og komplement til siden.

Cómo elegir según tu caso

Avgjørelsen avhenger av tres preguntas. Primero, ¿ya sabes qué rol necesitas? Si la respuesta es sí, MDN es la vía más corta. Vil du bygge en widget som er en komplett interaksjon? Entonces necesitas la APG, porque el roll por sí solo no describe el comportamiento de teclado. Vil du ha HTML og ARIA? Rådfør deg med HTML-ARIA før du kan finne andre.

Para equipos que trabajan med XHTML og CSS i rammeverk, en kombinasjon av mer effektive funksjoner: HTML-ARIA for decidir, APG for implementar og MDN for verificar atributos. Et jukseark de una sola pagina sirve como memoria a corto plazo, men ingen sustituye a estas tres fuentes cuando aparece un caso limite.

Et tilleggskriterium som er tilgjengelig for aplicar: å bruke JavaScript for funksjonskorrigering (gestión de foco, actualización de aria-expanded, sincronización de aria-selected), trátalo como una decisión de arquitectura, no como decorativo un atributo. Los roller de widget sin la lógica asociada generan más barreras que la ausencia de rol.

Relatert: — Den profesjonelle sertifiseringen er godkjenning for å oppleve og få tilgang.

Errores frecuentes que ninguna cheat sheet evita por sí sola

Los roller de landemerke duplicados confunden la navegación por regiones. Un role="main" sobre un <main> es redundante; dos rolle="navigasjon" sin etiqueta distintiva son ambiguos. La solución es aria-label eller aria-labeledby en cada landemerke repetido.

Los roller de widget sobre elementos no enfocables rompen la interacción. role="button" vises til <div> ut tabindex="0" og manejo de Enter og Espacio. Sin eso, el rolle anuncia un botón que no se puede activar con teclado.

Avviklede delstater er den vanligste årsaken til nedgang i publikum. aria-expanded som ikke endres for å åpne en akkord, aria-selected som ikke oppdateres når pestaña endres eller aria-checked i en role="switch" som er fikset. Ninguna tabla lo detecta: hace falta probar con teclado y con una reader de la pantalla real.

Verdt en titt: — med gratis plan for empezar Hoy Mismo.

Abstrakte roller i markedet er prinsipielt feil. role="widget", role="input" eller role="section" må ikke vises i HTML; eksisterer alene for jerarquía av spesifikasjonen.

Viktige takeaways

WAI-ARIA 1.2 definerer 82 roller, men som går igjen i USA fra 15 til 20 år.
La primera regla de ARIA —usar HTML nativo cuando exista— convierte la tabla HTML-ARIA del W3C en la referencia mais importante antes de escribir cualquier roll.
La APG del W3C er uoverkommelige for beskyttere av widget porque inkluderer interaksjon med teknologi; MDN es más rápida para consultar un roll concreto.
Un roll sin gestión de foco y sin actualización de estados genera más barreras de accesibilidad que no usar ARIA.
Ninguna jukseark sustituye la prueba con teclado y con lector de pantalla: los estados desincronizados solo se detectan en uso real.

Preguntas frecuentes

¿Cuántos roller ARIA eksisterer?

WAI-ARIA 1.2 definerer 82 roller, gjengitte og cinco-kategorier: abstrakter, widgets, dokumentstruktur, landemerker og levende regioner. Los roles abstractos no se aplican nunca en el marcado; sirven for organizar la jerarquía de la especificación. En la práctica, un proyecto típico utiliza entre 15 y 20 rolls distintos.

¿Cuál es la mejor jukseark for roller ARIA?

Avhengig av bruken. For å implementere en widget som er installert, WAI-ARIA Authoring Practices Guide for W3C er en komplett referanse. For konsulenter for konkrete bidrag, MDN Web Docs er mer omfattende. Para decidir si un rolle es necesario sobre un elemento HTML, la tabla HTML-ARIA del W3C es la fuente decisiva.

¿Vil du bruke ARIA om det finnes et HTML-element?

Nei. La primera regla de ARIA establece que si existe un elemento HTML con la semántica 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.

Los roller de widget beskrives interactives kontroller - knapp, avkrysningsboks, slider, tablist – og krever fokus og informasjon. Los rolls de landemerke beskrevet 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.

¿Mister roller ARIA cambian entre versiones de la especificación?

Sí. WAI-ARIA 1.2 añadió roller som “blockquote”, “caption”, “code”, “deletion”, “emphasis”, “insertion”, “meter”, “paragraph”, “strong”, “subscript” og “superscript”. Algunos roller han quedado obsoletos en versiones posteriores. Conviene comprobar en MDN o en la propia especificación si un roll sugue vigente antes de adoptarlo.

¿Har du jukseark for rollene ARIA basta para cumplir WCAG?

Nr. Los roller ARIA er en del av kriteriet 4.1.2 Nombre, rolle y valor, pero WCAG 2.2 inkluderer mange andre nødvendige: kontrast, foco visible, tamaño de objetivo, texto alternativeo, estructura de encabezados. Una jukseark ayuda a implementar roller correctamente, no a cumplir el conjunto de los criterios de conformidad.

Kilder og videre lesing

Cheat sheet — Wikipedia: Et jukseark (også jukseark) eller krybbeark eller jobbhjelp er et kortfattet sett med notater som brukes for rask referanse. Jukseark ble historisk sett brukt av studenter uten…

Tilgjengelighet på 5 minutter

Tilgjengelighetswidget med gratis plan for empezar Hoy Mismo