O texto alternativo (alt) é um texto descritivo anexado a elementos visuais, como ícones, imagens e fotos. Texto alternativo renderizado por ferramentas de acessibilidade de documentos PDF e da Web, como leitores de tela , que não podem "ler" elementos visuais como lêem texto.
Por que o texto alternativo é importante?
Os leitores de tela (e outras tecnologias assistivas) leem o texto alternativo como uma alternativa à experiência visual. O texto alternativo permite que esses e outros usuários entendam o contexto e o conteúdo dos elementos visuais.
O texto alternativo acessível é exigido pelas Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), às quais muitas leis como a Seção 508 (Estados Unidos) e AODA (Canadá) se referem.
Quando devo adicionar texto alternativo ou marcar elementos visuais como decorativos?
Certos elementos visuais em seu design são decorativos e não precisam ser descritos para leitores de tela.
Tendo problemas para determinar o que é um elemento decorativo e o que requer texto alternativo ? Consulte a tabela comparativa abaixo:
Elementos decorativos |
Elementos que requerem texto alternativo |
Adicionar interesse visual |
Exigir ou aceitar a entrada do usuário (como um botão "baixar" |
Crie um efeito estético |
Apresentar dados, como uma tabela ou gráfico |
O único objetivo é preencher o espaço em branco |
Representar um cenário, localização, emoção ou conceito relacionado a outro conteúdo que está sendo apresentado |
Não são cruciais para entender as informações apresentadas |
Servem a um propósito no contexto do conteúdo ao qual aparecem |
Representar um elemento de formatação, como formas abstratas ou linhas estilizadas que separam duas seções de texto |
Explique ou esclareça o texto próximo relacionado a recursos visuais ou outros elementos não textuais |
Que texto alternativo devo adicionar às imagens decorativas?
Para imagens decorativas, use o texto alternativo "Imagem decorativa" ou "Elemento decorativo" para marcar a imagem; não há necessidade de descrever os detalhes. Um leitor de tela pulará os elementos marcados como "decorativos".
Como faço para escrever um texto alternativo preciso e útil?
A maneira mais fácil de escrever um texto alternativo útil é imaginar que você está descrevendo uma imagem para alguém que não pode vê-la . O que eles precisam saber sobre o visual? Qual contexto é relevante e o que é demais?
O texto alternativo deve fornecer detalhes sobre o conteúdo não textual que é:
-
funcional
-
informativo
-
contextual
-
focado
Determine se a imagem pretende transmitir informações específicas ou se pretende evocar um sentimento ou emoção .
O que é 'conteúdo não textual'?
O conteúdo específico pode ser algo como:
-
uma imagem de um produto que está disponível para compra
-
um logotipo da empresa em um relatório
-
um vídeo de um casal em uma página de viagens
Ao descrever o conteúdo, considere qual deve ser o foco da descrição.
Considere esta imagem:
Você pode descrever esta imagem de várias maneiras diferentes, dependendo de sua finalidade no contexto em que aparece .
-
Em uma página da web com uma receita para este prato, identificando o prato pelo nome e descrevendo seus componentes e como ele aparece (por exemplo, "Uma tigela de molho de iogurte batido regado com azeite e polvilhado com raminhos de endro e especiarias aparece em um fundo cinza claro mesa ao lado de um pedaço de pão integral crocante.")
-
Em um anúncio de talheres, onde a tigela é um produto à venda (por exemplo, "Uma tigela moderna de barro, com cerca de 6" de largura, com um acabamento cinza salpicado fica sobre uma mesa. A tigela contém uma pasta de iogurte e aparece ao lado de uma peça de pão.")
-
Em um site de uma empresa de laticínios (por exemplo, "Uma tigela de pasta feita com iogurte orgânico fresco de origem local aparece em uma mesa ao lado de uma fatia de pão integral").
Devo incluir texto no texto alternativo que descreve o conteúdo não textual?
Uma imagem, vídeo ou outro elemento de conteúdo não textual pode incluir texto ou outros caracteres que talvez você precise descrever em texto alternativo.
No GIF animado acima, uma criança está em pé na frente de um adulto. A criança está segurando uma caixa com algo escrito . Você pode descrever esta imagem de várias maneiras diferentes, dependendo do contexto em que ela aparece:
-
Em um site com um artigo sobre paternidade (por exemplo, "Um menino de 2 anos está na frente de sua mãe, vestindo uma camiseta branca e jeans e um moletom com zíper. O capuz está levantado e duas orelhas pequenas o capuz faz com que o menino pareça um ursinho de pelúcia. Sua mãe se ajoelha atrás dele, ajudando-o a ficar de pé e a segurar uma caixa de jogo de tabuleiro.")
-
Em um site que anuncia brinquedos e jogos de tabuleiro para crianças (por exemplo, "Uma criança pequena segura o jogo de festa 'Twister' em uma caixa. Sua mãe, que se ajoelha atrás dele, está ajudando o menino a ficar de pé e segurar a caixa.")
-
Em um site que anuncia roupas infantis (por exemplo, "Um menino de dois anos usa um de nossos moletons de pelúcia felpudos na cor marrom, com duas orelhas de urso no capuz. Sua mãe se ajoelha atrás dele, ajudando o menino a ficar de pé e segurar uma caixa.")
Dependendo de quais informações são importantes para o leitor entender, o texto alternativo pode mudar o foco para destacar ou minimizar detalhes, incluindo quaisquer caracteres visíveis como texto ou números que aparecem no conteúdo não textual.
Como faço para escrever texto alternativo para imagens de texto puro?
É sempre melhor usar texto do que imagens de texto quando você deseja incluir informações importantes em um documento ou design.
Se você estiver usando uma imagem de texto , simplesmente escreva no texto alternativo o texto que aparece no elemento visual.
A imagem acima, mostrando um bloco de texto "informativo", deve ser descrita com texto alternativo que reflita exatamente o que está escrito no texto da imagem :
"Escrever texto alternativo? Certifique-se de que todas as imagens de texto sejam transcritas exatamente como aparecem. Não há necessidade de incluir "Uma imagem de texto que lê..."; um leitor de tela identificará automaticamente o elemento como uma imagem."
Como incluo dados complexos no texto alternativo?
Alguns elementos visuais em seu design podem incluir dados complexos ou uma grande quantidade de dados ; elementos como gráficos, tabelas, gráficos ou mapas.
Veja o fluxograma abaixo, por exemplo. No contexto deste artigo, este gráfico pretende apresentar um exemplo de uma imagem complexa. Não é necessário que o texto alternativo descreva todo o conteúdo da imagem.
O texto alternativo curto fornece uma descrição simples de um elemento visual que exibe informações complexas.
Use um texto alternativo curto quando quiser que o leitor entenda qual conteúdo está em um elemento visual, mas os detalhes finos não são necessários.
Nesse caso, o texto alternativo curto para a imagem acima pode ser:
"Um fluxograma intitulado 'Você deve alugar ou comprar?'"
No entanto, em um artigo sobre os prós e contras de alugar e comprar , descrever o conteúdo da imagem em detalhes é crucial para o leitor entender o conteúdo.
O texto alternativo longo para esta imagem deve fornecer todos os detalhes necessários para que um leitor com deficiência visual entenda as informações que o visual está tentando comunicar.
O texto alternativo longo para esta imagem pode ser semelhante a:
"Fluxograma intitulado 'Você deve alugar ou comprar?' A caixa inicial contém a pergunta 'Você pretende ficar por mais de 5 anos?', com duas caixas subsequentes: 'Você tem uma posição financeiramente estável?' e 'Seu orçamento pode lidar com hipotecas, impostos, manutenção e outros custos?' As respostas possíveis para todas as perguntas são 'sim' e 'não'; todos os fluxos terminam em uma caixa marcada como 'Aluguel' ou 'Comprar' Fluxos que terminam em 'Aluguel': 1. Você planeja ficar por mais de 5 anos ? Sim; Você está em uma situação financeira estável? Não. 2. Você está planejando ficar por mais de 5 anos? Não; Seu orçamento pode lidar com hipotecas, etc.? Não. 3. Você está planejando ficar por mais de 5 anos? anos? Sim; Você está em uma situação financeira estável? Sim; Seu orçamento pode lidar com hipotecas, etc.? Não. Fluxos que terminam em 'Comprar': 1. Você planeja ficar por mais de 5 anos? Sim; Você está em uma posição financeiramente estável? Sim; Seu orçamento pode lidar com hipotecas, etc.? Sim. 2. Você pretende ficar por mais de 5 anos? Não; Seu orçamento pode lidar com hipotecas, etc.? Sim."
Como posso resumir dados em um gráfico ou infográfico?
Descrições longas de texto alternativo podem ficar, por falta de uma palavra melhor, longas .
Tente manter as informações o mais simples e sucintas possível, o máximo que puder.
No gráfico de barras abaixo, comparando a frequência com que os profissionais de marketing criam visualizações de dados, a descrição longa do texto alternativo deve incluir os dados e o contexto significativo relacionado ao que o gráfico representa.
A longa descrição do texto alternativo pode ser lida assim:
"Um gráfico de barras intitulado 'Os profissionais de marketing criam visualizações de dados regularmente'. A maioria (48%) dos profissionais de marketing cria visualizações de dados todas as semanas. Em seguida, 37% dos profissionais de marketing criam todos os meses. O segundo menor é 10% dos profissionais de marketing criando a cada poucos meses; e apenas 5% dos profissionais de marketing criam uma ou duas vezes por ano."
Dicas rápidas para escrever um texto alternativo significativo
-
Seja sucinto e use uma linguagem simples
-
Usar voz ativa
-
Não inclua palavras como “imagem de…”, “foto de…” ou “ícone de…”. Os leitores de tela anunciam a presença de imagens, portanto, essas descrições seriam redundantes (exceto nos casos em que o meio é crítico para o contexto do visual)
-
Evite abreviaturas
-
Sempre use um ponto (pontuação) no final do texto alternativo
Você está curioso para se inscrever? Confira nossos planos.