Acessibilidade – Uma questão de ser humano

Mesmo que façamos um site, ou blog, como amadores, por diversão ou qualquer outro motivo, é muito importante lembrarmos que muita gente não consegue ter acesso a grande parte do conteúdo na web. Na hora de se fazer um site é sempre bom lembrar das pessoas com problemas ou mesmo pequenas deficiências de visão, auditivas ou motoras. Lembrar das crianças, idosos e pessoas que estão começando a navegar, geralmente elas não manuseiam o mouse com facilidade e se sentem perdidas nesse novo ambiente da internete.
Além disso, alguns cuidados melhoram o site para todos, pois somos seres humanos e não máquinas. Mesmo os mais experientes dos internautas gostam de algumas comodidades.

Mas como podemos melhorar o nosso site para todos???

Aqui vão algumas dicas bem fáceis:

IMAGENS

Sempre use o “alt”.

Pessoas com alguma ou total deficiência de visão, usarão programas para ler a tela (). Tais programas irão descrever a imagem lendo o que estiver no “alt”.

Exemplo: Num site onde vou usar uma imagem como logo. Como fica o código:

<img src="caminho/da_imagem.jpg" alt="Descrição da imagem, nesse exemplo: Logotipo da empresa" />

Mas e se a imagem for somente um enfeite?
Mesmo assim use o “alt”. Sempre use o “alt” !!! rs
Só que nesse caso use o alt sem nada escrito.

<img src="caminho/da_imagem.jpg" alt="" />

Se o leitor de tela encontrar uma imagem sem alt, ele informará que encontrou uma imagem, mas a pessoa vai ficar na curiosidade, pois não saberá de q era a imagem.
Se o leitor de tela encontrar uma imagem com o alt vazio, ele não informará nada.


AUDIOS e VÍDEOS

Sempre disponibilize um conteúdo escrito.
Por exemplo, no caso de uma música, coloque a letra da música ou um link para a mesma.
No caso de um vídeo, sempre prefira os legendados.
Mesmo se o vídeo for em português??? Isso mesmo! Lembre-se dos surdos. Podemos colocar o vídeo que desejamos e próximo a ele um link alternativo para um vídeo em português com legenda em português. Ou colocar um texto com o conteúdo do áudio.


FORMULÁRIOS

Sempre use o elemento <label>

O label “une”, “associa” um texto a um campo de formulário. Ex:

<label>E-mail
<input type="text" name="email" id="email" />
</label>

No caso de um cego usando um leitor de tela, esse “E-mail” será lido como o texto referente a esse campo de formulário.

Assessibilidade é bom para todos!!! Até para os mais comuns e experientes internautas!

Isso fica muito claro nos casos de checkbox e de radiobuton. É bem mais cômodo poder clicar em qualquer parte do texto referente ao campo,do que ficar restrito a pequena área desses campos. Lembre-se das pessoas com deficiência motora, ou das que estão começando e não possuem muita “intimidade” com o mouse.
Exemplo:

<label>
<input type="checkbox" name="marcar" id="id" /> Sim eu quero melhorar a acessibilidade do meu site!
</label>

Perceba a diferença clicando nos textos abaixo:

Com label – Pode clicar aqui no texto

Sem label – Só pode clicar no checkbox

FOQUE

Cegos e pessoas com dificuldade motora não usam o mouse!
Teste seu site. Deixe seu mouse de lado e navegue usando o teclado, com tab, shift-tab e return.

Use “focus” no seu arquvo CSS
Exemplo:

a:focus {outline:#333 dashed 1px;}

input, textarea {
border:#666 solid 1px;
background:#EEE;}

input:focus, textarea:focus {background-color:#ddd; border:#666 1px inset;}

Assim, sempre que seu link ou formulário estiver selecionado, uma alteração será percebida facilitando a navegação até dos usuários mais experientes.


SEJA CLARO

Cegos navegam de link em link usando a tecla tab. Assim ele vai chegar em links do tipo: “saiba mais” e “clique aqui” sem passar pela leitura do texto anterior ao link.
Nesses casos use o atributo title para descrever o link.
Exemplo:

<a href="noticia356.html" title="Título da notícia">Saiba mais</a>