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.
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/)
ImportanciaImportâ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 (bugshá bugs relatados para: o Chrome e o Firefox por exemplo).
Então, para garantir que a pessoa poçapossa acessar o <title>
e <desc>
: