Tornar um site acessível, ainda que num processo lento, tem sido uma das buscas de alguns desenvolvedores, seja pelo objetivo específico de um site em questão ou por algum novo público que a agência ou empresa a qual ele trabalha está buscando atender.
Assim como no mundo real, onde lugares adaptados à pessoas com deficiências físicas ou mentais ainda estão em expansão, na internet este mesmo público também encontra dificuldades de acessar diversos websites por falta de um código bem elaborado ou estudado para cumprir as exigências de leitores de tela e navegadores textuais.
Poucos também são, os tutoriais que realmente exemplificam técnicas de acessibilidade e vários são os artigos que ainda insistem em atribuir a necessidade desta característica apenas à websites governamentais.
Ainda que você não tenha visto uma necessidade de elaborar projetos mais acessíveis, saiba que podemos utilizar as mesmas técnicas de acessibilidade para aplicar técnicas de SEO à seu código podendo também garantir um ganho de posições nos resultados de busca.
Então, para colaborar com um público pouco levado em consideração na elaboração de projetos web e ainda de priorizar a “conversa” entre seu código e mecanismos de busca, vamos às dicas para tornar seu website mais acessível.
Nas primeiras linhas de sua página já teremos as primeiras definições.
Iniciamos os códigos html nos “comunicando” com o navegador e “dizendo” que tipo de documento será lido e como ele deve ser validado:
Na segunda linha do código atribuímos o idioma do website e esta informação é de suma importância para que o leitor utilize o dicionário correto ao sintetizar as palavras. Utilizamos tanto a tag xml:lang quanto apenas lang, devido as diferentes versões de navegadores:
Depois da tag de abertura , temos a primeira linha de declaração onde também é importante declarar a códificação utilizada para o conteúdo do website. Normalmente, sites em português, utilizam a codificação ISO-8859-1:
Assim como nas técnicas de SEO, a tag que atribui título à página, também é de igual importância para as técnicas de Acessibilidade. Devido à este fato, temos o primeiro embate entre elas – uma preza por palavras-chave que garantem um melhor page-rank e outra preza pela leitura mais clara do nome e objetivo de um website acessados por navegadores textuais e leitores de tela. A dica é: procure elaborar todos os textos, que serão interpretados por sintetizadores e mecanismos de busca, unindo essas técnicas. No caso da tag title procure escrever um título claro e coerente sem excluir as palavras-chave. Por exemplo:
Percebe? Está claro o título da página e não deixamos de usar palavras-chave que vão referenciar o site nos resultados de busca.
Outro atributo bastante importante a ser utilizado é o atributo rel na tag link. Quando linkamos arquivos externos à nossa página é importante para os navegadores textuais que determinemos que tipo de arquivo ou página externa está sendo linkada. Este atributo tem valor pré-definido e o mais usado é: stylesheet. De qualquer forma, a lista prevê conteúdos (content), páginas anteriores (prev) e páginas posteriores (next). Pensando nas técnicas de SEO, caso você não saiba atribuir o conteúdo a ser linkado, é aconselhável que você utilize o valor “nofollow”, que fará com que mecanismos de buscas o ignorem e não saiam da linha geral de leitura da página. Exemplo:
Continuando o código, no de seu site, várias precauções devem ser igualmente tomadas. Os atributos alt e longdesc na tag devem ser preenchidos com textos intuitivos tanto para a falta de carregamento da imagem (no caso de um cuidado na usabilidade do website – vide Usabilidade para desenvolvedores front-end – pela Talita Pagani), quanto no caso dos navegadores textuais e leitores de tela. Lembrando que longdesc não tem suporte em todos os navegadores e é mais utilizado para leitores de tela. O ideal é utilizar os dois atributos:
Para hyperlinks, tag , a dica é utilizar o atributo , com textos claros que exemplifiquem o destino do usuário ao clicar no link e não apenas com a descrição “clique aqui”. Além deste, outros dois atributos bastante valiosos para esta tag, são tabindex e accesskey. A primeira permite que seja atribuída a ordem a qual a tecla tab acessará o referido link e a segunda atribui uma tecla de atalho para o mesmo. Exemplo:
Por fim, para que o deficiente visual não gaste muito tempo ouvindo, através do leitor de tela, todas as linhas de código que seus scripts tem, aconselha-se o uso da tag para descrever o objetivo do script na página. Por exemplo:
Quer saber mais detalhes sobre Acessibilidade na Web? Abaixo 3 links que podem te ajudar nesta pesquisa.
A avaliação de acessibilidade de seu site pode ser feita pela URL: https://www.dasilva.org.br/.
A documentação da W3C, para acessibilidade, pode ser adquirida neste link: https://www.w3.org/WAI/
Para visualizar seu site em um navegador textual, acesse: https://www.delorie.com/web/lynxview.html
Com o HTML5 algumas dessas técnicas devem ser extintas, porque muitas das tags já estão sendo preparadas para ter um valor especialmente elaborado para cumprir requisitos de usabilidade, acessibilidade e SEO. Porém, enquanto a documentação se mantém em fase de formulação, vamos tornando acessíveis os sites que estão hoje na internet, mas ainda dificultam muito a vida deste público também inserido ao mundo virtual.