Validación HTML: Valor incorrecto "tabpanel" para el atributo "role" en el elemento "article".

Acerca de este problema HTML

El elemento article tiene un role ARIA implícito de article, que indica a las tecnologías de asistencia que contiene un contenido independiente y distribuible por sí mismo, como una entrada de blog, una noticia o una publicación de foro. Cuando añades role="tabpanel" a un article, intentas sobrescribir este significado semántico fuerte con un role de widget, lo cual la especificación HTML no permite. La especificación ARIA en HTML define un conjunto estricto de roles permitidos para cada elemento HTML, y tabpanel no está en la lista de roles permitidos para article.

Esto es importante por varias razones. Primero, las tecnologías de asistencia como los lectores de pantalla dependen de información de role precisa para comunicar el propósito de los elementos a los usuarios. Un elemento article que dice ser un tabpanel crea una señal confusa y contradictoria. Segundo, el validador W3C marca esto como un error, lo que significa que tu marcado es técnicamente inválido. Tercero, los navegadores pueden manejar este conflicto de manera inconsistente: algunos podrían respetar el role explícito, mientras que otros podrían priorizar la semántica nativa del elemento, llevando a un comportamiento impredecible entre plataformas.

El role tabpanel está diseñado para usar en un patrón de interfaz de pestañas junto con role="tablist" y role="tab". Según las Prácticas de Autoría WAI-ARIA, un panel de pestaña debe ser un contenedor genérico que contenga el contenido asociado con una pestaña. Elementos como div y section son ideales porque no tienen roles implícitos en conflicto (div no tiene role implícito, y section se mapea a region solo cuando se le da un nombre accesible, que se sobrescribe apropiadamente por tabpanel).

Para solucionar el problema, simplemente cambia el elemento article por un div o section. Si realmente necesitas el significado semántico de article dentro de un panel de pestaña, anida el article dentro del div que lleva el role tabpanel.

Ejemplos

Incorrecto: role `tabpanel` en un elemento `article`

<article role="tabpanel" id="panel1">
  <h2>Latest News</h2>
  <p>Tab panel content here.</p>
</article>

Esto activa el error de validación porque article no permite el role tabpanel.

Correcto: role `tabpanel` en un `div`

<div role="tabpanel" id="panel1">
  <h2>Latest News</h2>
  <p>Tab panel content here.</p>
</div>

Correcto: anidar un `article` dentro del panel de pestaña

Si necesitas la semántica de article para el contenido dentro del panel, anídalo:

<div role="tabpanel" id="panel1">
  <article>
    <h2>Latest News</h2>
    <p>This is a self-contained article displayed within a tab panel.</p>
  </article>
</div>

Ejemplo completo de interfaz de pestañas

Aquí tienes una implementación completa y válida de una interfaz de pestañas:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tab Interface Example</title>
</head>
<body>
  <div role="tablist" aria-label="Topics">
    <button role="tab" id="tab1" aria-controls="panel1" aria-selected="true">News</button>
    <button role="tab" id="tab2" aria-controls="panel2" aria-selected="false">Sports</button>
  </div>
  <div role="tabpanel" id="panel1" aria-labelledby="tab1">
    <p>Latest news content goes here.</p>
  </div>
  <div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
    <p>Sports content goes here.</p>
  </div>
</body>
</html>

Nota el uso de aria-controls en cada tab para referenciar su panel correspondiente, aria-labelledby en cada tabpanel para referenciar su pestaña controladora, y el atributo hidden en los paneles inactivos. Estas asociaciones aseguran que las tecnologías de asistencia puedan navegar apropiadamente la interfaz de pestañas.