Verificação HTML: Um elemento "figure" com um descendente "figcaption" não deve ter um atributo "role".

Sobre este problema HTML

O elemento HTML <figure> representa conteúdo independente — como uma imagem, diagrama, excerto de código ou citação — opcionalmente acompanhado por uma legenda fornecida por um elemento <figcaption>. Quando um <figcaption> está presente, o navegador e as tecnologias assistivas já compreendem a relação entre a figura e a sua legenda. Esta relação semântica incorporada faz parte da especificação ARIA in HTML, que governa como os elementos HTML nativos se mapeiam para funções de acessibilidade.

O atributo role é normalmente usado para atribuir ou substituir a função ARIA de um elemento para tecnologias assistivas como leitores de ecrã. No entanto, a especificação ARIA in HTML restringe explicitamente certas atribuições de funções quando a semântica nativa de um elemento já está bem definida pelo seu conteúdo. Um <figure> com um <figcaption> é um desses casos — a presença da legenda estabelece uma estrutura semântica clara com a qual o atributo role interferiria.

Esta restrição existe por várias razões importantes:

Conflitos de acessibilidade: Adicionar role="figure" é redundante uma vez que o elemento já tem essa função implícita. Adicionar uma função diferente (como role="img" ou role="group") pode confundir as tecnologias assistivas ao contradizer o significado semântico estabelecido pelo <figcaption>. Os leitores de ecrã podem ignorar a legenda ou anunciar o elemento incorretamente.
Conformidade com normas: A especificação ARIA in HTML declara que quando um <figure> tem um descendente <figcaption>, nenhum atributo role é permitido. O validador W3C impõe esta regra.
Manutenibilidade: Confiar na semântica HTML nativa em vez de substituições ARIA mantém a sua marcação mais simples e menos propensa a erros. A primeira regra do ARIA é: “Se você puder usar um elemento HTML nativo com a semântica e comportamento de que precisa já incorporados, faça-o.”

Para corrigir este problema, remova o atributo role do elemento <figure>. O <figcaption> fornece todo o contexto semântico necessário.

Exemplos

Incorreto: atributo `role` em `<figure>` com `<figcaption>`

Adicionar role="figure" é redundante e desencadeia o erro de validação:

<figure role="figure">
  <img src="chart.png" alt="Dados de vendas para o 3º trimestre de 2024">
  <figcaption>Figura 1: Vendas trimestrais por região.</figcaption>
</figure>

Usar uma função diferente como role="img" também desencadeia o erro e pode causar problemas de acessibilidade:

<figure role="img">
  <img src="chart.png" alt="Dados de vendas para o 3º trimestre de 2024">
  <figcaption>Figura 1: Vendas trimestrais por região.</figcaption>
</figure>

Correto: `<figure>` com `<figcaption>` e sem `role`

Simplesmente remova o atributo role. Os elementos <figure> e <figcaption> lidam com a semântica por si próprios:

<figure>
  <img src="chart.png" alt="Dados de vendas para o 3º trimestre de 2024">
  <figcaption>Figura 1: Vendas trimestrais por região.</figcaption>
</figure>

Correto: `<figure>` sem `<figcaption>` pode usar um `role`

Se você tiver um <figure> sem um <figcaption>, a restrição não se aplica. Neste caso, você pode usar um atributo role se necessário:

<figure role="img" aria-label="Dados de vendas para o 3º trimestre de 2024">
  <img src="chart.png" alt="">
</figure>

Correto: `<figure>` com `<figcaption>` contendo outros media

A correção aplica-se independentemente do tipo de conteúdo dentro do <figure>:

<figure>
  <pre><code>const greeting = "Hello, world!";</code></pre>
  <figcaption>Uma simples atribuição de variável em JavaScript.</figcaption>
</figure>

<figure>
  <blockquote>
    <p>A melhor forma de prever o futuro é inventá-lo.</p>
  </blockquote>
  <figcaption>Alan Kay</figcaption>
</figure>

Em todos os casos, o <figcaption> fornece o nome acessível e o contexto descritivo para o <figure>, tornando qualquer atributo role desnecessário e não conforme.