Sobre este problema HTML
O atributo aria-hidden controla se um elemento e os seus descendentes são expostos a tecnologias assistivas como leitores de ecrã. Quando definido como true, o elemento fica oculto da árvore de acessibilidade; quando definido como false, permanece visível. De acordo com a especificação WAI-ARIA, os únicos valores válidos para este atributo são as strings literais true e false. Qualquer outro valor — incluindo "true" com aspas incorporadas — é inválido.
Quando o validador reporta um valor inválido como "true" (com as aspas como parte do valor), significa que o valor real do atributo contém os caracteres "true" em vez de apenas true. Os atributos HTML já usam aspas externas como delimitadores, pelo que quaisquer aspas dentro do valor tornam-se parte do próprio valor. O navegador ou tecnologia assistiva pode não reconhecer "true" como um estado ARIA válido, o que pode levar a que o elemento seja incorretamente exposto ou ocultado dos leitores de ecrã, quebrando o comportamento de acessibilidade pretendido.
Este problema surge frequentemente em alguns cenários:
- Copiar e colar de texto formatado onde “aspas inteligentes” ou aspas extra são incluídas.
-
Motores de template ou frameworks que fazem escape duplo ou colocam aspas duplas nos valores dos atributos (por exemplo,
aria-hidden="{{value}}"onde{{value}}já produz"true"). -
JavaScript que define o atributo com aspas extra, como
element.setAttribute("aria-hidden", '"true"').
Para corrigir o problema, certifique-se de que o valor do atributo contém apenas a string simples true ou false sem aspas extra, entidades HTML ou caracteres com escape dentro do mesmo.
Exemplos
Incorreto — aspas extra incorporadas no valor
<div aria-hidden='"true"'>
Este conteúdo deve ficar oculto das tecnologias assistivas
</div>
O valor do atributo renderizado é literalmente "true" (cinco caracteres incluindo as aspas), que não é um valor ARIA reconhecido.
Incorreto — entidades HTML que produzem aspas extra
<div aria-hidden=""true"">
Este conteúdo deve ficar oculto das tecnologias assistivas
</div>
As entidades " resolvem-se em caracteres de aspas, produzindo o mesmo valor inválido de "true".
Correto — valor simples true
<div aria-hidden="true">
Este conteúdo fica oculto das tecnologias assistivas
</div>
Correto — valor simples false
<div aria-hidden="false">
Este conteúdo é visível para as tecnologias assistivas
</div>Corrigir o problema em JavaScript
Se está a definir o atributo dinamicamente, certifique-se de que não está a envolver o valor em aspas extra:
<div id="modal">Conteúdo do modal</div>
<script>
// Incorreto:
// document.getElementById("modal").setAttribute("aria-hidden", '"true"');
// Correto:
document.getElementById("modal").setAttribute("aria-hidden", "true");
</script>Corrigir o problema em motores de template
Se uma variável de template já produz uma string com aspas, não adicione aspas adicionais à sua volta. Por exemplo, num sistema de templates:
<!-- Incorreto: se myVar produz "true" (com aspas) -->
<!-- <div aria-hidden="{{myVar}}"> -->
<!-- Correto: certifique-se de que myVar produz apenas true (sem aspas) -->
<div aria-hidden="true">
Conteúdo
</div>
O ponto principal é simples: as aspas externas em aria-hidden="true" são sintaxe HTML — delimitam o valor do atributo. O valor em si deve ser exatamente true ou false sem nada extra. Se está a gerar HTML dinamicamente, inspecione a saída renderizada nas ferramentas de programador do seu navegador para confirmar que o valor do atributo não contém aspas soltas.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.