Acessibilidade usando SVG como Component React

Bom dia, o alt="" não se perde, você consegue colocar o parametro na tag, assim:

      <img
        alt="qualquer coisa"
        src={deletar} 
        >
      </img>

Oi Iago, dentro da tag <img> sim podemos utilizar o atributo alt.

Mas eu quis dizer quando utilizamos como um componente do React.

ex:

import { ReactComponent as DeleteSVG } from "../../assets/img/delete.svg";

<DeleteSVG />

nesse caso o não teria como utilizar o atributo alt no component. Daí a dúvida de qual seria a solução para manter a acessibilidade

Olá Victor, tudo bem com você?

Realmente, quando você troca a imagem por um svg você parte o atributo alt, pois ele é específico da tag <img>.

Caso você queira ter algum texto atrelado ao svg, considere utilizar o title do svg, ele tem um objetivo muito parecido com o alt do img, mas ao invés dele mostrar o texto caso a imagem não carregue, ele utiliza como um tooltip (uma caixa de diálogo).

Era esta a sua dúvida?

Bons estudos!

Oi Luiz,

Eu estava querendo dizer mais no sentido de acessibilidade mesmo, tipo os leitores de tela leêm o atributo "alt" da tag queria saber como manter essa acessibildade no caso de eu optar por não usar o svg dentro tag e sim como um componente react conforme mostrado na aula.

Mas eu dei uma pesquisa e vi que WAI-ARIA é suportado no JSX então pode-se usar o aria-label por exemplo dentro do componente react para que os leitores de tela consigam ler o elemento.

ex:

<DeleteSVG aria-label="Botão delete"/>

De qualquer forma valeu!