# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/acessibilidade/ids-unicos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.