Ao meu ver atrapalha também no HTML, caso vc use ancoras internas na página normalmente se usa href="#link"
e no elemento que sera ancorado o id="link"
.
Se vc usar o id="link"
em vários elementos a sua ancora nunca ficara correta, pois ela não vai saber para qual elemento vc realmente quer fazer a ancoragem.
Repare que tendo duas ancoras lincando pro mesmo id
elas sempre vão apontar para o primeiro id
<a href="#link">menu 1</a>
<a href="#link">menu 2</a>
<div id="link" style="margin-top: 100vh">div menu 1</div>
<div id="link" style="margin-top: 200vh">div menu 2</div>
O mesmo acontece quando se usa o atributo da label
for="meu-btn"
e no input
o id="meu-btn"
Repare que clicando na label
ela só marca o primeiro checkbox
, pois os dois tendo o mesmo id
e as labels
aponto para o mesmo lugar.
<label for="meu-btn">label1 btn1</label><br><br>
<label for="meu-btn">label2 btn2</label><br><br>
<input id="meu-btn" type="checkbox">btn1<br>
<input id="meu-btn" type="checkbox">btn2
Outro exemplo com label
fazendo for para um lista <select>
. Repare que tento o mesmo id
independente da label
o foco
é sempre na mesma lista
<label for="lista">Lista 1</label>
<select id="lista">
<option>Maria</option>
<option>José</option>
<option>João</option>
</select>
<label for="lista">Lista 2</label>
<select id="lista">
<option>123</option>
<option>345</option>
<option>789</option>
</select>
Quando se fala em semântica e acessibilidade o elemento label
é fundamental, então seu funcionamento correto é imprescindível, por isso é importante ser usado da forma correta sempre linkando label e elemento focal (https://www.w3.org/WAI/tutorials/forms/labels/)
Importância dos ID no SVG e a acessibilidade
De acordo com a especificação do W3C, não devemos fazer nada adicional para SVGs além de fornecer o <title>
e possivelmente um <desc>
porque eles devem estar disponíveis para a API de acessibilidade. Infelizmente, o suporte ao navegador ainda não está completo (há bugs relatados para o Chrome e o Firefox por exemplo).
Então, para garantir que a pessoa possa acessar o <title>
e <desc>
:
Adicione os IDs
apropriados ao <title>
e <desc>
:
<title id = "uniqueTitleID">
O título do SVG </ title>
<desc id = "uniqueDescID">
Uma descrição mais longa e completa para gráficos complexos. </ desc>
Para isso precisamos de IDs únicos Conforme o exemplo abaixo:
<svg id="cat"aria-labelledby="catTitle catDesc" role="img">
<title id="catTitle">Título da figura</title>
<desc id="catDesc">Descrição completa do elemento etc.</desc>
<path d="M545.9,695.9c8.........."/>
</svg>
Fonte: https://css-tricks.com/accessible-svgs/
document.getElementById()
que retorna apenas um elemento ao fazermos essa chamada, dá pra se ter a ideia de que a ideia doid
é ser referência a um elemento único. Agora, a pergunta é interessantíssima. Todos aprendemos que só pode usar umid
, mas geralmente não sabemos explicar "Por quê"