01
Buscar el token concreto
Se admite button, role=button o aria-expanded. El filtro separa roles y atributos de la lista local sin descargar una referencia externa.
Referencia para desarrolladores
roles ARIAy atributos esenciales
Busca por nombre de rol o atributo aria-* y revisa el marcado, la interacción y la definición de origen.
roles ARIA
Coincidencias
button
Rolbutton inicia una acción; el elemento nativo ya incluye foco y activación por teclado.
Teclado: HTML nativo incluye teclas básicas; un rol propio necesita lógica equivalente.
Precaución: No dupliques un rol si el elemento nativo ofrece la misma semántica y conducta.
Requisitos clave: Ninguno
Ejemplo HTML
<button type="button">Save</button>Probar control real
Activado 0 veces
La búsqueda permanece en esta página; los enlaces externos solo se abren al pulsarlos.
Categoría
1 de 16 entradas
WAI-ARIA 1.2 · 6 jun 2023Entradas revisadas el 23 sep 2026
En accesibilidad web, antes de añadir semántica a un componente propio, comprueba si necesitas roles ARIA. Un button o input nativo ya trae funciones de teclado; asignar role a un div no crea esas funciones.
Esta selección de roles ARIA reúne estados y propiedades con ejemplos breves. Para tabs, diálogos y combobox personalizados, los enlaces APG explican los patrones completos de foco.
Por qué consultar estos roles ARIA
Cada ejemplo muestra también qué comportamiento falta y de dónde sale la regla.
Usar HTML nativo cuando alcanza
Las fichas button y checkbox enseñan primero los elementos nativos. Los roles ARIA sobre un div no añaden foco ni activación con Enter y Espacio.
Conectar estado y panel
El ejemplo aria-expanded muestra tanto el botón como el contenido controlado. Los roles ARIA y sus estados deben cambiar al mismo tiempo que cambia la interfaz visible.
De una palabra a un componente usable
02
Leer la interacción antes de copiar
Un ejemplo de roles ARIA es solo el punto de partida semántico. Para tab, dialog y combobox sigue el patrón APG de teclado y foco.
03
Verificar versión y probar
Las fichas apuntan a la definición fija WAI-ARIA 1.2. Prueba después el componente real con teclado y tecnología de asistencia.
Definiciones ligadas a la implementación
Dos índices en la misma búsqueda
Ocho roles y ocho atributos o estados aria-* aparecen juntos; que falte un token aquí no significa que no exista en el estándar.
Marcado y fuente directa
Cada ficha tiene un fragmento HTML y un enlace a WAI-ARIA 1.2; los patrones interactivos también enlazan a APG.
El estado no crea conducta
aria-expanded informa si algo está abierto, pero no lo abre. La aplicación debe actualizar tanto el panel como el valor.
Límites de esta consulta
- Solo dieciséis entradas
- Esta referencia de roles ARIA y atributos es una selección. Busca en la especificación W3C completa cuando un término no aparezca aquí.
- El fragmento no completa el widget
- Copiar tab, dialog o un checkbox personalizado no implementa flechas, foco ni cambios de estado. Hay que construirlos y probarlos.
- No certifica WCAG
- La página no analiza tu DOM ni ejecuta un lector de pantalla. Para colores usa la calculadora de contraste separada y prueba las tareas reales con personas.
Preguntas sobre roles ARIA
¿Cuándo conviene usar un rol ARIA en lugar de HTML nativo?
Si un elemento HTML nativo ya da la semántica y el comportamiento buscados, úsalo. Los roles ARIA sirven cuando el HTML no expresa el widget y su interacción se implementa aparte.
¿role=button permite usar el teclado automáticamente?
No. role=button cambia la información que recibe la tecnología de asistencia, pero no añade foco ni Enter o Espacio a un div. En general, conviene usar button.
¿En qué se diferencian aria-label y aria-labelledby?
aria-label incluye el texto del nombre en el propio atributo. aria-labelledby apunta a los ID de elementos cuyo texto da el nombre. Si hay etiqueta visible, valora primero label o texto nativo.
¿Qué atributos necesita un rol ARIA?
Cada rol tiene estados y relaciones distintas. La ficha enumera lo esencial y su enlace a WAI-ARIA 1.2 permite consultar todos los requisitos normativos.
¿Añadir ARIA garantiza cumplir WCAG?
No. Una lista de roles ARIA orienta sobre semántica; la conformidad exige revisar contenido, foco, teclado y la experiencia con tecnologías de asistencia en el sitio real.
¿Falta una entrada o hay algún error?
Consulta roles ARIA ahora
Elige un token, compara con HTML nativo y abre la definición W3C antes de implementarlo.