Precisamos falar sobre acessibilidade na web

Será que as páginas também são desenvolvidas para aqueles que possuem alguma limitação e/ou deficiência? Veja 6 dicas para você, pessoa desenvolvedora, tornar seu website acessível.

Fernanda Santo
reprogramabr
5 min readDec 18, 2018

--

Sou desenvolvedora front-end há pouco tempo e desde o início de meus estudos percebi que, quando se fala em criar um website, a preocupação inicial é sempre com o layout (para alegria dos designers).

O foco está em ser bonito e atrativo, esquecendo que a primeira e mais importante característica de todo website deveria ter é acessibilidade.

Mas o que você quer dizer com isso?

No Brasil, de acordo com o último senso realizado pelo IBGE - Instituto Brasileiro de Geografia e Estatística, há mais de 45 milhões de pessoas com algum tipo de deficiência, seja ela visual, auditiva, física ou intelectual.

Sendo assim, desenvolver um website acessível é permitir que esses 45 milhões de pessoas tenham a plena capacidade de consumir o conteúdo que você está criando para o seu website.

É como fornecer uma rampa de acesso a um cadeirante, um piso tátil a um cego, a tradução de um vídeo para libras a um surdo, entre outros.

É muito fácil para quem enxerga e ouve com clareza e não possui nenhuma disfunção navegar pela internet nos dias de hoje. Através do visual você se localiza e decide o que consumir nos websites, assiste vários vídeos, consome todo tipo de mídia sem problemas e não fica incomodado com efeitos visuais, cores ou padrões.

Para os deficientes, a coisa não é tão simples assim porque aqueles com deficiência visual não enxergarão o layout para decidir o que querem consumir. Os que possuem deficiência auditiva se vêem impossibilitados de assistir vídeos sem a devida tradução para libras. Aqueles com transtorno do espectro autista não se sentirão confortáveis com a paleta de cores do website.

Ignorar a existência dessa parcela da população é infringir a Lei Brasileira de Inclusão da Pessoa com Deficiência que diz:

“Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.”

A proposta não é tornar o seu website uma página feia com letras grandes, sem imagens ou vídeos, mas sim permitir que qualquer pessoa tenha a mesma agradável e irrestrita experiência ao navegar na sua página.

Ok, mas qual é o primeiro passo?

Antes de tudo é preciso que você saiba sobre a WCAG (Web Content Accessibility Guidelines), que são as diretrizes de acessibilidade para o conteúdo da web publicadas e atualizadas pela W3C (Web Accessibility Initiative).

É ali que encontraremos todas as orientações para o desenvolvimento de um website com conteúdo acessível e que acolha todo tipo de público.

De acordo com a própria W3C, “seguir estas diretrizes irá tornar o conteúdo acessível a um maior número de pessoas com deficiência, incluindo cegueira e baixa visão, surdez e baixa audição, dificuldades de aprendizagem, limitações cognitivas, limitações de movimentos, incapacidade de fala, fotossensibilidade e combinações destas características”.

Se você teve a curiosidade de verificar a WCAG, pode constatar que ela se trata de uma robusta compilação de normas e não teremos tempo de tratar de todas aqui.

Por isso, reuni esse pequeno (mas valioso) conjunto de 6 dicas simples que vão tornar o seu site mais acessível:

  1. Respeite as tags de cabeçalho e a hierarquia

As tags de cabeçalho existem e devem ser usadas para estruturar as páginas de seu website!

É recomendado utilizar apenas uma tag <h1> por página porque ela indicará qual é a palavra-chave mais importante daquela página.

As demais tags (<h2>, <h3>, <h4>, <h5> e <h6>) são utilizadas como subtítulos e, estas sim, poderão aparecer mais de uma vez em seu código. Mas não se esqueça de respeitar a hierarquia existente entre elas.

É através delas que a maior parte dos deficientes visuais navega e escolhe se o conteúdo oferecido é ou não relevante para ele.

A hierarquia existente entre as tags de cabeçalho deve ser respeitada.

2. Não deixe em branco! Todo <input> merece sua <label>

Nunca se esqueça de colocar uma <label> para rotular um <input>.

Equivocadamente e, alegando ser questão estética, muitos substituem a <label> por <placeholder> e caem num problema de acessibilidade muito comum porque os leitores de tela de pessoas com deficiência visual, por exemplo, não identificam o <placeholder>.

Um <input> sem <label> é apenas um campo de texto para o leitor de tela.

Obs.: se você colocar o mesmo valor para o atributo “for” na <label> e para o atributo “id” no <input>, ao clicar na label, o <input> fica em foco.

3. Utilize os elementos semânticos (tags com significado)

O HTML5 trouxe tags semânticas que merecem toda a atenção. Isso quer dizer que as tags têm significado e servem para deixar sua estrutura mais legível e organizada, não sendo necessário utilizar diversas <div> sem significado.

HTML5 e suas tags semânticas.

4. Marque o idioma principal do website

O atributo “lang” deve ser utilizado para definir o idioma que será utilizado no website e, também, caso haja alguma citação em idioma diverso daquele declarado na tag <html>, para que o leitor de telas pronuncie corretamente.

Todo idioma utilizado na página deve ser declarado.

5. Dê um alt: “ ” para sua <img>

O atributo “alt” deve ser utilizado em toda tag <img> porque se trata de um texto alternativo à imagem. Ele deve ser preenchido com uma descrição sucinta da imagem, de maneira direta e simples.

O atributo “alt” tem o poder de descrever a imagem para o leitor de tela.

6. Verifique a acessibilidade do seu site

Se você quiser conferir se seu website está acessível, basta utilizar os links abaixo:

https://validator.w3.org/

http://www.acessibilidade.gov.pt/accessmonitor/

http://wave.webaim.org/

http://asesweb.governoeletronico.gov.br/ases

Esses são tópicos básicos para que você desenvolva um website acessível.

Em caso de dúvidas, dê uma olhada na WCAG! Não se esqueça também que a opinião das pessoas que utilizam seu site é muito importante, por isso mantenha-se aberto a feedbacks.

Tornar seu website acessível não é só uma questão de boa prática, mas de garantia de acesso irrestrito à informação a quem quer que seja, independente de sua deficiência.

Obrigada e até a próxima!

--

--

Fernanda Santo
reprogramabr

Desenvolvedora front-end com background em Direito que se apaixonou pela programação nas linhas de comando da vida.