Acessibilidade

Que tal fazer um teste? Faça o download do JAWS. Disponível em: <http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp>. Acesso em: 19 out. 2015, instale-o e tente ler um site com esse leitor para experimentar como um deficiente visual percebe uma página web.

Para fazer o JAWS ler um site, você deve executá-lo e abrir seu browser. Insira um endereço na barra de endereços do navegador.Quando a página estiver carregada, você deve utilizar a tecla tab, para que o JAWS leia elemento por elemento clicável, ou usar as setas para baixo e para cima para que ele leia tudo de cada linha <http://maujor.com/tutorial/usando-jaws-para-testes.php#intro>.Acesso em: 19 out. 2015.

A acessibilidade Web envolve não só as deficiências visuais, mas também motoras, auditivas, cognitivas e neurológicas, como também as limitações das pessoas com mais idade.

Dessa forma, inclui providências tais como mudanças no tamanho e cor da fonte, planejamento da ordem de marcação, uso de alguns atributos e tags, dentre outros.

A seguir, você verá que simples cuidados farão com que pessoas com limitações desfrutem do seu site.

No site <http://www.ilearn.com.br/TR/WCAG20/>. Acesso em: 19 out. 2015., são definidas 4 recomendações gerais para prover acessibilidade a documentos web e indicações de como essas recomendações podem ser implementadas.

Recomendação 1 – “Perceptível: A informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber”.

Na aula passada, você viu o quanto é importante que as informações sejam realçadas com cores e tamanhos, e que os links pareçam realmente clicáveis. Isso é importante para as pessoas que conseguem ver. Para as que não conseguem ver, tudo isso terá que ser repensado.

Como você assistiu no vídeo, os programas usados por essas pessoas para ler um site se baseiam na marcação (X)HTML. Assim, uma imagem é só um nome de um arquivo com uma extensão (caso o atributo alt do elemento img não for definido apropriadamente), um link é o texto do link mais a palavra “link”, e assim sucessivamente.

Por exemplo, a marcação <img src=“imagem1.jpg”/> é lida da seguinte maneira: “imagem1 ponto jpg”. Você sabe que não é assim que uma pessoa deseja perceber uma imagem, ela precisa saber qual o conteúdo da imagem, o que ela representa.

Sendo assim, a primeira coisa a fazer é fornecer um texto aos elementos não textuais, tais como imagens, vídeos, sons, applets, dentre outros (essa é uma diretriz de nível A).

Para figuras, isso pode ser feito da seguinte maneira:

• Incluindo o atributo alt – nesse caso, os leitores de tela,em vez de lerem o nome do arquivo, lerão o texto indicado nesse atributo. Você deve usar o atributo alt para descrever brevemente o conteúdo do elemento não textual.Caso você deseje oferecer uma descrição mais detalhada, é melhor usar o atributo longdesc.
• Incluindo o atributo longdesc – nesse caso, os leitores de tela darão ao usuário a possibilidade de acessar uma página que conterá uma descrição mais longa e detalhada sobre o elemento não textual. Veja o exemplo abaixo:
  <img src=”chapada.jpg” alt=” paisagem da chapada diamantina” longdesc=”chapadaDesc.html”>

Você deve perceber o quanto é importante a definição do atributo alt quando falamos de acessibilidade. Porém, esse atributo só melhorará a exposição do site se seu texto for bom. Você precisa de uma frase simples de entender, curta e descritiva.

Por exemplo, se você desejasse descrever a figura abaixo, como você faria?

Lembre-se de que o texto no atributo alt deve ser curto,enquanto que o atributo longdesc pode ser usado para indicar onde uma descrição mais detalhada pode ser encontrada. Sendo assim, para utilizar um atributo longdesc, é necessário:

• Adicionar um atributo longdesc à tag img da figura;
• Criar um arquivo HTML contendo essas informações. Esse arquivo não deve conter qualquer estilização, pois ele só será acessível por pessoas que usam os leitores de tela opcionalmente, ou seja, ao varrer a tela e se deparar com o atributo longdesc, o programa leitor dará a opção ao usuário de ler as informações adicionais ou não,enquanto que o texto no atributo alt é obrigatoriamente lido. Esse arquivo poderia ser como o mostrado a seguir:
  <html> ... <body> <p>Linda paisagem do parque chapada diamantina. </p> </body> </html>