À primeira vista, imagens acessíveis podem parecer um tema simples. Basta adicionar um texto alternativo a uma imagem e pronto. Mas o tema é mais variado do que algumas pessoas pensam. 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 compartilhá-las.
- Outras maneiras de melhorar suas imagens para apoiar pessoas com deficiência.
Finalidade e contexto da imagem
Antes mesmo de uma linha de código ser escrita, é preciso pensar sobre o ponto da imagem e como ela será usada. Fazer perguntas a si mesmo sobre a finalidade e o contexto da imagem pode ajudar a determinar a melhor forma de transmitir as informações a uma pessoa usando a tecnologia assistiva (TA), como leitores 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 provoca emoção ou incentiva o usuário a agir?
- Ou a imagem é apenas visual e sem propósito real?
Um fluxograma visual, como uma árvore de decisões de imagens, pode ajudar você a decidir a que categoria a imagem pertence.
Tente ocultar as imagens do seu site ou app da Web usando uma extensão do navegador ou outros métodos. Depois, pergunte a si mesmo: "Eu entendo o conteúdo que permanece?" 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, é possível determinar a maneira mais precisa de codificá-la.
Imagens decorativas
Uma imagem decorativa é um elemento visual que não acrescenta contexto ou informações para permitir que o usuário entenda melhor o contexto. Imagens decorativas são complementares e podem fornecer estilo em vez de substância.
Se você decidir que uma imagem é decorativa, ela precisa ser ocultada de maneira programática das ATs. Quando você programa a ocultação de uma imagem, isso sinaliza ao AT 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 vazio/nulo, a aplicação de ARIA ou a adição da imagem como um plano de fundo CSS. Confira abaixo alguns exemplos de como ocultar uma imagem decorativa dos usuários.
Vazio ou nulo alt
Um atributo de texto alternativo vazio/nulo é diferente de um atributo de texto alternativo ausente. Se o atributo de texto alternativo estiver ausente, o AT poderá ler o nome do arquivo ou o conteúdo ao redor para fornecer ao usuário mais informações sobre a imagem.
Papel definido como presentation ou none
Um papel definido como presentation ou none
remove a semântica de um elemento da exposição para a árvore
de acessibilidade. Enquanto isso, aria-hidden= "true"
remove o elemento inteiro 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, já que 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 detecta o arquivo de imagem. Antes de aplicar esse método, verifique se você quer que a imagem fique oculta.
Imagens informativas
Uma imagem informativa é uma imagem que transmite um conceito, uma ideia ou uma emoção simples. Os tipos de 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 descrevendo a finalidade dela. As descrições alternativas de imagens, geralmente abreviadas como "texto alternativo", dão aos usuários de AT mais contexto sobre uma imagem e os ajudam a entender melhor a mensagem ou a intenção de uma imagem.
Descrições alternativas simples usando
elementos <img>
são alcançadas com a inclusão do atributo alt, independentemente do tipo de arquivo para o qual ele
aponta, como .jpg, .png, .svg e outros.
<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, preste atenção à acessibilidade.
Primeiro, como os SVGs são semanticamente codificados, o AT pula eles por padrão.
Se você tem uma imagem decorativa, isso não é um problema, a AT vai ignorá-la conforme o esperado. No entanto, se você tiver uma imagem informativa, um role="img" ARIA
precisa ser adicionado ao padrão para que o AT reconheça a imagem como uma imagem.
Em segundo lugar, elementos <svg> não usam o atributo alt. Portanto, métodos de programação diferentes precisam ser
usados 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 vinculado à página inicial, uma lupa usada como botão de pesquisa ou um ícone de mídia social que direciona você para um site ou app diferente.
Assim como as imagens informativas, as imagens funcionais precisam incluir uma descrição alternativa para informar a todos os usuários sobre a finalidade. Ao contrário de uma imagem informativa, cada imagem funcional precisa descrever a ação da imagem, não os aspectos visuais.
No exemplo de logotipo, a imagem é informativa e acionável, já que é uma imagem que transmite informações e se comporta como um link. Nesses casos, é possível adicionar descrições alternativas a cada elemento, mas isso não é um requisito.
Uma maneira de adicionar descrições alternativas a imagens é usando texto visualmente oculto. 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 um CSS personalizado.
No snippet de código, é possível notar que "Navigate to the initial page" é o título do wrapper e que o texto alternativo da imagem é "Lovely Ladybugs for your Lawn". Ao ouvir o código do logotipo com um leitor de tela, você escuta tanto o visual quanto 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"></img>
</a>
</div>
Imagens complexas
Uma imagem complexa geralmente exige mais explicação do que uma imagem decorativa, informativa ou funcional. É necessário uma descrição alternativa curta e uma 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, existem métodos diferentes 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 explicação a uma imagem é vincular a um recurso ou fornecer um link de salto para uma explicação mais longa na página. Esse método é uma boa escolha, não apenas para usuários de TA, mas também ajuda pessoas com deficiências cognitivas, como deficiências cognitivas, de aprendizado e leitura, que podem se beneficiar com essas outras informações de imagem disponíveis na tela em vez de escondidas no código.
Outro método que pode ser usado é anexar o atributo aria-describedby ao
elemento <img>. Você pode vincular a imagem de maneira programática a um ID que contenha uma
descrição mais longa. Esse método cria uma forte associação entre a imagem
e a descrição completa. A descrição estendida pode ser mostrada na
tela ou visualmente oculta, mas considere mantê-la visível para oferecer suporte para ainda
mais pessoas.
Outra maneira de agrupar descrições alternativas curtas com uma mais longa é usar os elementos HTML5 <figure> e <figcaption>. Esses elementos agem de forma semelhante a aria-describedby, porque agrupa elementos semanticamente, formando uma associação mais forte entre a imagem e a descrição. A adição de role="group" ARIA garante a compatibilidade com versões anteriores de navegadores da Web mais antigos que não oferecem suporte à semântica nativa 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 bando de joaninhas mastigando as folhas da sua rosa, mas o texto alternativo for "insetos", isso transmite a mensagem completa e a intenção da imagem? Definitivamente não.
As descrições alternativas precisam capturar o máximo possível de informações visuais relevantes e ser sucintas. Embora não haja limite para o número de caracteres que um leitor de tela pode ler, geralmente é aconselhável limitar o texto alternativo a 150 caracteres ou menos para evitar cansaço. Se você precisar adicionar mais contexto à imagem, use um dos padrões complexos, adicione texto de legenda ou descreva ainda mais a imagem no texto principal.
Estas são algumas práticas recomendadas alternativas de texto:
- Evite usar palavras como "imagem de" ou "foto de" na descrição, já que o leitor de tela vai identificar esses tipos de arquivo para você.
- Ao nomear suas imagens, seja o mais consistente e preciso possível. Esses nomes são um substituto quando o texto alternativo está ausente ou é ignorado.
- Evite usar caracteres não alfa (por exemplo, #, 9 e) e use traços entre palavras em vez de sublinhados nos nomes das imagens ou no texto alternativo.
- Use pontuação adequada sempre que possível. Sem isso, as descrições das imagens parecem uma frase longa, sem fim.
- Escreva um texto alternativo como um humano, não um robô. O excesso de palavras-chave não beneficia ninguém. As pessoas que usam leitores de tela vão ficar irritadas, e os algoritmos do mecanismo de pesquisa vão penalizar você.
Teste seu conhecimento
Teste seus conhecimentos sobre ARIA e HTML
Como tornar imagens complexas acessíveis?
aria-describedby à imagem.