Texto Alternativo e Acessibilidade

O texto alternativo, também conhecido como “alt text”, é um recurso de acessibilidade online que embute em uma imagem (ou outra mídia visual) uma descrição em texto para ser lido por um leitor de telas, especialmente útil para pessoas cegas ou com alguma dificuldade visual. 

Tomei conhecimento deste recurso no twitter, no qual com frequência utilizo.

O texto descritivo da imagem é feito pelo usuário que a está enviando através de um campo apropriado, o qual muda um pouco de lugar dependendo do site.

No Chess.com fica no menu de upload da imagem.

Esse texto é vinculado à imagem e ficará arquivado no código fonte html da página, não fica visível junto ao texto normal, provavelmente por razões estéticas e literárias, porém está totalmente disponível para o aplicativo leitor de tela que eventualmente estiver sendo usado.

Você pode verificar isso facilmente abrindo o código fonte: botão auxiliar do mouse>código fonte da página>Control+F> digita na busca alt=”. Vai destacar todas as descrições na página. Ou você pode instalar um aplicativo leitor de tela.

DICA: se vai instalar o NVDA que linkei acima e optar pela versão portátil, saiba que o instalador NÃO cria uma subpasta automaticamente, então quando escolher o diretório de instalação lembre-se de criar uma nova pasta manualmente. 

É um gesto muito bacana incluir alt text nas mídias, pois considera as possíveis limitações de quem eventualmente vai ler o texto, nós que não temos essas limitações com frequência esquecemos ou até ignoramos o quanto algumas coisas no dia-a-dia são simples pra gente, mas muito difícil pra outras pessoas. 

Todavia, a descrição tem que ser feito por um humano, pois as IA’s especializadas nisso ainda estão engatinhando (chupa essa skynet), embora eu ache que elas chegam lá um dia (skynet nunca falei mal). 

Mas como fazer uma descrição de imagem? Você me pergunta.

Segue algumas dicas descaradamente copiadas do pessoal do twitter, porque o artigo deles ficou muito bom, ctrl+x ctrl+v:

1. Capture o que é importante:

É importante capturar ação, movimento, relacionamentos, importância, detalhes visuais e qualquer coisa incomum.

Mencione pessoas, animais, coisas, os nomes delas (se relevante) e o relacionamento entre si. Dependendo da relevância do tópico, mencione raça, gênero, idade etc. das pessoas;

2. Seja sucinto, claro e detalhado:

O limite de caracteres para descrições de imagem é 1.000 [no twitter]. Algumas tecnologias assistivas (como leitores de tela) podem interromper a leitura das descrições após 200-250 caracteres. Embora esse não seja o caso, ainda é importante ser sucinto na sua descrição;

3. Seja objetivo; 

4. Escreva ou resuma o texto nas imagens;

5. Cuidado com siglas e abreviações: 

As siglas devem estar em maiúsculas. Se não estiverem, alguns leitores de tela poderão enxergá-las como palavras, o que pode não fazer sentido no contexto.[...]

6. Inclua os detalhes do tipo de imagem;

7. Use a estrutura normal de frase e maiúsculas e minúsculas;

8. Evite informações redundantes;

/fim do plágio: eu resumi bastante aqui, leiam o artigo deles inteiro, tem mais explicações e até exemplos ilustrativos. Segue o link de novo.

Todas essas dicas são mais uma inspiração do que regras, não existe uma receita pronta, a descrição vai seguir muito o estilo literário de quem estiver fazendo, o importante é fazer.

Mas como diz o ditado, em casa de ferreiro o espeto é de pau, apesar de este que vos escreve conhecer o citado recurso e entender sua devida importância, os artigos que escrevi até agora no blog não tem alt texto nas imagens porque a anta aqui esqueceu de colocar. 

E olha que gosto de fazer descrições, acho um exercício interessante traduzir em palavras o que os olhos veem.

Pretendo corrigir isso com o tempo, mas vai ser um desafio e tanto, pois pelo que testei no Chess.com, não tem como incluir o alt texto depois que a imagem é carregada, teria que excluir e enviar de novo. 

