También disponible en: English · Português · Français · العربية
Roles ARIA: cuál necesita cada elemento y cuál ya tiene
Consulta cualquier elemento HTML y cualquier role ARIA y averigua si debes escribirlo, si puedes, o si el elemento ya es esa cosa.
¿Qué es un role de ARIA?
Un role de ARIA le dice a la tecnología de asistencia qué es un trozo de marcado: un botón, una zona de navegación, un encabezado, un diálogo. Se escribe como role="button" y cambia cómo lo anuncia un lector de pantalla y qué puede hacer con él quien lo usa.
WAI-ARIA define los roles. Otra especificación distinta, ARIA in HTML, responde a la pregunta con la que llega la gente de verdad —qué roles pueden ir en qué elemento HTML— y lo hace en una tabla que cubre 139 elementos. Esa tabla es la base de esta página y es la que conviene leer, porque los roles no son intercambiables entre elementos.
Lo más útil de todo pasa fácilmente desapercibido: 81 de esos 139 elementos ya llevan un role sin atributo ninguno, y la cabecera de la propia tabla dice que asignarlos en el marcado está desaconsejado. Un elemento button ya es un botón. Un h1 ya es un encabezado con su nivel. Casi siempre, la respuesta correcta a «qué role pongo aquí» es ninguno.
Cómo usarla
- Escribe el elemento. Solo el nombre de la etiqueta; los signos de menor y mayor y las mayúsculas dan igual. Donde la especificación matiza un elemento, el nombre a secas lleva a la fila matizada: escribir a te da la regla de a with href.
- Escribe el role que ibas a poner. Obtienes una de cuatro respuestas: el elemento ya lo tiene, está permitido, no se permite aquí, o la regla es condicional y no hay respuesta rotunda.
- Y luego mira el índice inverso de abajo. Lista los elementos que ya tienen ese role sin atributo, aparte de los que simplemente lo aceptan. Suele ser la mejor forma de resolver el problema.
Redundante no es lo mismo que incorrecto
Escribir role="button" en un elemento button es marcado válido. No es un error y no rompe nada. La especificación lo marca como desaconsejado porque no aporta nada y porque puede desincronizarse: si luego cambias el elemento, el role se queda ahí describiendo algo que ya no existe. Esta página informa de ese caso como un veredicto propio en vez de mezclarlo con los errores de verdad, porque decirle a alguien que su marcado correcto está roto es peor que no decir nada.
Los casos realmente prohibidos son otra cosa. 51 elementos no aceptan ningún role más allá del que ya tienen —main, body, html, base, caption y compañía—, así que role="navigation" en un main sencillamente no se permite. Otros 37 solo aceptan un conjunto concreto: un a with href admite button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab o tree, y nada más. Y 41 elementos, los lienzos en blanco como span y abbr, aceptan cualquier role.
Quedan los roles en sí, de los que la tabla nombra 75. Si necesitas uno, el índice inverso es el atajo: pregunta qué elementos ya son un botón antes de decidir fabricar uno con un div.
Diez elementos sobre los que esta página no se pronuncia
Diez de las 139 reglas están escritas con una condición, y la herramienta se niega a dar un veredicto sobre ellas en vez de adivinar. td, th y tr dependen del role del elemento table que los contiene. div depende de si es hijo directo de un dl. figure depende de si tiene un figcaption como descendiente. label depende de si está asociado a un elemento etiquetable.
En todos esos casos la especificación se abstiene de dar una regla incondicional, así que una herramienta que soltara un sí o un no seguro se la estaría inventando. En su lugar se muestra la frase original, para que la leas contra tu marcado real. Esa es la respuesta honesta, y por eso la página enseña el texto de origen de cada elemento y no solo su propio resumen.
Dos límites más que conviene decir. Esto es solo la tabla de elementos: ARIA in HTML tiene otras dos, una sobre características de HTML y otra sobre qué descendientes admite cada role, y ninguna está cubierta aquí. Y la página te dice qué está permitido, no qué es buena idea: un role permitido puede seguir siendo el equivocado, y ninguna tabla sabe si tu componente se comporta de verdad como una pestaña.
¿Por qué es gratis?
La tabla viaja con la página como unos pocos kilobytes y cada consulta corre en tu propio navegador. Nada de lo que escribes se sube, no se registra nada y no hay cuenta que crear.
Sin registro, sin límites y sin marca de agua en nada de lo que copies.