Utilize texto alternativo

Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.

<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto"  title="Foto de um fusca preto" />

Enquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.

O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.

Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo alt=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

Descrição textual da imagem “d-link”

Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.

A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.

Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.

<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html"  title="ir a página da descrição textual da imagem, crianças brincando na praia">
     <img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>

<!--  A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
     [d]
</a> 

Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.
Um recurso utilizado é colocar, após a imagem, um link com a letra “d”, conhecido como “d-link”, o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.
Para quem não deseja prejudicar o design da página, com uma letra “d” após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra “d”.

Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.

Para fazer com que os links fiquem acessíveis “href acessível” para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.

Adicionando o Atributo “title”

O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.

<a href="acessibilidade.html" title="Ir a página de acessibilidade">
     Acessibilidade
</a>

Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.

Adicione Teclas de Atalho

É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.

<a href="acessibilidade.html" accesskey="a">Acessibilidade</a>

Pular para o Conteúdo

Permita que o usuário possa ir direto ao conteúdo desejado.

Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.

Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.

<div id="topo">
    <h1>titulo do site</h1> <!-- "essa área é muito importante p/ SEO mas é assunto para outro post" -->
    <a href="#conteudo" accesskey="p" title="ir ao conteúdo">Pular para o conteúdo</a>
</div>
<div id="menu">
    <!-- os intens do menu -->
</div>
<div id="conteudo">
    <!-- aqui é onde o usuário chegará, o conteúdo desejado -->
</div>

não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!

Navegando Através de Tab

Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.

Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.

Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.

Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.

<ul>
    <li><a href="#" tabindex="3">Link 1</a></li>
    <li><a href="#" tabindex="1">Link 2</a></li>
    <li><a href="#" tabindex="2">Link 3</a></li>
    <li><a href="#" tabindex="4">Link 4</a></li>
</ul>

Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler