Acessibilidade

Olá pessoal! Mais um post saindo pra vocês, aliás, um post recheado de informação importante e essencial para nós que desejamos desenvolver não só um website, mas um website acessível. E como eu torno meu site acessível, seu Sérgio?. Respondo: Basta seguir as dicas abaixo e logo estará apto para desenvolver sites disponíveis para qualquer tipo de user.

Acessibilidade: Resumidamente, é a capacidade de fazer com que um mesmo conteúdo possa ser acessado por qualquer pessoa em qualquer mídia. E não se aplica somente à web, em nosso dia-a-dia vemos exemplos práticos de acessibilidade: vagas específicas para deficientes, rampas de acesso, bancos e lugares de transporte público específicos para pessoas com necessidade. Ou seja, assim como são realizadas adaptações físicas para esse público, também devemos adaptar nossos ódigos e folhas de estilo para nossos usuários.

Acessibilidade na Web

Quando falamos de acessibilidade na web, devemos nos preocupar com os seguintes quesitos:

• Imagens
• Formulários
• Fontes
• Cores

Mas antes de falar deles, devemos tratar sobre a navegabilidade de nosso site, pois é muito fácil clicar, rolar a página, selecionar tal opção, entre outros, quando temos o auxílio de um mouse e estamos visualizando cada um desses itens, mas e quando não os vemos? Ou então, quando precisamos acessar por meio de um teclado? Para isso devemos deixar uma espécie de trilha em nosso site, a qual deve guiar nosso usuário do início ao fim da página, de forma concisa e coerente. Para criar essa trilha, devemos usar e abusar dos atributos tabindex (adiciona um indíce a cada elemento HTML, de forma que podemos determinar a ordem de navegação dos mesmos) e accesskey (nos permite criar atalhos de teclado em nossas páginas, permitindo ao usuário chegar rápida e facilmente no elemento que ele desejar).

Exemplo tabindex

Outra questão também importante é o uso da semântica, devemos sempre deixar nossos códigos o mais semântico possível, e atualmente isso é fácil, já que a versão 5 do HTML nos permite criar elementos específicos para o conteúdo que serão guardados nos mesmos, como: header - seção de cabeçalho, nav - seção específica para menu, footer - seção para rodapé, etc. Abordarei outros elementos quando falarmos de formulários.

Imagens Acessíveis

Para nós usuários comuns, basta ter uma imagem sendo renderizada e já está ótimo, não é? Porém quando se trata de usuários com deficiência visual (seja ela qual for), ou então usuários com velocidade de banda reduzida, devemos ter em mente que somente a imagem não basta, devemos nos preocupar em fornecer alternativas, como:

Legendas: Sejam elas internas (atributo alt - insere um texto alternativo a imagem, caso a mesma não possa ser renderizada ou atributo title - funciona de forma semelhante ao alt, porém o texto é exibido ao posicionar o mouse sobre a imagem, além de poder ser sintetizado por um software de voz) ou uma caixa de texto abaixo da imagem, sempre devemos adicioná-las tendo consciência de que seu conteúdo está de acordo com o que a imagem representa, e além disso, se encaixar no contexto do conteúdo, afinal não faz sentido inserir uma imagem e legenda, se essas não tem a ver com o texto em que estão inseridas.

Vejam abaixo uma imagem que inseri utilizando esses atributos (Tenha em mente que para nós não faz muita diferença, mas para usuários que estejam utilizando um sintetizador de voz, faz toda a diferença):

Essa imagem ilustra acessibilidade (Posicione o mouse em cima para ver a legenda interna)

Formulários Acessíveis

Até formulários devem ser acessíveis? Com certeza, afinal qualquer usuário deve ter a possibilidade de entrar em contato com o administrador do site ou empresa, e para isso usamos um formulário, certo?

O que podemos implementar em nossos forms para deixá-los acessíveis? Conforme dito anteriormente, o HTML 5 trouxe elementos semânticos para implementarmos em nossos códigos, alguns desses elementos dizem respeito ao form:

