> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/acessibilidade/ids-unicos.md).

# IDs únicos

![](/files/ppbac2vezUpTmwXfFyJz)

### 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.

{% code title="Exemplo" %}

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

{% endcode %}

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.

{% code title="Exemplo com aleatório" %}

```html
<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>
```

{% endcode %}