Valor inválido “complimentary” para o atributo “role” no elemento “aside”.

A especificação WAI-ARIA define um conjunto restrito de valores de role válidos, e "complimentary" não está entre eles. Este é um erro tipográfico simples — "complimentary" (significando “que expressa elogio ou dado gratuitamente”) versus "complementary" (significando “que serve para completar ou melhorar algo”). Quando um navegador ou tecnologia assistiva encontra um valor de role não reconhecido, ignora-o. Isto significa que os utilizadores de leitores de ecrã perdem o significado semântico que o elemento <aside> normalmente transmitiria, tornando mais difícil para eles compreender a estrutura da página e navegar eficazmente.

O elemento <aside> já carrega um role ARIA implícito de complementary conforme definido pela especificação HTML. Isto significa que as tecnologias assistivas tratam automaticamente <aside> como conteúdo complementar sem qualquer atributo role explícito. Adicionar role="complementary" a um <aside> é redundante. A correção mais simples e melhor é remover o atributo role mal escrito e deixar a semântica nativa do elemento fazer o trabalho.

Se você tem uma razão específica para definir explicitamente o role — por exemplo, ao sobrepô-lo com um role válido diferente — certifique-se de que o valor está escrito corretamente e é um role apropriado para o elemento.

Exemplos

❌ Incorreto: valor de role mal escrito

<aside role="complimentary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

O valor "complimentary" não é um role ARIA válido. As tecnologias assistivas irão ignorá-lo, e o elemento perde o seu significado semântico.

✅ Correto: remover o role redundante

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

O elemento <aside> já implica role="complementary", portanto nenhum role explícito é necessário. Esta é a abordagem recomendada.

✅ Correto: definir explicitamente o role corretamente escrito

<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

Isto é válido mas redundante. Pode ser apropriado em casos raros onde você quer ser explícito para clareza ou para contornar casos especiais com certas tecnologias assistivas.

Referência rápida para erros similares

Verifique sempre os valores de role contra as definições de role WAI-ARIA para garantir que são válidos. Quando um elemento HTML já fornece a semântica de que você precisa, prefira usar o elemento sem um role explícito — isto segue a primeira regra do ARIA: “Se você pode usar um elemento HTML nativo com a semântica e comportamento que necessita, faça-o.”

Saiba mais:

MDN Reference

MDN: complementary ARIA role

→

MDN Reference

MDN: <aside> The Aside element

→