IDs únicos

Problema

O atributo id, acrônimo de identificador, identifica exclusivamente os elementos focalizáveis ​​em uma página, portanto podem ser repetidos. Podemos pensar que eles são os números de CPF das pessoas, não existindo duas pessoas com o mesmo CPF.

Elementos com o atributo id duplicado é um erro de validação comum que pode quebrar a acessibilidade de rótulos para elementos focalizáveis, formulários, células de cabeçalho de tabela, dentre outros. Leitores de tela e scripts do lado do cliente irão ignorar qualquer elemento com id duplicado, com exceção da primeira instância.

Recomendações

Deve-se garantir que todos os atributos id sejam únicos na página. Para isso:

• Renomeio qualquer valor do atributo id caso seja usado mais de uma vez;

• Garanta que cada elemento focalizável na página possua uma id exclusivo;

• Use códigos especiais em laços de repetição para não gerar id repetidos;

Muitas vezes é comum que tenhamos que criar laços de repetição que podem acabar gerando elementos com o mesmo atributo id. Algo muito comum é utilizar o código do elemento que está iterando ou adicionar um número aleatório baseado na hora na frente.

Veja o código abaixo. Se ele for executado somente uma vez, os id serão únicos na página. Entretanto, se o mesmo código for chamado novamente, poderá fazer com que os atributos id fiquem duplicados.

Exemplo

<ul>
    {% for category in categories %}
        <li>
            <a id="{{ category.code }}" href="{{ category.link }}">
                {{ category.name }}
            </a>
        </li>        
    {% endfor %}
</ul>

No exemplo abaixo, independente de quantas vezes o elemento seja chamado, um aleatório sempre será adicionado ao id, garantindo que ele seja único na página.

Exemplo com aleatório

<ul>
    {% for category in categories %}
        {% set rand = 'now' | date('U') %}
        <li>
            <a id="{{ category.code }}-{{ rand }}" href="{{ category.link }}">
                {{ category.name }}
            </a>
        </li>        
    {% endfor %}
</ul>