Verificação HTML: Um atributo "aria-disabled" cujo valor é "true" não deve ser especificado num elemento "a" que tem um atributo "href".

Sobre este problema HTML

O problema principal é que aria-disabled="true" é puramente uma sugestão de acessibilidade — comunica um estado desabilitado às tecnologias de apoio como leitores de ecrã, mas não tem nenhum efeito no comportamento real do elemento. Quando um elemento a tem um atributo href, o navegador trata-o como uma hiperligação válida independentemente de quaisquer atributos ARIA. Os utilizadores ainda podem clicar nela, segui-la através da navegação por teclado e navegar para o seu destino. Esta discrepância entre o estado anunciado (“desabilitado”) e o comportamento real (“ligação totalmente funcional”) cria uma experiência confusa e enganadora, particularmente para utilizadores de tecnologias de apoio.

O validador W3C sinaliza esta combinação porque viola o princípio de que os estados ARIA devem refletir com precisão o verdadeiro estado interativo de um elemento. Uma ligação que afirma estar desabilitada mas ainda funciona mina a confiança do utilizador e pode causar problemas reais de usabilidade.

Por que isto importa

Acessibilidade: Os leitores de ecrã anunciarão a ligação como desabilitada, mas os utilizadores que a ativarem serão inesperadamente navegados para outro local. Isto é desorientador e viola as diretrizes WCAG sobre comportamento previsível.
Conformidade com padrões: A especificação HTML e os requisitos ARIA in HTML desencorajam ou proíbem esta combinação porque produz uma experiência de utilizador não fiável.
Comportamento do navegador: Nenhum navegador desabilitará uma ligação apenas porque aria-disabled="true" está presente. O atributo href sempre torna o elemento a uma hiperligação ativa.

Como corrigir

Você tem duas abordagens principais dependendo da sua intenção:

A ligação deve estar ativa: Remova aria-disabled="true" e mantenha o href. Se a ligação funciona, não a marque como desabilitada.
A ligação deve estar desabilitada: Remova o atributo href. Sem href, o elemento a torna-se uma ligação placeholder que não é interativa. Você pode então usar aria-disabled="true" para comunicar o estado desabilitado, tabindex="-1" para removê-la da ordem de tabulação do teclado, e CSS para estilizá-la como visualmente desabilitada. Você também deve adicionar JavaScript para prevenir a ativação se necessário.

Exemplos

Incorreto

Isto desencadeia o erro de validação porque aria-disabled="true" entra em conflito com a presença de href:

<a href="/dashboard" aria-disabled="true">Ir para Dashboard</a>

Correto — Manter a ligação ativa

Se a ligação deve funcionar normalmente, simplesmente remova o atributo aria-disabled:

<a href="/dashboard">Ir para Dashboard</a>

Correto — Desabilitar a ligação

Se a ligação deve ser não acionável (por exemplo, um item de navegação ao qual o utilizador não tem acesso atualmente), remova o atributo href e use ARIA e CSS para comunicar o estado desabilitado:

<a aria-disabled="true" tabindex="-1" role="link" class="link-disabled">Ir para Dashboard</a>

.link-disabled {
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

Nesta abordagem:

Remover href garante que a ligação não é acionável pelo navegador.
aria-disabled="true" diz às tecnologias de apoio que o elemento está desabilitado.
tabindex="-1" remove o elemento da ordem de tabulação do teclado para que os utilizadores não possam navegar até ele com Tab.
role="link" preserva a semântica de ligação para que os leitores de ecrã ainda a identifiquem como uma ligação (um a sem href perde o seu papel implícito de ligação).
O CSS fornece uma indicação visual de que o elemento está desabilitado, com pointer-events: none prevenindo cliques do rato e cursor: not-allowed dando uma sugestão visual ao passar o rato por cima.

Correto — Use um botão em vez disso

Se a “ligação” desencadeia uma ação em vez de navegar para algum lugar, considere usar um elemento button em vez disso. Os botões suportam nativamente o atributo disabled:

<button type="button" disabled>Executar Ação</button>

Esta é a solução mais simples e robusta quando o elemento não precisa de ser uma ligação. O atributo disabled é nativamente compreendido pelos navegadores e tecnologias de apoio sem quaisquer soluções alternativas ARIA.