{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2017/2017-10-26-texto-alternativo-o-guia-definitivo",
  "path": "/blog/2017/2017-10-26-texto-alternativo-o-guia-definitivo",
  "publishedAt": "2017-10-26T12:47:26.632Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "texto alternativo"
  ],
  "textContent": "Texto alternativo: o guia definitivo\n\nEsta publicação contém tudo o que você precisa saber sobre texto alternativo! Quando usá-los e como desenhá-los perfeitamente. Por mim, Daniel, um desenvolvedor web com deficiência visual que usa um leitor de tela no meu dia-a-dia.\n\nTexto postado originalmente em https://axesslab.com/alt-texts/ escrito por Daniel Göransson, adaptado e traduzido por Bruno Pulis.\n\nMinhas experiência com imagens na web\n\nEu uso uma combinação de ampliação e leitores de tela ao navegar na web.\n\nComo princípio básico, uso ampliação em telas maiores e leitores de tela em dispositivos menores.\n\nEu, como qualquer um, encontro várias imagens surfando na web. Se eu estiver usando um leitor de tela e depender de obter uma descrição da imagem — o texto alternativo — mostra essa informação.\n\nMuitas vezes o texto alternativo não ajuda, sendo um desperdício do meu tempo porque não transmite qualquer significado.\n\nDeixe-me ilustrar isso na página inicial do The Verge. Isto é o que exibe para pessoas com visão:\n\nAbaixo é o que eu vejo. Eu substituí as imagens com o que meu leitor de tela lê:\n\nNão ajuda muito, não é?\n\nAqui estão algumas falhas comuns de texto alternativo que encontro:\n\n- “cropped_img32_900px.png” ou “1521591232.jpg” — o nome dos arquivos, provalvelmente porque a imagem não tem o atributo alt definido.\n- “<Article title>” — em todas as imagens do artigo, provavelmente para melhorar o ranking de busca (SEO).\n- “Fotografa: Emma Lee” — provalvelmente porque o editor da redação não sabe para que serve um texto alternativo\n\nOs textos alternativos nem sempre são tão ruins, mas geralmente há muito a melhorar. Então, se você é um iniciante ou quer levar o seu “jogo” para o próximo nível, aqui está o nosso guia final para textos alternativos!\n\nO que é um texto alternativo?\n\nUm texto alternativo e uma descrição de uma imagem que mostrar para pessoas que por alguma razão não conseguem ver a imagem. Entre outros, textos alternativos auxiliam:\n\n- Pessoas com baixa visão ou cegas;\n- Pessoas que desabilitaram imagem para economizar dados;\n- Motores de busca (ex: Google, Bing).\n\nO primeiro grupo — pessoa com baixa visa ou cegas — são o grupo de mais se beneficia com os textos alternativos. Eles utilizam algo chamado leitores de tela para navegar na web.\n\nUm leitor de tela transforma uma informação visual em fala ou braile. Para fazer isso com precisão, as imagens do seu site precisam ter textos alternativos.\n\nTextos alternativos são super importantes! Tão importantes que o WCAG tem textos alternativos como sua primeira _guideline_ a ser seguida:\n\n> Todo o conteúdo não textual que é apresentado ao usuário tem uma alternativa de texto que serve o propósito equivalente._\n> – WCAG guideline 1.1.1_\n\nComo eu adiciona um texto alternativo?\n\nNo HTML, um texto alternativo é um atributo em um elemento de imagem:\n\nA maioria dos gerenciadores de conteúdo, como WordPress, permite você criar um texto alternativo quando subir a imagem:\n\nEsse campo geralmente é chamado de Texto Alternativo mas em algumas interfaces é chamado de “descrição da imagem” ou algo similar.\n\nEstá gostando desse conteúdo?\n\nEscrevo semanalmente na Pulis Letters e compartilho insights valiosos sobre acessibilidade digital para desenvolvedores, QA’s e designers.\n\nTe espero lá.\n\nVamos criar o texto alternativo perfeito\n\nAqui estão os passos para criar textos alternativos fabulosos!\n\nDescreva a imagem\n\nPode parecer óbvio, mas um texto alternativo deve descrever uma imagem. Por exemplo:\n\n“Grupo de pessoas em uma estação de trem.”\n“Bebê feliz brincando numa caixa de areia.”\n“Cinco pessoas na fila do supermercado.”\n\nAs coisas que não pertencem a um texto alternativo são:\n\n- O nome do fotografo. Isso é bem comum, mas não faz sentido.\n- Palavras chave para SEO. Não preencha o texto alternativo com palavras irrelevantes que você espera classificar no page rank do Google. Não é por isso que são suficientes textos e isso irá confundir seus usuários.\n\nConteúdo do texto alternativo depende do seu contexto\n\nComo você descreve a imagem depende do seu contexto. Deixe-me dar-lhe um exemplo:\n\nSe essa imagem fosse exibida em um artigo sobre fotografia, o texto alternativo poderia ser algo ao longo das linhas de:\n\n“Close, fotografia em escala de cinza do homem de fora, face em foco, fundo não focado”.\n\nSe a imagem estiver em um site sobre uma série de TV, um texto alternativo apropriado pode ser completamente diferente:\n\n“Estrela do show, Adam Lee, olhando estridente na chuva”.\n\nEntão, escreva um texto alternativo que seja o mais significativo possível para o usuário no contexto em que eles estão.\n\nMantenha-o conciso\n\nLendo a sessão anterior, você pode estar pensando consigo: “Eu como um usuário vidente, posso perceber vários detalhes das imagens, como quem é, como é fotografado, tipo de jaqueta, idade aproximada do cara e muito mais.\n\nPor que não escrever um texto alternativo detalhado e longo para que um usuário com deficiência visual obtenha tanta informação quanto eu?\n\nFico contente por ter perguntado!\n\nBem francamente, você pode inserir a informação necessária. Você também pode obter as informações necessárias da imagem, e é isso que estamos tentando alcançar para usuários com leitores de tela também. _Dê as informações necessárias no texto alternativo, mas torne-o o mais curto e conciso possível._\n\nUma das poucas vezes que você deve escrever textos alternativos longos é quando você está descrevendo uma imagem contendo texto importante. Idealmente, você não deve ter imagens de texto, mas às vezes você precisa. Como em algumas capturas de tela ou fotos.\n\nMas a regra geral é manter isso conciso e evitar uma experiência detalhada.\n\nNão diga isso é uma imagem\n\nNão inicie um texto alternativo com “Imagem de”, “Foto de” ou similar. O leitor de tela adiciona isso por padrão. Então se você escrever “Imagem de” no texto alternativo, o leitor de tela dirá “Imagem Imagem de…” e bom isso não muito agradável.\n\nUma dica que você pode incluir no texto alternativo e no final dela descrever o tipo da imagem, como uma Ilustração.\n\n> “Cão pulando através de um aro. Ilustração.”\n\nFim com um período\n\nTermine um texto alternativo com um período. Isso tornará os leitores de tela em pausa um pouco após a última palavra no texto alternativo, o que cria uma experiência de leitura mais agradável para o usuário.\n\nNão use o atributo title\n\nMuitas interfaces têm um campo para adicionar textos no title a imagens próximas de onde você pode adicionar um texto alternativo. Ignore o texto no atributo title!\n\nNinguém os usa — eles não trabalham em telas sensíveis ao toque e na área de trabalho eles exigem que o usuário paira por um tempo sobre uma imagem, o que ninguém faz.\n\nAlém disso, adicionar um atributo title faz com que alguns leitores de tela leiam o title e o texto alternativo, que se torna redundante. Então, não adicione um atributo title.\n\nQuando não usar um texto alternativo\n\nNa maioria dos casos você deve usar um texto alternativo para imagens, mas existem algumas exceções onde você deve deixar o atributo alt em branco.\n\n> Nota importante: nunca remova o atributo alt, pois irá quebra o padrão HTML. Mas você é permitido inserir uma string vazia, desta forma: alt=””. Faça isso nos seguinte casos.\n\nImagens repetidas em feeds\n\nImagine que você está percorrendo seu feed do Twitter. Toda vez que quiser ler um novo tweet, primeiro você deve ouvir “Foto de perfil do usuário <nome de usuário da pessoa que postou>”. Na minha opinião, isso seria super irritante!\n\nOutros exemplos de feeds são:\n\n- Uma lista de links para artigos. Como o da página Artigos\n- Chat ou feed de mensagens\n- Feeds de comentários\n\nPortanto, para uma experiência de usuário ideal, deixe o texto alternativo em branco para imagens que são usadas repetidamente em feeds.\n\nÍcones com labels\n\nVocê sempre deve ter labels ao lado de ícones. Supondo que você faça, o ícone não deve ter um texto alternativo. Deixe-me explicar o porquê!\n\nVamos dar um exemplo de mídia social como exemplo:\n\nSe você escrevesse um texto alternativo para o ícone do Facebook, um leitor de tela diria algo ao longo da linha: “Facebook Facebook”. Muito redundante!\n\nOK, isso não é tecnicamente sobre textos alternativos, mas ainda é importante: certifique-se de que tanto o ícone quanto o texto do link estão no mesmo atributo de link, para obter uma experiência fluída. Como isso:\n\nOutro erro comum está nos botões de menus:\n\nSe o botão de menu não tiver um label visual — o que, de maneira direta, é realmente ruim para a experiência do usuário, ele precisa de um texto alternativo (ou outra maneira de descrever sua função no código, como aria-label). Explique a função do ícone, como “Menu”. Não escreva “Três linhas horizontais” ou “Hambúrguer principal”, que infelizmente são exemplos reais em que eu tropecei.\n\nSe o ícone do menu tiver um label, você deve deixar o texto alternativo em branco. Muitas vezes eu encontro botões de menu que são lidos como “Menu Menu”. Quando cheguei no menu de menu hambúrguer. Um pouco confuso, não diria?\n\nImagens em links\n\nGeralmente uma imagem com um link é acompanhado com um texto. Como o exemplo abaixo:\n\nNesse caso, a imagem e o link devem estar na mesma tag de link no html. Você pode simplesmente deixar o texto alternativo em branco. O importante para o usuário é ouvir o texto do link.\n\nUm texto alternativo da imagem só distrai, adicionando informações que o usuário não achará necessário. A imagem provavelmente é encontrada na página que está vinculada, e então você pode dar uma boa explicação sobre ela no atributo alt.\n\nSe você realmente, precisar ter uma imagem em um link sem um texto de acompanhamento, então o texto alternativo deve descrever o destino do link, e não a imagem.\n\nImagens decorativas\n\nDe preferência, as imagens decorativas que não transmitem qualquer significado ao usuário devem ser colocadas como imagens de fundo em CSS. Provavelmente não é verdade, mas isso significa que você não precisa de textos alternativos sobre eles.\n\nEu classificaria a maioria das imagens nas quais você coloca o texto como decorativo. Você não precisa de um texto alternativo neles. Um exemplo é a imagem de fundo na página inicial do Netflix:\n\nCasos especiais\n\nLogos no banner\n\nLogos no banner quase sempre ligam para a página inicial do site. As opiniões variam um pouco sobre o tema de textos alternativos para logotipos.\n\nAlguns dizem que deve incluir o nome da empresa, o fato de ser um logotipo e o destino do link. Como tal:\n\n“Axess Lab, logotipo, ir para página inicial.”\n\nNa minha opinião, isso é um pouco detalhado. Muito barulho! Como meu leitor de tela já me diz que é uma imagem e um link, só sinto que preciso ouvir o nome da empresa. Pelo fato de ser uma imagem, suponho que seja um logotipo e, pelo fato de ser um link, suponho que siga as convenções e os links para a página de início.\n\nSVG\n\nGráficos vetoriais escaláveis (svg) é um formato de imagem que está se tornando cada vez mais popular na web. E eu amo eles! Eles mantêm sua nitidez enquanto fazem zoom e ocupam menos espaço para que os sites carregem mais rápido.\n\nExistem dois caminhos principais para adicionar um SVG a uma página HTML\n\n- Dentro de um elemento img. Nesse caso, basta adicionar um texto alternativo como de costume:\n\n- Usando uma tag svg. Se você usar esse método, não pode adicionar um atributo alt porque não há suporte para isso. No entanto, você pode contornar isso adicionando dois atributos wai-aria: role=“img” e aria-label = “texto alternativo”.\n\nNa verdade, para o segundo caso, é suposto poder adicionar seu texto alternativo como título-elemento no svg, mas não há suporte suficiente para isso de navegadores e tecnologias de assistivas no momento.\n\nO computador não pode fazer isso por mim?\n\nEmbora a Machine Learning e a inteligência artificial melhorem rapidamente e possam descrever algumas imagens com bastante precisão, elas não são suficientemente boas para entender o contexto relevante no momento. Além disso, as máquinas não são suficientemente boas para decidir o que é \"conciso\", e muitas vezes descreverão muito ou muito pouco da imagem.\n\nFacebook atualmente incluiu uma feature que descreve imagens automaticamente. Mas eu percebo que as descrições são muito genéricas. Uma imagem no meu feedback agora é descrita como: “Gatos dentro de casa”. A foto atual exibe um gato caçando um rato de brinquedo.\n\nEntão me desculpe, você ainda deve escrever textos alternativos!\n\nObrigado por criar uma web melhor\n\nEstou feliz por você ter lido até aqui! Isso quer dizer que você se importa em desenvolver uma web um ligar melhor para todos os usuários. Compartilhe o conhecimento e continue sendo incrível!",
  "title": "Texto alternativo: o guia definitivo"
}