o atributo alt é usado para atribuir uma alternativa de texto a um id
. O texto alternativo é usado sempre que a imagem não é renderizada e por tecnologias de assistência como leitores de tela. In addition, search engines that offer image-based search capabilities rely on thealttext to determine the meaning of images., Forneceraltvalores para imagens realmente não é opcional, é algo que você absolutamente deve fazer se você é um designer, desenvolvedor ou webmaster. No entanto, usar o atributoaltcorretamente é tão importante quanto usá-lo em primeiro lugar.
Guidelines for Proper Use of Alternative Text
When used properly, text alternatives for visual elements mean that users who cannot view images can still make use of the full functionality of a website. No entanto, quando as alternativas de texto não são usadas corretamente, elas podem criar confusão., Siga estas regras simples para fornecer aos visitantes do seu site a melhor experiência possível.
forneça sempre texto alternativo
pode parecer desnecessário dizer isto, mas deve sempre adicionar o alt atribuído a cada imagem que utiliza numa página web. Mesmo em alguns casos especiais em que nenhum texto é fornecido, o atributo alt deve ainda estar presente e deixado em branco.,
os leitores do ecrã de Ajuda saltam sobre as imagens estéticas
quando um leitor de ecrã encontra uma imagem sem o id
atributo que irá simplesmente dizer ao visitante do Site “imagem”. Isso deixa o visitante se perguntando Que informações eles podem estar faltando. No entanto, se o atributo de texto alternativo estiver presente, mas ficar vazio, como estealt="", o leitor de tela entende que a imagem deve ser ignorada inteiramente. Use este conhecimento para dizer tecnologias de assistência como leitores de tela quais as imagens que eles devem simplesmente ignorar., Se você tem imagens que são fornecidas puramente para fins de design ou estéticos – tal imagem usada para renderizar uma barra horizontal – fornecer um atributo de texto alternativo vazio para que as tecnologias de assistência saibam que eles devem ignorar a imagem completamente.
duplicar a mensagem transmitida pela imagem
Que informação a imagem transmite? Encapsule essa informação em uma breve declaração e use isso como a alternativa de texto., O ponto de alt texto é transmitir o mesmo significado exato para um visitante que não pode ver uma imagem como a própria imagem transmite a um visitante que pode vê-la. Nos casos em que a imagem fornece informações textuais, basta fornecer o mesmo texto exato que o alt texto.
diga aos visitantes onde as imagens ligadas vão
as imagens são frequentemente usadas como links para outros sites. Pode ser o caso de você estar usando imagens de botões para links, ou você pode simplesmente ligar uma imagem em um artigo para a fonte da imagem., Se você estiver ligando imagens para outros sites use o texto alternativo da imagem para dizer aos usuários para onde o link vai.
casos especiais
seguindo as orientações acima, você estará fornecendo melhores alternativas de texto do que muitos sites comuns. Embora estas orientações abranjam a grande maioria das necessidades de texto alternativo, há alguns casos especiais de que devem estar cientes.
Use 125 caracteres ou menos
muitas tecnologias de apoio processam texto em pedaços de 125 caracteres. Melhore a experiência dos usuários de leitor de tela, limitando o seu texto alternativo a 125 caracteres., Se você não conseguir reduzir o alt texto para menos de 125 caracteres, forneça uma descrição estendida em uma página separada e link para ele. Por exemplo, se você tem uma imagem de um diagrama que não pode ser resumida em menos de 125 caracteres, atribuir à imagem um pequeno texto alternativo, como “Diagrama de algo incrível” (mas na verdade dizer ao visitante que coisa incrível é mostrado no diagrama)., Há duas maneiras diferentes você pode completar a curto alternativa de texto com uma descrição estendida que oferece muito mais detalhes:
- Imediatamente abaixo da imagem, insira um link que diz algo como Descrição Estendida de Incrível Diagrama e um link para uma página separada com uma descrição estendida.
- imediatamente abaixo ou ao lado da imagem adicione uma letra maiúscula D e ligue-a à descrição estendida numa página separada. Este link é chamado de D-Link e alguns especialistas em Acessibilidade defendem a sua utilização, mas nós preferimos e recomendamos o método descrito acima.,
outra forma de fornecer uma descrição estendida no passado foi utilizar o atributo longdesc. No entanto, você deve saber que foi depreciado em HTML5, e não é uma boa maneira de fornecer uma descrição estendida por mais tempo. Pular longdesc e usar um dos dois métodos descritos acima para fornecer uma descrição estendida de uma imagem complexa.
forneça um breve resumo para as imagens que já foram descritas
haverá alturas em que irá usar uma imagem e descrevê-la no texto do parágrafo na página., Por exemplo, você pode postar uma foto de uma recente viagem de pesca e incluir no texto do parágrafo na página uma descrição da imagem que é algo como isso “eu tive um grande tempo pescando neste fim de semana passado e pegou o baixo de 7 libras que você vê na imagem!”Em um caso como este, ainda é importante fornecer uma alternativa de texto para a imagem, mas o texto usado pode ser muito curto. No caso do nosso exemplo de pesca, bom alttexto pode parecer algo como isto:alt="weekend fishing trip".,
pontos A Recordar
utilização adequada do atributo alt pode ser resumido em quatro pontos-chave:
- utilize sempre o atributo
alt, mesmo que o deixe em branco. - Keep alternative text brief.
- duplicar a informação transmitida pela imagem.diga aos visitantes para onde vão as imagens ligadas.
Agora você sabe como é importante fornecer uma alternativa de texto para cada imagem em seu site. Melhor ainda, você sabe como usar o texto alternativo corretamente para que ele seja o mais eficaz possível.,
Deixe uma resposta