À primeira vista, imagens acessíveis podem parecer um assunto rápido: basta adicionar um "texto alternativo" a uma imagem e pronto. Mas o assunto é mais complexo do que algumas pessoas imaginam. Nesta seção, vamos revisar:
- Como atualizar o código para tornar as imagens acessíveis.
- Quais informações devem ser compartilhadas com os usuários e onde.
- Outras maneiras de melhorar suas imagens para ajudar pessoas com deficiência.
Finalidade e contexto da imagem
Antes de escrever uma linha de código, pense na finalidade da imagem de ponto, onde ela vai ficar e como será usada. Fazer essas perguntas pode ajudar você a determinar a melhor forma de transmitir as informações para uma pessoa que usa tecnologia adaptativa (TA), como um leitor de tela.
Você pode se perguntar:
- A imagem é essencial para entender o contexto do recurso ou da página?
- Que tipo de informação a imagem está tentando transmitir?
- A imagem é simples ou complexa?
- A imagem evoca emoção ou incentiva o usuário a agir?
- Ou a imagem é apenas um "deleite para os olhos" sem um propósito real?
Um fluxograma visual, como uma árvore de decisão de imagens, pode ajudar você a decidir a qual categoria sua imagem pertence.
Tente ocultar as imagens no seu site ou web app usando uma extensão do navegador ou outros métodos. Depois, pergunte-se: "Eu entendo o conteúdo que restou?" Se a resposta for sim, provavelmente é uma imagem decorativa. Caso contrário, a imagem é informativa de alguma forma e contextualmente necessária. Depois de determinar a finalidade da imagem, você pode determinar a maneira mais precisa de codificá-la.
Imagens decorativas
Uma imagem decorativa é um elemento visual que não adiciona contexto ou informações extras para que o usuário entenda melhor o contexto. As imagens decorativas são complementares e podem fornecer estilo em vez de substância.
Se você decidir que uma imagem é decorativa, ela precisará ser ocultada programaticamente das tecnologias assistivas. Quando você programa uma imagem para ser ocultada, isso sinaliza para a TA que a imagem não é necessária para entender o conteúdo, o contexto ou a ação da página. Há muitas maneiras de ocultar imagens, incluindo o uso de uma alternativa de texto vazia ou nula, aplicando ARIA ou adicionando a imagem como um plano de fundo CSS. Confira alguns exemplos de como ocultar uma imagem decorativa dos usuários.
alt vazio ou nulo
Um atributo de texto alternativo vazio ou nulo é diferente de um atributo de texto alternativo ausente. Se o atributo de texto alternativo estiver faltando, a TA poderá ler o nome do arquivo ou o conteúdo ao redor para dar mais informações ao usuário sobre a imagem.
Função definida como presentation ou none
Uma função definida como
presentation ou none
remove a semântica de um elemento da exposição à árvore de acessibilidade.
Enquanto isso, aria-hidden= "true"
remove todo o elemento e todos os filhos dele da
API de acessibilidade.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Use aria-hidden com cuidado, porque ele pode ocultar elementos que você não quer ocultar.
Imagens em CSS
Quando você adiciona uma imagem de plano de fundo com CSS, um leitor de tela não consegue detectar o arquivo de imagem. Escolha esse método apenas se realmente quiser ocultar a imagem.
Imagens informativas
Uma imagem informativa transmite um conceito, uma ideia ou uma emoção. Imagens informativas incluem fotos de objetos do mundo real, ícones essenciais, desenhos simples e imagens de texto.
Se a imagem for informativa, inclua um texto alternativo programático que descreva a finalidade dela. As descrições alternativas de imagens, geralmente abreviadas como "texto alternativo", oferecem aos usuários de TA mais contexto sobre uma imagem e ajudam a entender melhor a mensagem ou a intenção dela.
Você pode adicionar descrições alternativas a
elementos <img>
incluindo o atributo alt. Isso se aplica a todos os tipos de arquivo, incluindo JPG, PNG ou SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
No entanto, ao usar elementos <svg> inline, é preciso prestar mais atenção à acessibilidade. Os SVGs são codificados semanticamente, então a TA os ignora
por padrão.
Se o SVG for uma imagem decorativa, não há problema. A tecnologia assistiva vai ignorá-lo como esperado. Mas se o SVG for uma imagem informativa, adicione o ARIA
role="img" ao elemento para que a TA o reconheça como uma imagem.
Em segundo lugar, os elementos <svg> não usam o atributo alt. Portanto, é necessário usar métodos de codificação diferentes para adicionar descrições alternativas às imagens informativas.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Imagens funcionais
Uma imagem funcional é conectada a uma ação. Um exemplo de imagem funcional é um logotipo que vincula à página inicial, uma lupa usada como botão de pesquisa ou um ícone de mídia social que direciona você a outro site ou app.
Assim como as imagens informativas, as funcionais precisam incluir uma descrição alternativa para informar a finalidade a todos os usuários. Ao contrário de uma imagem informativa, cada imagem funcional precisa descrever a ação da imagem, não os aspectos visuais.
No exemplo do logotipo, a imagem é informativa e prática, já que transmite informações e funciona como um link. Nesses casos, é possível adicionar descrições alternativas a cada elemento, mas isso não é obrigatório.
Uma maneira de adicionar descrições alternativas às Imagens é usando texto oculto visualmente. Quando você usa esse método, o texto é lido por leitores de tela porque está no DOM, mas fica visualmente oculto com a ajuda de CSS personalizado.
No snippet de código, "Navigate to the homepage" é o título do wrapper, e o texto alternativo da imagem é "Lovely Ladybugs for your Lawn". Ao ouvir o código do logotipo com um leitor de tela, você ouve o visual e a ação transmitida em uma imagem.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Imagens complexas
Uma imagem complexa geralmente exige mais explicação do que uma imagem decorativa, informativa ou funcional. É necessário ter uma descrição alternativa curta e longa para transmitir a mensagem completa. Imagens complexas incluem infográficos, mapas, gráficos e ilustrações complexas.
Assim como nos outros tipos de imagem, há diferentes métodos que você pode usar para adicionar descrições alternativas às imagens complexas.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Uma maneira de adicionar mais explicações a uma imagem é vincular a um recurso ou fornecer um link de navegação para uma explicação mais longa mais adiante na página. Esse método é uma boa opção não apenas para usuários de TA, mas também para pessoas com deficiências, como cognitivas, de aprendizado e de leitura, que podem se beneficiar de ter essas informações de imagem adicionais disponíveis na tela em vez de ocultas no código.
Outro método que você pode usar é anexar o atributo aria-describedby ao
elemento <img>. É possível vincular programaticamente a imagem a um ID que contenha uma
descrição mais longa. Esse método cria uma associação forte entre a imagem e a descrição completa. A descrição longa pode ser mostrada na tela ou ficar visualmente oculta, mas considere mantê-la visível para ajudar ainda mais pessoas.
Outra maneira de agrupar descrições alternativas curtas com uma mais longa é usar os elementos <figure> e <figcaption>. Esses elementos agem de maneira semelhante a
aria-describedby, agrupando elementos semanticamente e formando uma associação
mais forte entre a imagem e a descrição.
Adicionar ARIA role="group" garante a compatibilidade com versões anteriores de navegadores da Web
que não são compatíveis com a semântica do elemento <figure>.
Práticas recomendadas para texto alternativo
É claro que incluir texto alternativo não é suficiente. O texto também precisa ser significativo. Por exemplo, se a imagem for sobre um enxame de joaninhas mastigando as folhas de um arbusto de rosas premiado, mas o texto alternativo for "insetos", isso transmitiria a mensagem e a intenção completas da imagem? Definitivamente não.
As descrições alternativas precisam capturar o máximo de informações visuais relevantes possível e ser concisas. Embora não haja um limite para o número de caracteres que um leitor de tela pode ler, geralmente é recomendável limitar o texto alternativo a 150 caracteres ou menos para evitar o cansaço do leitor. Se você precisar adicionar mais contexto à imagem, use um dos padrões de imagem complexos, adicione um texto de legenda ou descreva melhor a imagem no texto principal.
Algumas práticas recomendadas de texto alternativo adicionais incluem:
- Evite usar palavras como "imagem de" ou "foto de" na descrição, porque o leitor de tela vai identificar esses tipos de arquivo para você.
- Ao nomear as imagens, seja o mais consistente e preciso possível. Os nomes das imagens são um substituto quando o texto alternativo está ausente ou é ignorado.
- Evite usar caracteres não alfabéticos (por exemplo, #, 9, &) e use traços entre as palavras em vez de sublinhados nos nomes das imagens ou no texto alternativo.
- Use a pontuação adequada sempre que possível. Sem ela, as descrições de imagens vão parecer uma frase longa, interminável e corrida.
- Escreva o texto alternativo como um humano, não como um robô. O uso excessivo de palavras-chave não beneficia ninguém. As pessoas que usam leitores de tela vão se irritar, e os algoritmos dos mecanismos de pesquisa vão penalizar você.