TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El atributo role="presentation" o role="none" ordena a las tecnologías asistivas que despojen al elemento de su significado semántico y lo traten como un bloque de texto plano. Jamás debe usarse en tablas de datos reales, listas o elementos informativos.
La destrucción del modelo de datos mental
Históricamente, los desarrolladores usaban tablas HTML para maquetar el layout completo de los emails o webs antiguas. Para silenciar la advertencia de los lectores de pantalla, usaban role="presentation". Hoy en día, algunos aplican este parche equivocadamente a tablas de datos reales (reportes, estadísticas) o a listas, destruyendo su estructura lógica.
El patrón erróneo: Código Accesible Deficiente
Al aplicar el rol de presentación, la tecnología asistiva dejará de indicar las filas, columnas y la viñeta, forzando a la persona usuaria a memorizar relaciones espaciales inexistentes.
<!-- MAL: Anulación de la semántica en una lista real -->
<ul role="presentation">
<li>Requisito 1: Cédula</li>
<li>Requisito 2: Formato único</li>
</ul>La Solución Accesible: Código Recomendado
Simplemente, no intercedas. Deja que el HTML nativo brille por su propia naturaleza.
<!-- BIEN: Semántica nativa preservada -->
<ul>
<li>Requisito 1: Cédula</li>
<li>Requisito 2: Formato único</li>
</ul>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, tabular hasta el componente ARIA personalizado. Verificar que el lector de pantalla anuncie correctamente el rol, nombre y estado actual. Si alguno de estos tres elementos falta o es incorrecto, la persona usuaria no podrá operar el componente de forma predecible.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
