Acessibilidade Web: 5 Dicas para tornar o seu site mais acessível

Tempo de leitura: 7 minutos

Pensar em acessibilidade web é algo cada vez mais importante hoje em dia, mas que infelizmente ainda não é levado em conta por muitos na hora de desenvolver um projeto.

Mais que uma prática que vai de encontro a uma sociedade digital mais inclusiva, garantir acessibilidade ao desenvolver um site é uma questão ética.

E que além da inclusão social, garante mais audiência para o site.

Se você não sabe, existem cerca de 45 milhões de deficientes no Brasil, e se analisarmos esse não é um número qualquer.

O trabalho de acessibilidade deve ser priorizado em todos os setores do seu projeto, tanto na criação do texto, do layout, e até no momento de elaborar o código.

Por isso, fica comigo aqui, pois vou te passar 8 dicas práticas para deixar o seu site totalmente acessível.

// Uma visão geral sobre Acessibilidade Web
// #1. Utilize o elemento Labels
// #2. Atributo alt nas imagens
// #3. Desenvolva uma navegação lógica via teclado
// #4. Muito cuidado com figuras de linguagem
// #5. Repita informações importantes ao longo do site/blog

Uma visão geral sobre Acessibilidade Web

Uma visão geral sobre acessibilidade web

A Cartilha de Acessibilidade na Web foi disponibilizada pela W3C Brasil e traz um definição bem clara da acessibilidade web: “Permitir que qualquer indivíduo, utilizando qualquer tecnologia de navegação, visite qualquer sítio e obtenha completo entendimento das informações contidas nele, além de ter total habilidade de interação”.

Ela também estabelece quatro princípios que fazem o fundamento da acessibilidade na web. São eles:
Percepção: toda informação e componentes da interface devem ser apresentados de uma forma que os usuários possam perceber.

Operável: os componentes da interface devem ser operáveis, ou seja, os usuários devem ser capazes de operar a interface e essa não pode requisitar interações que o usuário não pode executar.

Compreensão: as informações e a interface do usuário devem ser compreensíveis.

Robustez: o conteúdo deve ser robusto o suficiente para que seja interpretado de forma concisa por uma grande variedade de agentes de usuários, incluindo tecnologias assistivas (ex: leitor de tela).

Para que o seu site seja acessível, você deve se atentar a esses quatro itens. E garantir que todos sejam englobados e incorporando os padrões web disponibilizados pela W3C.

Entendendo como funciona o conceito geral vamos passar para as dicas práticas para tornar o seu site mais acessível.

#1. Utilize o elemento Labels

Utilize o elemento Labels

Sempre que puder, faça uso do elemento “label” para associar o texto com elementos do formulário – isso irá tornar bem mais fácil para o usuário saber do que se trata o campo em questão.

E não se esqueça que o atributo “for” deve corresponder ao atributo “id” do input para que o código não fique confuso, conforme o exemplo abaixo:

<label for=”nome”>Nome:
<input id=”nome” name=”nome” type=”text” />

Caso não exista a possibilidade de inserir uma label junto ao campo, o que geralmente acontece por uma questão estética, adicione o atributo aria-label ao input com a descrição necessária.

Ele é bem suportado por leitores de tela e outras tecnologias assistivas. Exemplo:

<input id=”nome” name=”nome” type=”text” aria-label=”nome” />

#2. Atributo alt nas imagens

Atributo alt nas imagens

A propriedade “alt” foi definida para imagens na segunda versão do HTML em 1995, e originalmente servia apenas como um texto alternativo para a imagem que não conseguia ser renderizada no momento da sua requisição.

Na época foi algo realmente necessário devido a conexão lenta generalizada e erros recorrentes no servidor.

Apesar da web ter evoluído muito de 1995 pra cá e a utilização de imagens na web ter se tornado normal, o uso desse atributo não caiu em desuso pois ele se tornou uma ferramenta valiosa na identificação das imagens pelos principais buscadores como Yahoo (1997) e Google (1998), especialmente depois do lançamento do Google Images (em 2001), que usava o atributo alt como principal critério de busca.

