Los roles de ARIA utilizados deben cumplir con valores válidos

Cuando asignas un atributo role a un elemento HTML, estás diciéndole explícitamente a los navegadores y tecnologías asistivas qué representa ese elemento y cómo deberían interactuar los usuarios con él. Si el valor está mal escrito, es inventado o hace referencia a un role abstracto (como widget, roletype, landmark o structure), el navegador no puede mapear el elemento a ningún role conocido. El resultado es que las tecnologías asistivas ignoran el role completamente o recurren a la semántica nativa del elemento, que puede no reflejar tu intención.

Este es un problema de accesibilidad crítico. Los usuarios que dependen de lectores de pantalla — incluyendo personas que son ciegas, sordociegas o tienen discapacidades motoras — dependen de información precisa sobre los roles para navegar e interactuar con una página. Un botón anunciado como un elemento genérico, o un landmark de navegación que no se reconoce en absoluto, puede hacer que una interfaz sea confusa o completamente inutilizable.

Esta regla se relaciona con el Criterio de Éxito 4.1.2 de WCAG: Nombre, Role, Valor (Nivel A), que requiere que el role de cada componente de interfaz de usuario se pueda determinar programáticamente. Se aplica a WCAG 2.0, 2.1 y 2.2, así como a EN 301 549 (Sección 9.4.1.2).

Cómo solucionarlo

1. Verifica la ortografía. La causa más común de roles inválidos es un simple error tipográfico, como role="buton" en lugar de role="button".
2. Usa solo roles definidos. Cada valor debe corresponder a un role real en la especificación WAI-ARIA.
3. Nunca uses roles abstractos. Los roles abstractos como widget, roletype, landmark, structure, input, range, section, sectionhead, select, command y composite existen solo como categorías conceptuales en la especificación. No deben usarse en el marcado.
4. Considera si necesitas role en absoluto. Los elementos HTML nativos como <button>, <nav> y <table> ya tienen roles implícitos. Usa elementos nativos siempre que sea posible en lugar de agregar atributos role a elementos genéricos <div> o <span>.

Roles válidos por categoría

Aquí tienes un resumen de roles ARIA válidos y no abstractos que puedes usar:

• Estructura de documento: application, article, blockquote, caption, code, definition, deletion, document, emphasis, feed, figure, generic, group, heading, img, insertion, list, listitem, mark, math, meter, none, note, paragraph, presentation, separator (cuando no es enfocable), strong, subscript, superscript, term, time, toolbar, tooltip
• Landmark: banner, complementary, contentinfo, form, main, navigation, region, search
• Región activa: alert, log, marquee, status, timer
• Widget: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, searchbox, separator (cuando es enfocable), slider, spinbutton, switch, tab, tabpanel, textbox, treeitem
• Widget compuesto: combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid
• Tabla: cell, columnheader, row, rowgroup, rowheader, table
• Ventana: alertdialog, dialog

Ejemplos

Incorrecto: Role mal escrito

Un error tipográfico en el valor del role significa que las tecnologías asistivas no lo reconocerán.

<div role="nagivation">
  <a href="/">Inicio</a>
  <a href="/about">Acerca de</a>
</div>

Incorrecto: Role inventado

Usar un valor que no existe en la especificación ARIA.

<div role="footer-container">
  <p>© 2024 Example Corp</p>
</div>

Incorrecto: Role abstracto

Los roles abstractos no están permitidos en el marcado.

<div role="widget">
  <button>Guardar</button>
</div>

Correcto: Role ARIA válido

<div role="navigation" aria-label="Principal">
  <a href="/">Inicio</a>
  <a href="/about">Acerca de</a>
</div>

Correcto: Usar HTML nativo en lugar de un role

Cuando un elemento nativo ya tiene la semántica que necesitas, préfierelo sobre un atributo role.

<nav aria-label="Principal">
  <a href="/">Inicio</a>
  <a href="/about">Acerca de</a>
</nav>

Correcto: Role de widget válido

<div role="tablist" aria-label="Configuración">
  <button role="tab" aria-selected="true" aria-controls="panel-1">General</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Avanzado</button>
</div>
<div role="tabpanel" id="panel-1">Contenido de configuración general</div>
<div role="tabpanel" id="panel-2" hidden>Contenido de configuración avanzada</div>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→