Validación HTML: Valor incorrecto "presentational" para el atributo "role" en el elemento X.

Acerca de este problema HTML

Este error ocurre cuando usas role="presentational" en un elemento HTML. Aunque la intención es clara — quieres eliminar la semántica ARIA implícita del elemento — el valor presentational no existe en la especificación WAI-ARIA. Es un error tipográfico común o una idea errónea. Los dos roles válidos para este propósito son presentation y none, que son sinónimos entre sí.

Cuando aplicas role="presentation" o role="none" a un elemento, le estás diciendo a las tecnologías de asistencia (como los lectores de pantalla) que ignoren el significado semántico implícito del elemento. Por ejemplo, una <table> utilizada únicamente para maquetación no tiene semántica de datos tabulares, por lo que role="presentation" elimina la semántica relacionada con tablas del árbol de accesibilidad. Sin embargo, el contenido dentro del elemento permanece accesible — solo se eliminan la semántica del contenedor (y en algunos casos, sus descendientes asociados requeridos).

Esto es importante por varias razones:

Cumplimiento de estándares: Usar un valor de role inválido significa que el atributo es esencialmente ignorado por navegadores y tecnologías de asistencia, por lo que la semántica del elemento no se elimina como se pretende.
Accesibilidad: Si un lector de pantalla encuentra un role desconocido, puede recurrir a la semántica predeterminada del elemento, lo que lleva a una experiencia confusa. Por ejemplo, una tabla de maquetación sin un role presentation válido aún puede anunciarse como una tabla de datos.
Consistencia entre navegadores: Los valores ARIA inválidos pueden llevar a un comportamiento impredecible entre diferentes navegadores y tecnologías de asistencia.

Para solucionarlo, simplemente reemplaza presentational con presentation o none.

Ejemplos

❌ Incorrecto: usar el role inválido `presentational`

<table role="presentational">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

✅ Correcto: usar `presentation`

<table role="presentation">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

✅ Correcto: usar `none` (sinónimo de `presentation`)

<table role="none">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

Otros elementos donde esto aplica

El role presentation / none puede usarse en varios elementos, no solo en tablas. Aquí tienes otro ejemplo común con una imagen utilizada únicamente para decoración:

<!-- ❌ Incorrecto -->

<img src="divider.png" alt="" role="presentational">

<!-- ✅ Correcto -->

<img src="divider.png" alt="" role="presentation">

Cuándo usar `presentation` vs. `none`

Tanto presentation como none son funcionalmente idénticos. El role none se introdujo más tarde como un nombre más claro, ya que presentation puede confundirse con presentación visual. Para máxima compatibilidad con navegadores, algunos desarrolladores usan ambos:

<table role="none presentation">
  <tr>
    <td>Layout content</td>
  </tr>
</table>

Este patrón de respaldo asegura que las tecnologías de asistencia más antiguas que no reconocen none aún captarán presentation. Sin embargo, en la mayoría de entornos modernos, cualquier valor por sí solo es suficiente.