Devido ao forte desenvolvimento da Web, a questão da acessibilidade ficou cada vez mais evidente também. Desde 2000, com a popularização dos screen readers. (em especial o Microsoft Narrator, presente no Windows 2000), o atributo alt tem sido fundamental para auxiliar usuários com deficiência visual.

Como funciona os screen readers? Os leitores de tela passam pela imagem e leem o que está escrito no atributo alt.

Por isso surgiu uma necessidade de fazer não apenas um atributos alt, mas também “descrições” da imagem e todo um trabalho de escrita para uma melhor experiência de leitura de imagens para usuários com deficiência visual.

#3. Desenvolva uma navegação lógica via teclado

Desenvolva uma navegação lógica via teclado

Muitas usuários precisam usar o teclado para ler e saber todas as informações de um site. Normalmente se usa a tecla tab para ir passando o foco de elemento em elemento.

No HTML, a ordem padrão do foco dos elementos segue a mesma ordem em que os mesmos são dispostos no código. Ou seja, se no código você tem uma label e logo depois um input, a ordem será label > input.

Porém, sabemos que nem sempre é possível dispor os elementos em uma sequência lógica no código. E, pra isso, temos o atributo tabindex. Através dele é possível definir uma ordem de navegação utilizando um valor que pode ir de 0 a 32767.

Vamos supor que você tenha uma tabela com Séries e Filmes e que você queira que seja possível navegar primeiro por todas as séries e depois por todos os filmes. Acesse o link abaixo para conferir como usamos o tabindex:

https://codepen.io/ritalino/pen/bxaMNb

Use a tecla tab para navegar pela tabela. Se quiser saber qual comportamento teria sem o tabindex, basta retirar o atributo do código.

#4. Muito cuidado com figuras de linguagem

Desenvolva uma navegação lógica via teclado

Pessoas com autismo têm uma certa dificuldade em compreender as figuras de linguagem. Expressões como “de parar o trânsito” não são de fácil interpretação por eles, pois costumam levar ao “pé da letra”, interpretando exatamente como está escrito.

Além das figuras de linguagem, cuidado com as expressões idiomáticas ou qualquer tipo de metáfora ou analogia – são termos que podem prejudicar a sua audiência dificultando totalmente a comunicação entre vocês.

Acessibilidade deveria estar no foco de toda empresa, mas caso não seja assim, você, que tem interesse pelo assunto e está mais consciente, pode ser o responsável por tornar seu projeto mais acessível.

#5. Repita informações importantes ao longo do site/blog

Repita informações importantes ao longo do site

Para deixar seu site ainda mais acessível para pessoas com dislexia, é importante repetir informações de maior importância no decorrer do seu site.

Se você não sabe, dislexia é um transtorno genético e hereditário de linguagem. Ele tem origem neurobiológica e se caracteriza pela dificuldade de decodificar o estímulo escrito ou o símbolo gráfico.

Esta condição compromete a capacidade de aprender a ler e escrever com correção e fluência e de compreender um texto.

Seu projeto deve facilitar a vida dessas pessoas ao máximo

Uma limitação identificada entre os disléxicos é a dificuldade em armazenar dados, como números de telefone e nomes de pessoas. Às vezes, é preciso que você repita várias vezes a mesma informação para que eles consigam absorvê-la.

Conclusão de Acessibilidade Web

Entendeu o que é Acessibilidade Web e como seus projetos podem ser beneficiados por ela?

Afim de aprender a desenvolver sites do absoluto zero com um passo a passo super simples? Conheça o nosso treinamento que já mudou a vida de mais de 15.000 pessoas e pode mudar a sua também!

Acesse aqui e entenda o motivo de nosso treinamento ser o mais requisitado do país.