Input types: Novos campos de form semânticos, como: tel, email, date, number, range, color, month, week, datetime, entre outros. Embora nem todos estejam 100% prontos para serem implementados, já nos auxiliam quando queremos que o conteúdo seja de acordo com o campo em que será inserido.

label: Essa tag é primordial quando falamos em acessibilidade. Antigamente, quando era feito um form, inseríamos apenas um texto em frente ao campo e estava ótimo. Porém, com o label, além de definir esse rótulo para o input, também informamos ao browser ou sintetizador de voz que determinado rótulo pertence a determinado input, e isso traz uma semântica sensacional.

tabindex: Como citado anteriormente, esse atributo determina a ordem de navegação dos elementos. Implementando isso no formulário, determinamos a ordem que o usuário preencherá o formulário.

accesskey: Também falado antes, nos permite criar atalhos para elementos. No caso do form, podemos definir um atalho para os botões enviar e redefinir, tornando mais prático e rápido o preenchimento e submissão do form.

autofocus: Atributo que define um foco ao elemento quando a página é carregada, bem interessante quando queremos definir um foco em algum campo de nosso form, principalmente quando o preenchimento está incorreto ou inexistente (campos obrigatórios).

Acessibilidade e a utilização de fontes

Em relação a acessibilidade nas fontes utilizadas, temos que nos preocupar com os seguintes itens:

Disponibilidade: sempre devemos nos certificar que a família de fonte utilizada deve estar disponível para nossos usuários, isto é, caso formos importar uma fonte do Google Fonts ou utilizar uma fonte de nossa autoria, essas devem estar linkadas corretamente e no caso dessa última, deve estar disponível no servidor em que o site será hospedado.

Tamanho: Além de garantir a disponibilidade da fonte, também temos de deixar nossos textos legíveis, isto é, definir tamanhos de fonte de forma que não dificulte a leitura dos usuários, principalmente aqueles com alguma deficiência visual. Além disso, sempre devemos oferecer a opção de diminuir e aumentar a fonte de todo o conteúdo, pois nem todos que estão navegando no site podem achar determinado tamanho ideal.

Alinhamento: É um costume comum deixar nossos textos alinhados justificadamente, (confesso que acho essa forma ideal para manter o conteúdo bem alinhado), porém isso não é uma boa prática, pois ao justificar nossos textos, são criados espaços diferentes entre as palavras, e já foi provado que isso atrapalha a leitura de usuário com dislexia. Portanto, a partir de já, temos que ter em mente que o alinhamento deve ser ou à direita ou à esquerda.

Acessibilidade e a utilização de cores

Por último, porém não menos importante, temos a acessibilidade nas cores. A respeito desse tema, devemos estar atentos com:

Contraste: Todos já devemos ter ouvido que um site cheio de cores diferentes e nada contrastantes não é legal, aliás é incorreto. Temos que ter em mente que o todo de nossa página da web deve ser conciso, coerente, em harmonia, e só é possível se soubermos escolher bem as cores.
Geralmente é utilizado um padrão de contraste, no qual definimos uma cor mais escura, uma mais clara e uma terceira de tom médio, pois essa escolha permite que nosso conteúdo esteja em contraste e facilite a leitura dos nossos usuários.
Outro item, extremamente importante para acessibilidade, é fornecer estilos alternativos de alto-contraste, isto é, aqueles estilos destinados à pessoas daltônicas, pois dependendo da escolha de cores, o usuário pode se confundir entre cores parecidas.

Exemplo de visão daltônica

Significado: Dependendo de qual região nossos usuários são, algumas cores podem ter diferentes significações, portanto devemos nos preocupar em disponibilizar estilos alternativos para diferentes públicos.

Esse post finalmente chega a seu fim, porém essas informações são apenas uma base para o desenvolvimento de sites acessíveis. Como e onde implementar cabe a nós desenvolvedores definir, buscar mais informações e outras boas práticas.

Em relação ao acesso responsivo (pode ser utilizado em qualquer dispositivo), esse será abordado num próximo post de forma detalhada.

Mais uma vez agradeço por ter lido até aqui e caso haja dúvida, a caixa de comment fica logo abaixo eu teria o maior prazer de respondê-la.