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 atributohrefsempre torna o elementoaum hiperlink ativo.
Como corrigir
Você tem duas abordagens principais dependendo da sua intenção:
-
O link deve estar ativo: Remova
aria-disabled="true"e mantenha ohref. Se o link funciona, não o marque como desativado. -
O link deve estar desativado: Remova o atributo
href. Semhref, o elementoatorna-se um link de espaço reservado que não é interativo. Pode então usararia-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
hrefgarante 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 (umasemhrefperde o seu papel implícito de link). -
O CSS fornece uma indicação visual de que o elemento está desativado, com
pointer-events: noneprevenindo cliques do rato ecursor: not-alloweddando 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.