Cartilha de Acessibilidade

8. Textos e Textos como hiperlink

8.1 Utilize o atributo "TITLE=...." para torná-lo mais compreensível.

Faça os links descritivo o suficiente para que tenha sentido mesmo quando lido fora do contexto.

Exemplo do código

<a href="/jornal.htm" title="Jornal o Aeroporto">O Aeroporto</a>

Comentário do código

Neste exemplo, ao navegar com a tecla TAB e posicionar o foco sobre o texto "Jornais", será lido o conteúdo do atributo TITLE, neste exemplo "Jornal o Aeroporto".

8.2 Evite utilizar a frase "Clique aqui" ou "Saiba mais...." sem contexto.

Exemplo do código (indevido)

BUG NO INTERNET EXPLORER
No início de agosto, a Microsoft publicou a correção para um bug no Internet Explorer, por meio do qual hackers poderiam invadir a máquina do internauta. Hoje, o site Bugnet.com confirmou que essa correção tem um furo.
Saiba mais...

<h3>BUG NO INTERNET EXPLORER<h3>
<p>No início de agosto, a Microsoft publicou a correção para um bug no Internet 
Explorer, por meio do qual hackers poderiam invadir a máquina do internauta. Hoje, 
o site Bugnet.com confirmou que essa correção tem um furo.></p>
<a href="/teste.htm" >Saiba mais...</a>

Comentário do Código

Ao selecionar toda a página, a frase inteira será lida. Porém ao navegar com a tecla TAB apenas o texto "Saiba mais" será lido. Caso exista mais de uma frase com esta indicação, ficará impossível reconhecer a que o "Saiba mais..." faz referência.

8.3 Extendendo o "saiba mais.." ou "Clique aqui"

8.3.1 Extenda com o atributo TITLE

Exemplo do código

<h3>BUG NO INTERNET EXPLORER<h3>
<p>No início de agosto, a Microsoft publicou a correção para um bug no Internet Explorer, 
por meio do qual hackers poderiam invadir a máquina do internauta. Hoje, o site 
Bugnet.com confirmou que essa correção tem um furo.</p>
<a href="/teste.htm" title="Saiba mais sobre o bug no Internet Explorer....">Saiba mais...</a>

Comentário do Código

Ao navegar com a tecla TAB o atributo TITLE do "Saiba mais..." será lido e permitirá relacioná-lo ao contexto da frase.

8.3.2 Extenda ao parágrafo

Exemplo do código

<a href="/teste.htm" ><h3>BUG NO INTERNET EXPLORER</h3>
<p>No início de agosto, a Microsoft publicou a correção para um bug no Internet Explorer, 
por meio do qual hackers poderiam invadir a máquina do internauta. Hoje, o site 
Bugnet.com confirmou que essa correção tem um furo.</p>
Saiba mais...</a>

Comentário do Código

Ao navegar com a tecla TAB, o parágrafo inteiro será lido, pois toda a frase receberá o foco, permitindo que se saiba a que se refere o hiperlink;

8.3.3 Extenda ao Contexto

Exemplo do código

<h3>BUG NO INTERNET EXPLORER<h3>
<p>No início de agosto, a Microsoft publicou a correção para um bug no Internet Explorer, 
por meio do qual hackers poderiam invadir a máquina do internauta. Hoje, o site 
Bugnet.com confirmou que essa correção tem um furo.</p>
<a href="/teste.htm">Saiba mais... sobre o bug no Internet Explorer...</a>

Comentário do Código

Ao navegar com a tecla TAB o Saiba mais será lido e permitirá relacioná-lo ao contexto/título do artigo.

8.3.4 Extendendo o hiperlink ao título do texto.

Em uma chamada de matéria podemos extender a informação ao título, permitindo que a informação seja entendida quando acessado pela navegação da tecla TAB. Utilize o recurso de folha de estilo (CSS) e o elemento <SPAN> para formatar o título em destaque.

Exemplo do código

O QUE É ACESSIBILIDADE NA INTERNET ?
É permitir que uma maior quantidade de pessoas ...

<a class='txttexto' href='textos.htm'>
<h3>O QUE É ACESSIBILIDADE NA INTERNET ?</h3>
 É permitir que uma maior quantidade de pessoas... </a>

Comentário do Código

Neste exemplo, ao navegar com a tecla TAB, o título e o texto serão lidos por completo, como sendo um hiperlink único

< Anterior | Próximo >