La accesibilidad web es fundamental para garantizar que todas las personas, incluidas aquellas que usan tecnologías de asistencia, puedan interpretar correctamente la información presentada en una página. Uno de los errores comunes es la eliminación de la semántica de los elementos estructurales mediante el uso del atributo role="presentation" en contenido que debería transmitir significado.
Este problema incumple el Criterio de Conformidad 1.3.1 de WCAG 2.1 (Información y Relaciones), ya que los lectores de pantalla y otras tecnologías de asistencia no pueden interpretar correctamente la estructura del contenido cuando se usa este rol de manera inapropiada.
En este artículo, exploraremos el Fallo F92, sus consecuencias en la accesibilidad y cómo corregirlo de manera efectiva.
Acerca de este fallo
El Fallo F92 ocurre cuando se aplica el rol presentation a un elemento que transmite información semántica importante, como una tabla de datos. El rol presentation en WAI-ARIA elimina la semántica de un elemento, lo que impide que los usuarios de tecnologías de asistencia comprendan la relación y estructura de los datos.
Este fallo se manifiesta principalmente en los siguientes escenarios:
- Se usa
role="presentation"en tablas de datos (<table>) que deberían conservar su semántica. - Se aplica
role="presentation"a listas estructuradas (<ul>,<ol>), eliminando la información de relación entre los elementos. - Se usa
role="presentation"en encabezados (<h1> - <h6>), afectando la jerarquía del contenido.
Si un usuario de lector de pantalla navega una tabla con role="presentation", el lector de pantalla no anunciará los encabezados, lo que dificulta la comprensión de los datos presentados.
Ejemplos
Ejemplo incorrecto: Uso de role="presentation" en una tabla de datos
<table role=»presentation»>
<caption>Frutas y sus colores</caption>
<tr>
<th>Nombre</th>
<th>Color</th>
</tr>
<tr>
<td scope=»row»>Plátano</td>
<td>Amarillo</td>
</tr>
<tr>
<td scope=»row»>Naranja</td>
<td>Naranja</td>
</tr>
</table>
❌ Problema: Se ha aplicado role="presentation" a una tabla de datos, eliminando su semántica. Como resultado, los lectores de pantalla no pueden interpretar los encabezados ni proporcionar contexto a los usuarios.
Solución correcta: Mantener la semántica de la tabla
<table>
<caption>Frutas y sus colores</caption>
<tr>
<th scope=»col»>Nombre</th>
<th scope=»col»>Color</th>
</tr>
<tr>
<td scope=»row»>Banana</td>
<td>Amarillo</td>
</tr>
<tr>
<td scope=»row»>Naranja</td>
<td>Naranja</td>
</tr>
</table>
✅ ¿Qué mejora?: Se eliminó el role="presentation" y se mantuvo la estructura de la tabla, permitiendo que los lectores de pantalla anuncien correctamente los encabezados.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Aplicar
role="presentation"a tablas de datos en lugar de solo a tablas de diseño. - Usar
role="presentation"en listas (<ul>,<ol>) eliminando la estructura de la lista. - Aplicar
role="presentation"en encabezados (<h1>a<h6>), impidiendo la correcta interpretación jerárquica del contenido.
Cómo evitar estos errores:
- Usa
role="presentation"solo en elementos de diseño sin significado semántico. - Mantén la semántica en estructuras importantes como tablas de datos y listas.
- Verifica la accesibilidad con herramientas como axe DevTools o WAVE para evitar eliminar información esencial.
Preguntas frecuentes sobre el Fallo F92
¿Cuándo es apropiado usar role="presentation"?
Se debe usar únicamente en tablas de diseño, elementos decorativos o contenido que no transmite significado estructural.
¿Cómo afecta role="presentation" a los lectores de pantalla?
Los lectores de pantalla ignoran la estructura del elemento y no anuncian la relación entre los datos, dificultando su comprensión.
¿Cómo verificar si role="presentation" está afectando la accesibilidad?
Puedes desactivar los estilos CSS o usar herramientas como WAVE para comprobar si la estructura sigue siendo comprensible.
¿Qué hacer si necesito eliminar estilos de una tabla sin afectar la accesibilidad?
Usa CSS para modificar la apariencia sin alterar la semántica, en lugar de role="presentation".
¿Qué alternativa usar en lugar de role="presentation" en tablas de datos?
Mantén la semántica y usa scope="col" y scope="row" en los encabezados para definir la relación entre datos.
¿Es obligatorio usar ARIA para mejorar la accesibilidad en tablas?
No siempre, ya que HTML proporciona una semántica adecuada. Sin embargo, aria-labelledby puede ser útil para describir tablas complejas.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F4: Fallo del Criterio de Conformidad 2.2.2 debido al uso de decoración de texto: parpadeo sin mecanismo que lo detenga en menos de cinco segundos
- Comprender el criterio de éxito 1.3.1 Información y relaciones
- El modelo de roles de las aplicaciones de Internet enriquecidas accesibles (WAI-ARIA)
- MDN Web Docs – Tables
Pruebas y validación
Procedimiento
- Inspeccionar el código HTML y buscar elementos con
role="presentation". - Verificar si se ha aplicado a elementos estructurales como
<table>,<ul>,<ol>o<h1>. - Usar herramientas como axe DevTools o NVDA para comprobar cómo se interpretan los elementos por los lectores de pantalla.
- Si el
role="presentation"elimina información esencial, se debe corregir eliminándolo o aplicandoscopeen su lugar.
Resultados esperados
- ✅ Si los elementos estructurales mantienen su semántica, el contenido cumple con WCAG 2.1.
- ❌ Si
role="presentation"elimina información semántica importante, el contenido falla el Criterio 1.3.1 y debe corregirse.
El uso inadecuado de role="presentation" en contenido con significado estructural puede afectar gravemente la accesibilidad, dificultando la navegación para usuarios de lectores de pantalla. Para cumplir con WCAG 2.1, es fundamental aplicar este rol únicamente en elementos decorativos y mantener la semántica en tablas de datos y listas.
¡Optimiza la accesibilidad de tu sitio hoy mismo! 🚀 Si necesitas ayuda para mejorar la accesibilidad web, contáctanos y te asesoraremos en la implementación de buenas prácticas. 💡