IDs duplicados
A Silktide encontra páginas onde o mesmo valor de id é usado em mais de um
elemento. Os IDs devem ser exclusivos numa página, porque qualquer elemento que
faça referência a um ID — rótulos de formulários, relações ARIA, links na página —
só consegue encontrar um dos duplicados.
<!-- Ambos os campos partilham o id="name": que campo descreve cada rótulo? -->
<label for="name">O seu nome</label>
<input id="name">
<label for="name">Nome da empresa</label>
<input id="name">
Porque é que isto é importante
A depende de referências a IDs para ligar elementos relacionados.
Quando os IDs estão duplicados, um
pode ler o rótulo errado de um campo de formulário, ou nenhum rótulo — no exemplo
acima, ambos os campos podem ser anunciados como "O seu nome", fazendo com que o utilizador
introduza o seu nome no campo da empresa. A mesma falha afeta
atributos como aria-labelledby e aria-describedby, e links na página
que saltam para um #id.
Como corrigir
- Mude o nome dos duplicados para que todos os
idda página sejam exclusivos e atualize tudo o que fazia referência a eles (atributosfor, atributos ARIA, links). - Se os duplicados vierem de um componente repetido — um modelo utilizado várias vezes por página — corrija o modelo para gerar IDs exclusivos ou use classes em vez de IDs para identificadores de estilo que não precisem de referências.
- Se um duplicado assinalado for genuinamente inofensivo no seu contexto, pode ignorar o resultado.
Como a Silktide faz esta verificação
- Encontra todos os elementos da página com um atributo
id. Os elementos dentro de gráficos SVG são ignorados, pois os seus IDs pertencem a um contexto separado. - Agrupa os elementos pelo respetivo valor de
id. - Quando mais de um elemento partilha o mesmo
id, assinala cada um deles.