Skip to main content
Validaçã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 dica de acessibilidade — comunica um estado desativado às tecnologias assistivas como leitores de ecrã, mas não tem efeito no comportamento real do elemento. Quando um elemento a tem um atributo href, o navegador trata-o como um hiperlink válido independentemente de quaisquer atributos ARIA. Os utilizadores ainda podem clicar nele, segui-lo via navegação por teclado, e navegar para o seu destino. Esta incompatibilidade entre o estado anunciado (“desativado”) e o comportamento real (“link totalmente funcional”) cria uma experiência confusa e enganadora, particularmente para utilizadores de tecnologias assistivas.

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. Um link que afirma estar desativado mas ainda funciona prejudica a confiança do utilizador e pode causar problemas reais de usabilidade.

Porque isto é importante

  • Acessibilidade: Os leitores de ecrã anunciarão o link como desativado, mas os utilizadores que o ativarem serão inesperadamente navegados para outro local. Isto é desorientador e viola as diretrizes WCAG sobre comportamento previsível.
  • Conformidade com normas: A especificação HTML e os requisitos ARIA em HTML desencorajam ou proíbem esta combinação porque produz uma experiência de utilizador não confiável.
  • Comportamento do navegador: Nenhum navegador desativará um link apenas porque aria-disabled="true" está presente. O atributo href sempre torna o elemento a um hiperlink ativo.

Como corrigir

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

  1. O link deve estar ativo: Remova aria-disabled="true" e mantenha o href. Se o link funciona, não o marque como desativado.

  2. O link deve estar desativado: Remova o atributo href. Sem href, o elemento a torna-se um link de espaço reservado que não é interativo. Pode então usar aria-disabled="true" para comunicar o estado desativado, tabindex="-1" para removê-lo da ordem de tabulação do teclado, e CSS para estilizá-lo como visualmente desativado. Deve também adicionar JavaScript para prevenir 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 o Dashboard</a>

Correto — Manter o link ativo

Se o link deve funcionar normalmente, simplesmente remova o atributo aria-disabled:

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

Correto — Desativar o link

Se o link 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 desativado:

<a aria-disabled="true" tabindex="-1" role="link" class="link-disabled">Ir para o Dashboard</a>
.link-disabled {
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

Nesta abordagem:

  • Remover href garante que o link não é acionável pelo navegador.
  • aria-disabled="true" diz às tecnologias assistivas que o elemento está desativado.
  • 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 link para que os leitores de ecrã ainda o identifiquem como um link (um a sem href perde o seu papel implícito de link).
  • O CSS fornece uma indicação visual de que o elemento está desativado, com pointer-events: none prevenindo cliques do rato e cursor: not-allowed dando uma pista visual no hover.

Correto — Usar um botão em vez disso

Se o “link” 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 um link. O atributo disabled é nativamente compreendido pelos navegadores e tecnologias assistivas sem quaisquer soluções alternativas ARIA.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.