Rol de presentación en un elemento interactivo

Silktide comprueba si hay elementos interactivos, como botones, enlaces y campos de formulario, que se hayan marcado como puramente decorativos. Marcar así un elemento interactivo elimina su significado para la tecnología de asistencia, mientras que sigue siendo clicable en pantalla.

<!-- Problema: el botón sigue funcionando, pero no se anuncia -->
<button role="presentation">Eliminar</button>

<!-- Solución: elimina el rol -->
<button>Eliminar</button>

Por qué es importante

Los roles de presentation y none indican a la que un elemento no tiene significado; existen para eliminar la semántica de cosas como las tablas de maquetación. Aplicados a un elemento interactivo, crean el peor tipo de barrera: un control en el que los usuarios que ven la pantalla y usan el ratón hacen clic a diario, pero que un presenta como contenido inerte o lo omite por completo. El usuario no tiene forma de saber ni siquiera que hay un botón ahí.

Cómo solucionarlo

Elimina el role="presentation" o role="none" del elemento interactivo. Los elementos nativos ya exponen el significado correcto sin ningún rol.
Si el elemento realmente no debe ser interactivo, haz que no lo sea: sustitúyelo por un elemento no interactivo como <div> y elimina cualquier tabindex.
Si intentabas suprimir el significado de un contenedor (por ejemplo, una tabla de maquetación alrededor de controles), pon el rol en el contenedor, no en los controles que contiene.

Cómo lo prueba Silktide

Encontrar cada elemento de la página con role="presentation" o role="none".
Determinar si el elemento es interactivo: un botón, un enlace o un área de un mapa de imágenes con href, un campo de formulario o cualquier elemento situado en el orden de tabulación del teclado con tabindex de 0 o superior.
Informar de cada elemento interactivo que lleve un rol de presentación.

Los elementos sacados del orden de tabulación con un tabindex negativo no se informan, ni tampoco los elementos decorativos como imágenes o gráficos SVG.

Solución de problemas

Un framework o una biblioteca añadió el rol

Algunas bibliotecas de interfaz aplican role="presentation" a contenedores internos y, en ocasiones, al elemento equivocado. Inspecciona el elemento informado: si realmente es operable con el ratón pero está silenciado para la tecnología de asistencia, la corrección corresponde a tu uso de la biblioteca o al proyecto original (upstream).

Esta comprobación no informa de nada aunque esperaba resultados

Las pruebas de ARIA pueden desactivarse por sitio web. Revisa la configuración avanzada del sitio web.