Asegúrate de que los elementos marcados como presentacionales se ignoren de manera consistente

Los atributos role="none" y role="presentation" indican a los navegadores que eliminen el significado semántico de un elemento, quitándolo efectivamente del árbol de accesibilidad. Esto es útil cuando los elementos se usan puramente para el diseño visual y no contienen contenido significativo para los usuarios de tecnología asistiva.

Sin embargo, la especificación WAI-ARIA define condiciones específicas bajo las cuales esta eliminación es anulada. Si un elemento presentacional tiene un atributo ARIA global (como aria-hidden, aria-label, aria-live, aria-describedby, etc.) o es enfocable (ya sea de forma nativa, como un <button>, o a través de tabindex), el navegador debe ignorar el rol presentacional y mantener el elemento en el árbol de accesibilidad. Esto se conoce como un conflicto de rol presentacional.

Cuando ocurre este conflicto, los usuarios de lectores de pantalla pueden encontrarse con elementos que estaban destinados a estar ocultos pero que en su lugar son anunciados, potencialmente con contexto confuso o faltante. Esto crea una experiencia desorientadora, particularmente para usuarios ciegos y usuarios con baja visión que dependen de los lectores de pantalla para entender la estructura de la página.

Esta regla está marcada como una práctica recomendada de Deque. Aunque no está mapeada a un criterio de conformidad WCAG específico, apoya el objetivo más amplio de asegurar que el árbol de accesibilidad represente con precisión la intención del autor, lo cual contribuye a una experiencia coherente bajo principios WCAG como 1.3.1 Información y relaciones y 4.1.2 Nombre, función, valor.

Cómo solucionarlo

Para cada elemento con role="none" o role="presentation", asegúrate de que:

1. No haya atributos ARIA globales presentes. Elimina atributos como aria-hidden, aria-label, aria-live, aria-describedby, aria-atomic, y cualquier otro atributo ARIA global.
2. El elemento no sea enfocable. No uses elementos nativamente enfocables (como <button>, <a href>, o <input>) con un rol presentacional. Tampoco añadas tabindex a un elemento presentacional.

Si el elemento genuinamente necesita un atributo ARIA global o necesita ser enfocable, entonces no debería tener un rol presentacional: elimina role="none" o role="presentation" en su lugar.

Ejemplos

Incorrecto: elemento presentacional con un atributo ARIA global

El atributo aria-hidden="true" es un atributo ARIA global, lo cual crea un conflicto con role="none":

<li role="none" aria-hidden="true">Decorative item</li>

Incorrecto: elemento nativamente enfocable con un rol presentacional

Un <button> es nativamente enfocable, por lo que su rol presentacional será ignorado por el navegador:

<button role="none">Click me</button>

Incorrecto: elemento presentacional hecho enfocable mediante tabindex

Añadir tabindex="0" hace que el elemento sea enfocable, anulando el rol presentacional:

<img alt="" role="presentation" tabindex="0">

Correcto: elemento presentacional sin conflictos

Estos elementos no tienen atributos ARIA globales y no son enfocables, por lo que serán eliminados correctamente del árbol de accesibilidad:

<li role="none">Layout item</li>

<li role="presentation">Layout item</li>

<img alt="" role="presentation">

Correcto: eliminando el rol presentacional cuando se necesita el enfoque

Si el elemento necesita ser enfocable, elimina el rol presentacional y dale un nombre accesible apropiado en su lugar:

<button aria-label="Submit form">Submit</button>

Learn more:

Deque Reference

Deque University - How To Fix

→