Validación HTML: Un elemento "figure" con un descendiente "figcaption" no debe tener un atributo "role".

Acerca de este problema HTML

El elemento HTML <figure> representa contenido independiente — como una imagen, diagrama, fragmento de código o cita — opcionalmente acompañado de un título proporcionado por un elemento <figcaption>. Cuando está presente un <figcaption>, el navegador y las tecnologías de asistencia ya comprenden la relación entre la figura y su título. Esta relación semántica integrada es parte de la especificación ARIA in HTML, que rige cómo los elementos HTML nativos se mapean a los roles de accesibilidad.

El atributo role se utiliza típicamente para asignar o anular el rol ARIA de un elemento para tecnologías de asistencia como lectores de pantalla. Sin embargo, la especificación ARIA in HTML restringe explícitamente ciertas asignaciones de roles cuando la semántica nativa de un elemento ya está bien definida por su contenido. Un <figure> con un <figcaption> es uno de esos casos — la presencia del título establece una estructura semántica clara con la que el atributo role interferiría.

Esta restricción existe por varias razones importantes:

Conflictos de accesibilidad: Agregar role="figure" es redundante ya que el elemento ya tiene ese rol implícito. Agregar un rol diferente (como role="img" o role="group") podría confundir a las tecnologías de asistencia al contradecir el significado semántico establecido por el <figcaption>. Los lectores de pantalla pueden ignorar el título o anunciar el elemento incorrectamente.
Cumplimiento de estándares: La especificación ARIA in HTML establece que cuando un <figure> tiene un descendiente <figcaption>, no se permite ningún atributo role. El validador W3C hace cumplir esta regla.
Mantenibilidad: Confiar en la semántica HTML nativa en lugar de anulaciones ARIA mantiene tu marcado más simple y menos propenso a errores. La primera regla de ARIA es: “Si puedes usar un elemento HTML nativo con la semántica y el comportamiento que requieres ya integrados, hazlo.”

Para solucionar este problema, elimina el atributo role del elemento <figure>. El <figcaption> proporciona todo el contexto semántico necesario.

Ejemplos

Incorrecto: atributo `role` en `<figure>` con `<figcaption>`

Agregar role="figure" es redundante y genera el error de validación:

<figure role="figure">
  <img src="chart.png" alt="Datos de ventas para T3 2024">
  <figcaption>Figura 1: Ventas trimestrales por región.</figcaption>
</figure>

Usar un rol diferente como role="img" también genera el error y puede causar problemas de accesibilidad:

<figure role="img">
  <img src="chart.png" alt="Datos de ventas para T3 2024">
  <figcaption>Figura 1: Ventas trimestrales por región.</figcaption>
</figure>

Correcto: `<figure>` con `<figcaption>` y sin `role`

Simplemente elimina el atributo role. Los elementos <figure> y <figcaption> manejan la semántica por sí mismos:

<figure>
  <img src="chart.png" alt="Datos de ventas para T3 2024">
  <figcaption>Figura 1: Ventas trimestrales por región.</figcaption>
</figure>

Correcto: `<figure>` sin `<figcaption>` puede usar un `role`

Si tienes un <figure> sin un <figcaption>, la restricción no se aplica. En este caso, puedes usar un atributo role si es necesario:

<figure role="img" aria-label="Datos de ventas para T3 2024">
  <img src="chart.png" alt="">
</figure>

Correcto: `<figure>` con `<figcaption>` que contiene otros medios

La solución se aplica independientemente del tipo de contenido dentro del <figure>:

<figure>
  <pre><code>const greeting = "Hello, world!";</code></pre>
  <figcaption>Una asignación simple de variable en JavaScript.</figcaption>
</figure>

<figure>
  <blockquote>
    <p>La mejor manera de predecir el futuro es inventarlo.</p>
  </blockquote>
  <figcaption>Alan Kay</figcaption>
</figure>

En todos los casos, el <figcaption> proporciona el nombre accesible y el contexto descriptivo para el <figure>, haciendo que cualquier atributo role sea innecesario y no conforme.