Elemento “a” está em falta um ou mais dos seguintes atributos: “aria-checked”, “role”.

O elemento <a> tem um papel ARIA implícito de link (quando tem um href) ou generic (quando não tem). Certos atributos de estado ARIA, como aria-checked, são apenas válidos em elementos com papéis específicos que os suportam. Por exemplo, aria-checked é desenhado para papéis como checkbox, menuitemcheckbox, radio, switch, ou option. Se colocar aria-checked num elemento <a> sem atribuir um destes papéis compatíveis, o validador levanta este erro porque o atributo não faz sentido no contexto do papel atual do elemento.

Isto é importante por várias razões. Leitores de ecrã e outras tecnologias assistivas dependem da relação entre papéis e os seus estados suportados para transmitir informação significativa aos utilizadores. Um atributo aria-checked numa ligação simples cria uma experiência confusa — o utilizador ouve que algo está “selecionado” mas o elemento é anunciado como uma ligação, que não é um conceito que suporte estados selecionado/não selecionado. Esta incompatibilidade pode tornar interfaces inutilizáveis para pessoas que dependem de tecnologia assistiva.

Para corrigir este problema, precisa de:

1. Adicionar um role apropriado que suporte o atributo de estado ARIA que está a usar.
2. Usar um elemento semanticamente mais apropriado, como <input type="checkbox"> ou <button>, que suporte nativamente o conceito de ser selecionado ou alternado.
3. Remover o atributo ARIA não suportado se não refletir realmente o comportamento do elemento.

Exemplos

Incorreto: aria-checked sem um papel compatível

Isto desencadeia o erro de validação porque <a> não suporta aria-checked sem um papel explícito:

<a href="#" aria-checked="true">Modo escuro</a>

Corrigido: Adicionar um role compatível

Adicionar role="menuitemcheckbox" (dentro de um contexto de menu) ou role="switch" torna aria-checked válido:

<ul role="menu">
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="true">Mostrar notificações</a>
  </li>
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="false">Modo escuro</a>
  </li>
</ul>

Corrigido: Usar um <button> com role="switch" em vez disso

Em muitos casos, um <button> é uma escolha semântica melhor que um <a> para interações do tipo alternância:

<button role="switch" aria-checked="true">Modo escuro</button>

Correto: Lista de separadores usando elementos <a> com papéis adequados

Ao construir uma interface de separadores com elementos de âncora, cada separador precisa de role="tab" junto com atributos de suporte como aria-selected:

<div class="tab-interface">
  <div role="tablist" aria-label="Definições">
    <a role="tab" href="#panel-1" aria-selected="true" aria-controls="panel-1" id="tab-1">
      Geral
    </a>
    <a role="tab" href="#panel-2" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
      Avançado
    </a>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Conteúdo das definições gerais</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Conteúdo das definições avançadas</p>
  </div>
</div>

Incorreto: aria-selected num <a> simples sem um papel

<a href="/settings" aria-selected="true">Definições</a>

Corrigido: Adicionar o papel apropriado

<a href="/settings" role="tab" aria-selected="true">Definições</a>

Ao escolher uma correção, considere sempre se o elemento <a> é verdadeiramente a melhor escolha. Se o elemento não navegar o utilizador para um novo URL, um <button> é normalmente mais apropriado. Reserve <a> para navegação real, e use papéis e estados ARIA apenas quando descrevem com precisão o comportamento do elemento na interface.

Saiba mais:

MDN Reference

MDN - aria-selected

→