alt, figure e figcaption | Acessibilidade web parte 1: tornando seu front-end inclusivo

1
resposta

por Matheus Ricardo Uihara Zingarelli

| 205.9k xp | 288 posts

Desenvolvedor de Software

Olá!

Em sites de notícias que eu acompanho, é comum ter uma imagem e abaixo dela um texto descrevendo a imagem. Olhando o HTML, vi que utilizam uma estrutura mais ou menos assim:

<figure>
  <img alt="..." src="...">
  <figcaption>....</figcaption>
</figure>

Ou seja, há o alt da imagem e também uma descrição da imagem na tag figcaption.

Minha dúvida é: como fica no caso de um leitor de tela? Ele irá ler o alt e também o texto da figcaption? Isso não ficaria redundante? Ou é assim que a acessibilidade vem sendo tratada atualmente (estou fazendo esta pergunta em 2022)?

Obrigado.

1 resposta

por Jeffrey Rodrigues Innocencio

| 255.8k xp | 7 posts

05/08/2022

Boa tarde, tudo bem?

Então, pelo que eu entendi, o alt serve para você especificar exatamente o que existe na imagem. O figcaption, que é usado dentro da tag figure, seria a legenda do que tem dentro da tag figure. Se dentro da tag figure existe um grupo de imagens, você insere uma legenda relacionada a esse grupo de imagens, e usa o alt em cada uma delas, especificando o que elas seriam.