ARIA Rolles Cheat Sheet: Bedste valg sammenlignet

Af Niquelao Resource Desk · Opdateret 28. september 2026

Et snydeark for aria-roller er en reference, der knytter hver ARIA-rolle til dens tilsvarende naturlige HTML-element, dens kategori (widget, vartegn, struktur, live-region eller vindue) samt de tilhørende egenskaber og tilstande. WAI-ARIA 1.2 definerer 82 roller, og de fleste projekter kun har brug for mellem 15 og 20 roller tilbagevendende. Denne sammenligning samler de bedste referencer tilgængelige i 2026 og forklarer, hvilken der passer til dit arbejdsflow.

Hvorfor et snydeark til ARIA-roller stadig er nødvendigt

Specifikationer som WAI-ARIA 1.2 og efterfølgeren WAI-ARIA 1.3 er tunge dokumenter, skrevet til browserudviklere og producenter af hjælpemidler, ikke til den, der koder en formular en tirsdag eftermiddag. Den første regel for ARIA —brug altid naturlig HTML, hvis det findes— løser de fleste tilfælde, men der er mønstre, som ikke har et naturligt modstykke: faner, træstrukturer, interaktive gitre, comboboxes med autoudfyldelse og menuer med undermenuer. Det er her, et snydeark sparer tid og især forebygger fejl.

Den mest almindelige fejl er ikke at glemme en rolle, men at tilføje en unødvendig. En <button> med role="button" bidrager ikke med noget og kan ødelægge den naturlige adfærd i nogle skærmlæsere. Et vellavet snydeark markerer eksplicit, hvilke roller der er redundante på naturlige elementer, hvilke roller der kræver fokusstyring via JavaScript, og hvilke attributter der er obligatoriske kontra valgfrie.

La segunda razón es la verificación. Rollerne har ejerskabsrelationer: aria-labelledby peger på et id, aria-activedescendant kræver, at det refererede element eksisterer og er synligt, og aria-owns er kun berettiget, når DOM-rækkefølgen ikke stemmer overens med den visuelle rækkefølge. En tabel, der krydser roller, påkrævede attributter og forbudte attributter, kan opdage fejl, før de når en audit.

Hvad et godt snydeark til ARIA-roller bør indeholde

Et nyttigt snydeark til front-end udvikling opfylder fem kriterier. Jeg lister dem her, da det er præcis dem, jeg har brugt til at evaluere mulighederne i denne sammenligning.

**Dækning af alle fem rollekategorier. **WAI-ARIA grupperer roller i oversigter, widgets, dokumentstruktur, vartegn og levende regioner. Resuméer (rolletype, widget, input) bruges ikke i frameworket; en god reference til synlige formdata.
Native HTML-ækvivalent for rollen. Uden denne kolonne beder referencen om at bruge ARIA der uden at røre.
Påkrævede, understøttede og forbudte attributter. role="checkbox" kræver aria-checked; role="heading" kræver aria-niveau; role="præsentation" er ikke tilladt.
Patrón de teclado asociado. En rolle uden teclado management er et løfte inkluderet. role="tablist" implicerer forskellige elementer/derecha, Home og End.
Søgbart format. Buscador, filtrer efter kategori, specifikationsversion og mulighed for at kopiere kodefragmentet.

Sammenligning: De bedste referencer til ARIA-roller i 2026

Følgende tabel opsummerer de mest solide muligheder. Ingen af dem koster penge; alle er aktive og angiver, hvilken version af specifikationen de dækker.

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

Ressource	Fokus	Dækkede kategorier	Naturlig ækvivalent	Patrón de teclado	Ideel til
WAI-ARIA Authoring Practices Guide (APG), W3C	Patrones completos con ejemplos	Widgets, vartegn, estructura, levende regioner	Ja, i hvert mønster	Ja, detaljeret	Implementer en konkret widget
MDN Web Docs, referencer til roller ARIA	Ark per rolle	Alle, inkl. abstrakte	Sí	Parcial	Opslag af en enkelt rolle
ARIA Authoring Practices, indice de roles	Tabel: rolle → attributter	Widgets og struktur	Parcial	Nej	Verificering af påkrævede attributter
Deque University, ARIA reference	Ark med supportnoter	Widgets og vartegn	Sí	Parcial	Kendskab til reel skærmlæser-support
A11Y projekttjekliste	Tjekliste	Tværgående	Ingen applikation	Nej	Audit før publicering
HTML-ARIA (W3C), ækvivalentabel	Tilladt rolle per element	Alle	Sí, es su propósito	Nej	Beslutte om ARIA er nødvendigt

WAI-ARIA Authoring Practices Guide (APG)

La APG del W3C er la reference canónica para patrones. Patronen omfatter HTML-struktur, roller, estados, interacción de teclado and un emplo functional. 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 mest almindelige widgetbrugere: harmonika, alarm, brødkrumme, knap, afkrydsningsfelt, kombinationsboks, dialogboks, afsløring, feed, gitter, link, listeboks, menu, menulinje, radiogruppe, skyder, drejeknap, kontakt, tabel, faneliste, værktøjslinje, værktøjstip, gittertræ og trævisning. Hvis dit projekt bruger en af disse, så kør den her.

MDN Web Docs: la reference por rol

