Skip to main content
Pequenos detalhes de redação.
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

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>:

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/

Importancia 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 (bugs relatados para: Chrome e Firefox).

Então, para garantir que a pessoa poça acessar o <title> e <desc>:

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/)

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>:

adicionou 937 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

 

Importancia 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 (bugs relatados para: Chrome e Firefox).

Então, para garantir que a pessoa poça 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/


 

Importancia 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 (bugs relatados para: Chrome e Firefox).

Então, para garantir que a pessoa poça 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/

adicionou 937 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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/


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

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/


Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando