Garantir que os links e as imagens estejam acessíveis
Dois dos componentes mais comuns em qualquer página da Web são links e imagens. Estes itens têm um impacto profundo na acessibilidade. Garantir um bom texto de link e texto alternativo é um dos primeiros passos que você pode tomar para melhorar suas páginas para todos os usuários.
Texto da ligação
Os hiperlinks são essenciais para navegar na Web. Garantir que um leitor de tela possa ler links corretamente permite que todos os usuários naveguem pelo seu site.
Considere os dois links no texto de exemplo a seguir:
- "O pequeno pinguim, às vezes conhecido como pinguim-fada, é o menor pinguim do mundo. Clique aqui para mais informações."
- "O pequeno pinguim, às vezes conhecido como pinguim-fada, é o menor pinguim do mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para mais informações."
Nota
Os dois exemplos demonstram o que você não deve usar como desenvolvedor web.
Embora esses links possam parecer bons para alguém com visão total, eles não funcionarão como você poderia esperar com um leitor de tela. Lembre-se, os leitores de tela leem o texto. Se aparecer um URL no texto, o leitor de ecrã irá lê-lo. Em geral, o URL não transmite informações significativas e pode soar irritante. Poderá ter tido este problema se o seu telemóvel alguma vez leu de forma audível uma mensagem de texto com um URL.
Os leitores de tela também têm a capacidade de ler apenas os hiperlinks em uma página, da mesma forma que uma pessoa com visão verificaria uma página em busca de links. Se o texto do link for sempre "clique aqui", tudo o que o usuário ouvirá será "clique aqui, clique aqui, clique aqui, clique aqui, clique aqui, ..." Todos os links são agora indistinguíveis uns dos outros, o que é uma experiência frustrante.
A palavra "clique" também é um problema, porque nem todos os usuários clicarão. Os usuários do telefone irão tocar, os usuários do teclado poderão selecionar a tecla Enter ou a Barra de espaço, e outros clientes usarão outros meios.
Precisamos sempre usar texto de link significativo. Um bom texto de link descreve brevemente o que está do outro lado do link. No exemplo anterior sobre pequenos pinguins, o link vai para a página da Wikipédia sobre a espécie. A frase pinguins pequenos seria o texto do link perfeito porque deixa claro o que alguém vai aprender sobre se selecionar o link:
- "O pequeno pinguim, às vezes conhecido como pinguim-fada, é o menor pinguim do mundo."
Nota
Como um bônus para garantir que seu site seja acessível a todos, você também ajudará os mecanismos de pesquisa a navegar pelo seu site. Os motores de busca usam o texto do link para aprender os tópicos das páginas. Então, usar um bom texto de link ajuda a todos!
Atributos ARIA
Imagine a seguinte página de produto:
| Produto | Description | Encomenda |
|---|---|---|
| Widget | [Description]('#') |
[Order]('#') |
| Super widget | [Description]('#') |
[Order]('#') |
Este é um layout comum para uma página que mostra informações sobre vários itens em uma tabela, com links para a descrição e ordem. Duplicar o texto da descrição e da ordem faz sentido para alguém que está usando um navegador. No entanto, alguém que está usando um leitor de tela só ouviria as palavras descrição e ordem repetidas sem contexto.
Para oferecer suporte a esses tipos de cenários, o HTML oferece suporte a um conjunto de atributos conhecidos como ARIA (Accessible Rich Internet Applications). Você pode usar esses atributos para fornecer mais informações aos leitores de tela.
Por exemplo, você pode usar aria-label para descrever um link quando o formato da página não permite. A descrição do widget pode ser definida como:
<a href="#" aria-label="Widget description">description</a>
ARIA tem inúmeros usos além de adicionar texto para leitores de tela para ler para links. Você pode usá-lo para descrever as funções que determinados elementos desempenham quando o HTML semântico não está disponível. Ao criar uma árvore, por exemplo, você pode usar funções ARIA para descrever a interface para um leitor de tela:
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Importante
O uso de marcação semântica e bom texto de link como descrito anteriormente geralmente substitui o uso de ARIA. Navegadores e leitores de tela não são os únicos clientes que um usuário pode usar, e projetar sua página para funcionar bem para todos os clientes e usuários deve ser seu principal objetivo.
Texto alternativo para imagens
Como regra geral, os leitores de tela não podem ler o conteúdo de uma imagem. Embora alguns possam usar inteligência artificial, os resultados gerados podem não ser contextualmente precisos. Felizmente, garantir que as imagens sejam acessíveis não dá muito trabalho - é disso que se trata o alt atributo. Todas as imagens significativas devem ter um alt atributo (conhecido casualmente como texto alternativo) para descrever o que são ou as informações que estão tentando transmitir.
Imagens que são puramente decorativas devem ter seu alt atributo definido como uma cadeia vazia: alt="". Essa configuração evita que os leitores de tela anunciem desnecessariamente a imagem decorativa.
Nota
Como seria de esperar, os motores de busca não conseguem compreender o que está numa imagem. Eles se baseiam em texto alternativo. Então, mais uma vez, garantir que sua página esteja acessível fornece bônus!