MDN vedligeholder en side for hver ARIA-rolle med beskrivelsen, påkrævede attributter, tilladte attributter, tilhørende tilgængelighedsproblemer og links til specifikationen. Dette er den hurtigste mulighed, når du ved, hvad du laver. Din dækning inkluderer abstrakte roller og roller i brug, selvom mange påmindelser er udeladt.

Værd at se: — Accesibilidad gestionada: automatisering combinada con revision humana.

En detaljeret práctico: MDN marca qué roller están forældede eller riesgo de eliminación en fremtidige versioner af especificación. Consultar esa marca evita adoptar un roll que desaparecerá.

HTML-ARIA: tabla que evita ARIA incesario

Den especificación HTML-ARIA del W3C definerer, para cada elemento HTML, hvilke roller ARIA se le pueden aplicar og cuáles søn 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-projekttjekliste er ikke et snydeark for roller, men fungerer som en liste over bekræftelse forud for offentliggørelse og komplementering på forsiden.

Cómo elegir según tu caso

Beslutningen afhænger af tres preguntas. Primero, ¿ya sabes qué roll necesitas? Si la respuesta es sí, MDN es la vía más corta. Segund, ¿estás construyendo en widget med interacción compleja? Entonces necesitas la APG, porque el roll por sí solo no describe el comportamiento de teclado. Er du entreprenør i HTML og ARIA? Konsulter HTML-ARIA for at finde en anden fremtid.

Para equipos que trabajan med XHTML og CSS sine frameworks, en kombination af mere effektiv suele ser: HTML-ARIA til at bestemme, APG for implementar og MDN for verificar attributter. En cheat sheet de una sola pagina sirve como memoria a corto plazo, men ingen sustituye a estas tres fuentes cuando aparece un caso limite.

Et yderligere kriterium, der giver mulighed for at aplicar: en rolle, der kræves JavaScript til funktionskorrigering (gestión de foco, actualización de aria-expanded, sincronización de aria-selected), trátalo como una decisión de arquitectura, to como decorativo un atribut. Los roller de widget sin la lógica asociada generan más barreras que la ausencia de rol.

Relateret: — Den professionelle certificering que acredita tu experiencia and accessibilidad.

Errores frecuentes que ninguna cheat sheet evita por sí sola

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

Widgets roller, der ikke er en focable, spiller en interaktion. role="button" er angivet med <div> som tabindex="0" og manejo de Enter og Espacio. Det betyder, at en rolle anuncia un botón que no se puede activar con teclado.

Afbrudte stater er den mest almindelige årsag til tilbagegang i publikum. aria-udvidet som ikke ændrer sig for at åbne en akkord, aria-valgt som ikke opdateres når pestaña ændres eller aria-checket i en rolle="switch", som er fast. Ninguna tabla lo detecta: har falta probar con teclado y con una reader de la pantalla real.

Værd at se: — med en gratis plan for empezar hoy mismo.

Abstrakte roller på markedet er principielt en fejl. role="widget", role="input" eller role="section" må ikke vises i HTML; eksisterer alene for specifikationens jerarquía.

Key Takeaways

WAI-ARIA 1.2 definerer 82 roller, pero la mayoría de proyectos solo usa entre 15 y 20 de forma recurrente.
La primera regla de ARIA —usar HTML nativo cuando exista— convierte la tabla HTML-ARIA del W3C en la reference mers importante antes de escribir cualquier roll.
La APG del W3C er uoverkommelige til beskyttelse af widget-porque inkl. interacción de teclado; MDN es mere rápida para consultar un roll concreto.
Un roll sin gestion de foco y sin actualización de estados genera más barreras de accesibilidad que no usar ARIA.
Ninguna snydeark 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, repartidos og cinco kategorier: abstrakter, widgets, opbygning af dokumentet, vartegn 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 snydeark de roller ARIA?

Afhænger af brugen. For at implementere en widget, der er tilsluttet, WAI-ARIA Authoring Practices Guide fra W3C er en komplet reference. For konsulenter for konkrete egenskaber, MDN Web Docs er mere rápida. Para decidir si un roll es necesario sobre un elemento HTML, la tabla HTML-ARIA del W3C es la fuente decisiva.

¿Vil du bruge ARIA, findes der et HTML-element?

Nej. 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.

Widgets roller, der er beskrevet interaktive kontroller — knap, afkrydsningsfelt, skyder, tabliste – og kræves betjening af foco og teclado. Los roller de landmark describen regiones de la página —main, navigation, banner, contentinfo— y sirven para la navegación por regiones. En mismo elemento no debería cumplir ambas funciones.

¿Los 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 forældede en versiones posteriores. Conviene comprobar en MDN o en la propia especificación si un roll vigente antes de adoptarlo.

¿Ved du et snydeark for roller ARIA basta para cumplir WCAG?

Nr. Los roller ARIA er en del af kriteriet 4.1.2 Nombre, roll y valor, men WCAG 2.2 indeholder mange andre nødvendige: kontrast, foco visible, tamaño de objetivo, texto alternativo, estructura de encabezados. Et snydeark ayuda a implementar roller correctamente, no a cumplir el conjunto de los criterios de conformidad.

Kilder og yderligere læsning

Snydeark — Wikipedia: Et snydeark (også snydeark) eller krybbeark eller jobhjælp er et kortfattet sæt noter, der bruges til hurtig reference. Snydeark blev historisk brugt af studerende uden…

Adgang på 5 minutter

Accessibilidad widget med en gratis plan for empezar hoy mismo