Mesma coisa no wordpress, apesar de ser possível editar os metadados das imagens na biblioteca de mídia e inserir alt text (e outros detalhes), isso somente reflete nos posts já publicados se a imagem em questão for destacada (thumbnail), nas outras tem que editar o post mesmo. Como tenho poucos artigos, vou atualizando eles com o tempo. Nada impossível, mas fiquei um pouco frustrado com isso, afinal, os demais metadados das imagens são atualizados conforme alterados na biblioteca.

Curiosamente, enquanto fazia uns testes para verificar esse recurso, notei que não conseguia inserir alt texto nas imagens de abertura no blog do Chess.com, como visto na imagem, não tem campo de alt text, só de “créditos/legenda”.

Escrevi para o pessoal do suporte pedindo ajuda nessa parte, ainda no aguardo de uma resposta.

Por ora uma solução possível é incluir a descrição no campo de crédito/legenda, apesar do magro limite de 160 caracteres (afinal, não foi feito pra isso), ao passo que o campo de alt text “normal” tem um limite bem mais generoso de caracteres, nos testes consegui inserir 2.000 e parece que é possível inserir ainda mais. Contudo, como dito na listinha que passei acima, o ideal é ser objetivo na descrição e ficar abaixo disso, se possível.

Ainda no Chess.com, nos meus testes, a única área onde não carregou alt text foi na seção de comentários do xadrez por votação, tanto no fórum público como no privado, mas possivelmente tem outras áreas com esse bug.

Aqui um exemplo de como não fazer alt text:

Descrição da imagem.

No centro um “corvalo” selado e com rédeas, um cavalo robótico com características de corvo, seu corpo é coberto por uma armadura metálica em tons de preto, tem um longo bico e olhos de corvo. Tem detalhes em vermelho luminoso nos olhos, pescoço e peito, nas articulações são círculos luminosos.  

Ao lado está Rick Sanchez de pé, personagem de Rick and Morty, veste uma armadura em tons de preto com gola alta e luvas longas, usa uma capa preta e aberta, seu chapéu pontudo é comprido e cobre quase toda face, revelando apenas lábios, partes do nariz, cabelo e olho esquerdo, sua expressão é séria. Tem um corvo preto empoleirado em um tipo de chifre que desponta de cada um de seus ombros. 

Ao fundo um céu azul ensolarado com nuvens brancas. 

Em segundo plano, quase toda encoberto pelos elementos do primeiro plano, vê-se uma cadeia de montanhas no horizonte.

A esquerda uma figurante de aparência élfica olha para Rick e seu corvalo, veste um quimono verde e usa um coque samurai.

Usei essa imagem como thumbnail em um post e decidi fazer uma descrição, acabei me empolgando e bati os 1.000 caracteres. Dá pra ser bem mais objetivo e sucinto que isso (não que eu vá tentar).

Um ponto que ainda não estou certo é a descrição de diagramas de xadrez, atualmente uso a notação FEN, porém, não sei se é algo prático para quem usa leitor de telas, pois teria que copiar essa notação e colar noutra aba para conseguir visualizar a posição. Possivelmente uma notação descritiva entregue uma experiência mais fluida.  

Por outro lado, perguntei sobre isso para o Lucas Radaelli no twitter, ele me falou que ajuda bastante, então vou continuar usando.

Enfim, meu apelo é que se você for escrever em um blog, abrir um tópico no fórum ou só comentar mesmo, e usar uma imagem, saiba que existe esse recurso e que vale a pena um pouco de esforço para fazer uma pequena descrição, eventualmente alguém do outro lado da tela ficará muito grato pela ajuda. 

Dicas finais que percebi enquanto subia esse texto: evite aspas e não coloque links nem arrobas em alt text no Chess.com, vai bugar o código fonte e sumir com a descrição. Se precisar coloque espaços assim (Chess   .com ou @   AdemirD)

Ps. Todas as imagens deste post possuem alt text incluído, nunca é tarde pra começar.