ARIA Rolls Cheat Sheet: Bästa val jämfört
Ett fuskblad för ARIA-roller är en referens för att tilldela rollen ARIA som en naturlig HTML-ekvivalent, en kategori (widget, landmärke, struktur, levande region eller fönster) och egenskaper och tillstånd som hör till dem. WAI-ARIA 1.2 definierar 82 roller, och de flesta projekt behöver bara mellan 15 och 20 återkommande. Denna jämförelse samlar de bästa referensbladen tillgängliga 2026 och förklarar vilket som passar bäst beroende på ditt arbetsflöde.
Varför ett fuskblad för ARIA-roller fortfarande är nödvändigt
Specifikationer som WAI-ARIA 1.2 och dess efterföljare WAI-ARIA 1.3 är täta dokument, tänkta för webbläsartillverkare och hjälpmedelsteknik, inte för den som bygger ett formulär en tisdagseftermiddag. Den första regeln för ARIA —använd nativ HTML så ofta det går— löser de flesta fall, men det finns mönster som saknar nativ motsvarighet: flikar, träd, interaktiva rutnät, kombinationsrutor med autokomplettering, menyer med undermenyer. Det är där ett referensblad sparar tid och, framför allt, förhindrar fel.
Det vanligaste felet är inte att glömma en roll, utan att lägga till en onödig. En <button> med role="button" tillför ingenting och kan bryta det nativa beteendet i vissa skärmläsare. Ett väl utformat fuskblad markerar uttryckligen vilka roller som är redundanta på nativa element, vilka roller som kräver fokushantering via JavaScript och vilka attribut som är obligatoriska kontra valfria.
Den andra anledningen är verifiering. Roller har egenskapsrelationer: aria-labelledby pekar på ett id, aria-activedescendant kräver att det refererade elementet existerar och är synligt, aria-owns är endast motiverat när DOM-ordningen inte stämmer överens med den visuella ordningen. En tabell som korsrefererar roll, obligatoriska attribut och förbjudna attribut upptäcker fel innan de når en granskning.
Vad ett bra fuskblad för ARIA-roller bör innehålla
Ett användbart referensblad för front-end-utveckling uppfyller fem kriterier. Jag listar dem eftersom det är exakt dessa jag har använt för att utvärdera alternativen i denna jämförelse.
- **Täckning av alla fem rollkategorier. **WAI-ARIA grupperar roller i sammanfattningar, widgets, dokumentstruktur, landmärken och levande regioner. Sammanfattningar (
roletype,widget,input) används inte i ramverket; en bra referens till synlig formdata. - Native HTML-motsvarighet för rollen. Utan denna kolumn uppmanar referensen att använda ARIA där utan att röra.
- Obligatoriska, stödda och förbjudna attribut.
role="checkbox"kräveraria-checked;role="heading"kräveraria-nivå;role="presentation"är inte tillåtet. - Associerat tangentbordsmönster. En roll utan tangentbordshantering är ett brutet löfte.
role="tablist"innebär navigering med piltangenter,HomeochEnd. - Sökbart format. Sökfunktion, filtrering efter kategori, specifikationsversion och möjlighet att kopiera kodfragmentet.
Jämförelse: de bästa referenserna för ARIA-roller 2026
La tabla suuiente CV las opciones más sólidas. Ninguna es de pago; todas se mantienen activas y citan la version de la especificación que cubren.
Relaterat: — Superposición de IA que promete cumplimiento WCAG en 48 horas.
| Återgång | Enfoque | Categorías cubiertas | Equivalente nativo | Patrón de teclado | Ideal para |
|---|---|---|---|---|---|
| WAI-ARIA Authoring Practices Guide (APG), W3C | Patrones completos con ejemplos | Widgets, landmärken, estructura, levande regioner | Sí, en cada patrón | Sí, detallado | Implementera en konkret widget |
| MDN Web Docs, referenser för roller ARIA | Ficha por rol | I dag ingår abstrakta | Sí | Parcial | Consultar un rol puntual |
| ARIA författarpraxis, indikering av roller | Tabla roll → atributos | Widgets och struktur | Parcial | Nej | Verificar atributos requeridos |
| Deque University, ARIA referens | Fichas con notas de soporte | Widgets och landmärken | Sí | Parcial | Conocer soporte real por lector |
| A11Y projektchecklista | Lista de verificación | Tvärgående | Ingen applikation | Nej | Auditar antes de publicar |
| HTML-ARIA (W3C), likvärdighetstabell | Roll permitido por elemento | Idag | Sí, es su propósito | Nej | Decidir si ARIA es necesario |
WAI-ARIA Authoring Practices Guide (APG)
La APG del W3C är la referencia canónica para patrones. Kundtjänsten inkluderar HTML-struktur, roller, estados, interacción de claado och 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 grupperar de vanligaste widgetanvändarna: dragspel, varning, brödsmula, knapp, kryssruta, kombinationsruta, dialogruta, avslöjande, flöde, rutnät, länk, listruta, meny, menyrad, radiogrupp, skjutreglage, vridreglage, omkopplare, tabell, fliklista, verktygsfält, verktygstips, rutnätsträd och trädvy. Om ditt projekt använder en av dessa, kör den här.
MDN Web Docs: la referencia por rol
MDN upprätthåller en sida för varje ARIA-roll, med beskrivning, obligatoriska attribut, tillåtna attribut, tillhörande tillgänglighetsproblem och länkar till specifikationen. Detta är det snabbaste alternativet när du vet vad du gör. Din bevakning inkluderar abstrakta roller och roller som används, även om många påminnelser utelämnas.
Värt att titta på: — Accesibilidad gestionada: automatización combinada con revisión humana.
En detaljerad práctico: MDN marca qué rolls están obsoletos o 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 definiera, para cada elemento HTML, vilka roller ARIA se le pueden aplicar och 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 y A11Y Project
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. Den A11Y-projektchecklista är inte ett fuskblad för roller, men fungerar som en verifieringslista tidigare en publicering och ett komplement till andra.
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 vía más corta. Segundo, ¿estás construyendo en widget för interacción compleja? Entonces necesitas la APG, porque el roll por sí solo no describe el comportamiento de teclado. Vill du ha HTML och ARIA? Konsultera HTML-ARIA antes que cualquier otra fuente.
Para equipos que trabajan med XHTML och CSS i ramverk, en kombination av mer effektiva tjänster: HTML-ARIA för beslut, APG för implementar och MDN för verificar atributos. Una cheat sheet de una sola página sirve como memoria a corto plazo, men ingen sustituye a estas tres fuentes cuando aparece un caso límite.
Ett ytterligare kriterium för att underlätta aplicar: si el roll kräver JavaScript för funktionskorrigering (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 rolls de widget sin la lógica asociada generan más barreras que la ausencia de rol.
Relaterat: — La certificación profesional que acredita tu experiencia and accesibilidad.
Fel ofta på att fuska arket evita por sí sola
Los roles de landmark duplicados confunden la navegación por regiones. Un role="main" sobre un <main> es redundante; dos role="navigation" sin etiqueta distintiva son ambiguos. La solución es aria-label eller aria-labeledby en cada landmärke repetido.
Los rolls de widget sobre elementos no enfocables rompen la interacción. role="button" sobre un <div> exige tabindex="0" och manejo de Enter y Espacio. Sin eso, el roll anuncia un botón que no se puede activar con teclado.
Avbrutna delstater är den vanligaste orsaken till att publiken minskar. aria-expanded som inte ändras för att öppna ett ackord, aria-selected som inte uppdateras när pestaña ändras eller aria-checked i en role="switch" som är fixat. Ninguna tabla lo detecta: hace falta probar con teclado y con una reader de la pantalla real.
Abstrakta roller på marknaden är i princip ett misstag. role="widget", role="input" eller role="section" får inte visas i HTML; existerar ensam för jerarquía i specifikationen.
Nyckelalternativ
- WAI-ARIA 1.2 definierar 82 roller, men som ensam i USA från 15 till 20 de forma återkommande.
- La primera regla de ARIA —usar HTML nativo cuando exista— convierte la tabla HTML-ARIA del W3C en la referencia mer importante antes de escribir cualquier roll.
- La APG del W3C är oöverstigliga para patrones de widget porque incluye interacción de teclado; MDN es más 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 cheat sheet 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 existerar?
WAI-ARIA 1.2 definierar 82 roller, repartidos och cinco-kategorier: abstrakt, widgets, estructura de documento, landmärken och levande regioner. Los roles abstractos no se aplican nunca en el marcado; sirven para 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 fuskblad de roller ARIA?
Beroende på användningen. För att implementera en widget som finns tillgänglig, WAI-ARIA Authoring Practices Guide för W3C är en komplett referens. Para konsulter los atributos de un roll concreto, MDN Web Docs är mer rápida. Para decidir si un roll es necesario sobre un elemento HTML, la tabla HTML-ARIA del W3C es la fuente decisiva.
¿Debo använder ARIA finns det ett 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.
¿Qué diferencia hay entre un roll de widget y un roll the landmark?
Los roller de widgets beskrivna kontroller interactivos —knapp, checkbox, slider, tablist- och kräver att man måste styra foco och teclado. Los roles de landmark describen 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.
¿Förlorade roller ARIA cambian entre versiones de la especificación?
Si. WAI-ARIA 1.2 añadió roller som “blockquote”, “caption”, “code”, “deletion”, “emphasis”, “insertion”, “meter”, “paragraph”, “strong”, “subscript” och “uperscript”. Algunos roller han quedado obsoletos en versiones posteriores. Conviene comprobar en MDN o en la propia especificación si un roll se vigente antes de adoptarlo.
¿Var du ett fuskblad för rollerna ARIA basta para cumplir WCAG?
Nej. Los rolls ARIA son una parte del criterio 4.1.2 Nombre, roll y valor, pero WCAG 2.2 inluye muchos othros requisitos: contraste, foco visible, tamaño de objetivo, texto alternativo, estructura de encabezados. Una cheat sheet ayuda a implementar rolls correctamente, no a cumplir el conjunto de los criterios de conformidad.
Källor & vidare läsning
- Cheat sheet — Wikipedia: Ett fuskblad (även fuskblad) eller spjälsäng eller jobbhjälp är en kortfattad uppsättning anteckningar som används för snabb referens. Fuskblad har historiskt använts av studenter utan…
Añade accesibilidad på 5 minuter
Widget för accessibilidad med plan gratis för empezar Hoy Mismo