IDs de rótulos ARIA ausentes
O Silktide verifica elementos que obtêm o seu a partir de outros elementos por ID e comunica referências a IDs que não existem na página. Uma referência quebrada deixa o elemento sem o nome que deveria ter.
O atributo aria-labelledby identifica um elemento apontando para o id do elemento que contém o seu rótulo — um título que identifica uma caixa de diálogo ou uma legenda que identifica um controlo:
<!-- Problema: a referência diz "dialog-label", mas o id do título é "dialog-labell" -->
<h2 id="dialog-labell">Mensagem importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Por que isso é importante
O nome acessível é o que um anuncia quando um visitante chega a um elemento. Quando uma referência aria-labelledby não aponta para nada, o elemento pode ser anunciado sem nome — uma caixa de diálogo sem nome, um botão sem nome — e o visitante tem de adivinhar a sua finalidade. Estas falhas são invisíveis: a página parece idêntica, e até testes cuidadosos com utilizadores raramente detetam um nome que falhou silenciosamente ao ser associado. Os IDs são renomeados e o conteúdo é reestruturado, por isso as referências deterioram-se com o tempo.
Como corrigir
- Encontre o elemento que deveria fornecer o nome e faça com que o valor de
aria-labelledbycorresponda exatamente ao seuid(os IDs diferenciam maiúsculas de minúsculas):
<!-- Corrigido: a referência corresponde ao id do título -->
<h2 id="dialog-label">Mensagem importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Se o elemento de identificação tiver sido removido, restaure-o ou mude para um atributo
aria-labelque contenha o nome em texto. - Quando um elemento é identificado por vários outros, liste todos os IDs separados por espaços e verifique cada um.
Como o Silktide testa isto
- Encontra todos os elementos com um atributo
aria-labelledbyem cada página. - Divide o valor do atributo em IDs individuais.
- Comunica cada ID referenciado que não exista em nenhum lugar da página.