F92Usar role="presentation" en contenido que tiene significado

Por qué es importante

Los elementos HTML dicen qué es cada cosa: una tabla, una lista de 5 elementos, un encabezado de nivel 2. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) usa esa información para orientarse.

Con role="presentation", el elemento se trata como un simple contenedor. En una tabla de datos, la persona ya no puede moverse por filas y columnas ni oír las cabeceras. Solo oye los textos seguidos, sin saber qué dato va con cuál.

Cómo evitarlo

1. Reserve role="presentation" y role="none" para elementos que solo sirven para maquetar, como una antigua tabla de diseño.
2. No lo ponga en tablas de datos, listas, encabezados, imágenes informativas ni formularios.
3. Revise las plantillas y componentes heredados: a veces añaden este rol a todas las tablas sin distinguir.
4. Si quiere quitar solo el aspecto visual, hágalo con CSS. El CSS no borra el significado.

Cómo comprobarlo

1. Busque en el código role="presentation" y role="none".
2. Para cada elemento encontrado, pregúntese si transmite información o relaciones: datos en filas y columnas, una lista, un título.
3. Si la respuesta es sí, hay fallo.
4. En el panel «Accesibilidad» de las herramientas del navegador (F12), compruebe que la tabla o lista aparece con su función y no como «none» o «presentation».

Ejemplo

Una tabla con datos de tarifas no debe llevar role="presentation".

<!-- Incorrecto: se pierde la estructura de tabla -->
<table role="presentation">
  <tr><th>Servicio</th><th>Precio</th></tr>
  <tr><td>Piscina</td><td>3 €</td></tr>
</table>

<!-- Correcto: sin role -->
<table>
  <tr><th>Servicio</th><th>Precio</th></tr>
  <tr><td>Piscina</td><td>3 €</td></tr>
</table>