Sobre este problema HTML
O elemento article tem um role ARIA implícito de article, que sinaliza às tecnologias assistivas que contém uma peça de conteúdo autossuficiente e independentemente distribuível—como um post de blog, notícia ou entrada de fórum. Quando você adiciona role="tabpanel" a um article, está a tentar sobrescrever este significado semântico forte com um role de widget, o que a especificação HTML não permite. A especificação ARIA in HTML define um conjunto rigoroso de roles permitidos para cada elemento HTML, e tabpanel não está na lista de roles permissíveis para article.
Isto é importante por várias razões. Primeiro, tecnologias assistivas como leitores de ecrã dependem de informação de role precisa para comunicar o propósito dos elementos aos utilizadores. Um elemento article que afirma ser um tabpanel cria um sinal confuso e contraditório. Segundo, o validador do W3C marca isto como um erro, significando que a sua marcação é tecnicamente inválida. Terceiro, os navegadores podem lidar com este conflito de forma inconsistente—alguns podem honrar o role explícito, enquanto outros podem priorizar a semântica nativa do elemento, levando a comportamento imprevisível entre plataformas.
O role tabpanel foi concebido para uso num padrão de interface de abas juntamente com role="tablist" e role="tab". Segundo as WAI-ARIA Authoring Practices, um painel de aba deve ser um contêiner genérico que contém o conteúdo associado a uma aba. Elementos como div e section são ideais porque não transportam roles implícitos conflituosos (div não tem role implícito, e section mapeia para region apenas quando recebe um nome acessível, que é adequadamente substituído por tabpanel).
Para corrigir o problema, simplesmente altere o elemento article para um div ou section. Se você genuinamente precisar do significado semântico de article dentro de um painel de aba, aninhe o article dentro do div que transporta o role tabpanel.
Exemplos
Incorreto: role tabpanel num elemento article
<article role="tabpanel" id="panel1">
<h2>Latest News</h2>
<p>Tab panel content here.</p>
</article>
Isto desencadeia o erro de validação porque article não permite o role tabpanel.
Correto: role tabpanel num div
<div role="tabpanel" id="panel1">
<h2>Latest News</h2>
<p>Tab panel content here.</p>
</div>
Correto: aninhando um article dentro do painel de aba
Se você precisar da semântica article para o conteúdo dentro do painel, aninhe-o:
<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>Exemplo completo de interface de abas
Aqui está uma implementação completa e válida de interface de abas:
<!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>
Note o uso de aria-controls em cada tab para referenciar o seu painel correspondente, aria-labelledby em cada tabpanel para referenciar a sua aba controladora, e o atributo hidden em painéis inativos. Estas associações asseguram que as tecnologias assistivas podem navegar adequadamente na interface de abas.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.