Imagens acessíveis podem parecer um tópico simples à primeira vista. Você adiciona algum "texto alternativo" em uma imagem e pronto. Mas o assunto tem mais nuances do que algumas pessoas pensam. Nesta seção, analisaremos:
- 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ências.
Finalidade e contexto da imagem
Antes mesmo de uma linha de código ser escrita, você deve primeiro pensar no ponto da imagem e como ela será usada. Fazer a si mesmo perguntas sobre o o propósito e o contexto da imagem podem ajudar você a determinar a melhor forma de transmitir a informações para uma pessoa usando 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 desperta emoções ou leva o usuário a agir?
- Ou a imagem é apenas um visual visual sem propósito real?
Um fluxograma visual, como um árvore de decisão de imagem, pode ajudar a decidir a que categoria sua imagem pertence.
Tente ocultar as imagens no seu site ou app da Web usando uma extensão de 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 é informativo de alguma forma e contextualmente necessário. Quando você determinar a finalidade da imagem, você pode determinar a forma mais precisa de para isso.
Imagens decorativas
Uma imagem decorativa é uma elemento visual que não adiciona contexto ou informações adicionais que permitem para o usuário entender melhor o contexto. As imagens decorativas são complementares e podem oferecer estilo em vez de substância.
Se você decidir que uma imagem é decorativa, ela precisará ser ocultada de maneira programática das ATs. Quando você programa uma imagem para ser ocultada, isso sinaliza à AT que o 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, inclusive usando uma alternativa de texto vazio/nulo, aplicar ARIA ou adicionando a imagem como um plano de fundo CSS. Confira abaixo alguns exemplos de como ocultar imagem decorativa dos usuários.
alt vazio ou nulo
Um atributo de texto alternativo vazio/nulo é diferente de uma alternativa ausente . Se o atributo de texto alternativo estiver ausente, a AT poderá ler o nome do arquivo ou o conteúdo ao redor para dar ao usuário mais informações sobre a imagem.
Papel definido como presentation ou none
Uma função definida como presentation ou none
remove a semântica de um elemento da exposição para a acessibilidade
árvore. Enquanto isso, aria-hidden= "true"
irá remover o elemento inteiro, e todos os seus filhos, 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
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 a arquivo de imagem. Certifique-se de que a imagem fique oculta antes de aplicar esse método.
Imagens informativas
Uma imagem informativa transmite um conceito, ideia ou 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, muitas vezes abreviadas como "texto alternativo", dão aos usuários da TA mais contexto sobre uma imagem e os ajudam a entender melhor a mensagem ou intenção.
Descrições alternativas simples usando
Elementos <img>
são conseguidos com a inclusão do atributo alt, independentemente do tipo de arquivo
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, é necessário prestar atenção à acessibilidade.
Primeiro, como os SVGs são codificados semanticamente, a AT os ignorará por padrão.
Se você tiver uma imagem decorativa, isto não é um problema; a AT irá ignorar
da forma adequada. Mas, se você tiver uma imagem informativa, uma role="img" ARIA
precisa ser adicionado ao padrão para que a AT o reconheça como uma imagem.
Segundo, os elementos <svg> não usam o atributo alt. Portanto,
diferentes métodos de codificação devem ser
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 uma imagem que direciona a um site ou app diferente.
Assim como as informativas, as funcionais precisam incluir uma alternativa descrição para informar todos os usuários de sua finalidade. Ao contrário de uma imagem informativa, cada imagem funcional precisa descrever a ação da imagem, não a aspectos visuais.
No exemplo de logotipo, a imagem é informativa e acionável, pois é ao mesmo tempo uma imagem que transmite informações e se comporta como um link. Em casos como esses, você pode adicionar descrições alternativas para cada elemento, mas não é um requisito fundamental.
Uma forma de adicionar descrições alternativas às imagens é usar em textos. Quando você usa esse método, o texto será lido por leitores de tela, porque ele fica no DOM, mas fica oculto visualmente com a ajuda do CSS personalizado.
No snippet de código, é possível ver que "Navegar até a página inicial" é título de wrapper e o texto alternativo da imagem será "Adoráveis joaninhas para sua gramado". Quando você ouve o código do logotipo com um leitor de tela, ouve o 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"></img>
</a>
</div>
Imagens complexas
Uma imagem complexa geralmente exige mais explicação do que um texto decorativo, informativo imagem funcional. Ela requer uma alternativa curta e uma longa para transmitir a mensagem completa. Imagens complexas incluem infográficos, mapas, gráficos e ilustrações complexas. Assim como acontece com os outros de imagem, há diferentes métodos que podem ser usados para adicionar descrições à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 forma de adicionar outras explicações a uma imagem é criar um link para um recurso ou fornecer um link direto para uma explicação mais longa posteriormente na página. Esse método é uma boa escolha, não só para usuários de TAs, mas também para ajudar pessoas com deficiências, como cognitivas, de aprendizagem e de leitura deficiências, que poderiam se beneficiar com essa imagem adicional informações prontamente disponíveis na tela, em vez de escondidas no código.
Outro método que pode ser usado é anexar o atributo aria-describedby ao
<img>. Você pode vincular programaticamente a imagem a um ID que contém um
uma descrição mais longa. Esse método cria uma associação forte entre a imagem
e a descrição completa. A descrição estendida pode ser exibida
ou oculto visualmente, mas considere mantê-lo visível para o suporte, mesmo
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 maneira semelhante à aria-describedby, porque agrupa elementos semanticamente, 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 mais antigos que não são compatíveis com a semântica nativa do elemento <figure>.
Práticas recomendadas para textos alternativos
É claro que incluir texto alternativo não é suficiente. O texto também deve ser significativos. Por exemplo, se a imagem for sobre um bando de joaninhas mastigando folhas de sua rosa rosa premiada, mas o texto alternativo diz "insetos", que transmitam 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 possível e sucinta. Embora não haja limite para o número de caracteres que leitor de tela possa ler, normalmente é aconselhável limitar o texto alternativo a Use até 150 caracteres para evitar que o leitor fique cansado. Se for preciso adicionar mais contexto à imagem, é possível usar um dos padrões complexos de imagem, adicionar o texto da legenda ou descrever melhor a imagem no texto principal.
Alguns textos alternativos recomendados práticas incluem:
- Evite usar palavras como "imagem de" ou "foto de" na descrição, já que o leitor de tela identificará esses tipos de arquivo para você.
- Ao nomear suas imagens, seja o mais consistente e preciso possível. Imagem são um substituto quando o texto alternativo está ausente ou é ignorado.
- Evite usar caracteres não alfanuméricos (por exemplo, #, 9 e &) e use traços entre palavras, em vez de sublinhados nos nomes ou textos alternativos das imagens.
- Use a pontuação correta sempre que possível. Sem isso, as descrições das imagens soa como uma frase longa, interminável e ininterrupta.
- Escreva um texto alternativo como um ser humano e não um robô. O excesso de palavras-chave não beneficiarão ninguém — as pessoas que usam leitores de tela ficarão aborrecidas e os algoritmos do mecanismo de pesquisa penalizarão você.
Teste seu conhecimento
Teste seus conhecimentos sobre ARIA e HTML
Como criar imagens complexas acessíveis?
aria-describedby à imagem.