Em tempos de pandemia ficou ainda mais perceptível o quanto a internet está presente na nossa vida. Num momento onde não poderíamos ter contato físico ela aproximou as pessoas e trouxe o trabalho para dentro de casa. Com isso se torna primordial falarmos de acessibilidade na web.
Neste artigo vamos conhecer um pouco mais sobre acessibilidade social e dicas práticas para tornar sua página ou aplicação, de fato, acessível.
Acessibilidade na Web: compromisso social e dever legal!
O último levantamento do IBGE apontou que cerca de 17,3 milhões de pessoas acima de 2 anos de idade no Brasil possuem algum tipo de deficiência. Em outras palavras, sem a acessibilidade na web 8,4% da população brasileira não conseguirá realizar atividades simples do dia a dia.
A acessibilidade na web não é somente uma prática recomendada como também um dever de todo mundo tornar conteúdos e aplicações acessíveis.
Dever sim, pois desde 2015 está em vigor a Lei 13.146, ou a Lei Brasileira de Inclusão da Pessoa com Deficiência, chamada de LBI ou Estatuto da Pessoa com Deficiência. O texto estabelece, por exemplo, que todos os sites brasileiros devem ser acessíveis (Art. 63).
Mas o que é Acessibilidade na Web?
Acredito que não exista definição melhor para acessibilidade na web do que a presente na Cartilha de Acessibilidade na Web da W3C Brasil que diz o seguinte:
“Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento”.
O primeiro passo é se colocar no lugar da outra pessoa, entendendo que tipos diferentes de deficiências terão necessidades diferentes. Uma pessoa cega acessa o conteúdo diferente de uma pessoa surda, a primeira precisa de leitores de telas e a segunda de tradução em Libras.
Públicos para se ter em mente quando falamos em acessibilidade
A verdade é que todo mundo é beneficiado quando a web é, de fato, acessível. Mas a seguir, vamos listar perfis de públicos que possuem necessidades específicas para poder consumir o conteúdo da página.
- Deficiência visual:
- Cegueira;
- Baixa visão;
- Daltonismo
- Deficiência auditiva:
- Surdez;
- Baixa audição;
- Deficiência motora;
- Pessoas neurodiversas:
- Autismo;
- Dislexia;
- Pessoas idosas.
Diretrizes de acessibilidade
O WCAG, ou Web Content Accessibility Guidelines (traduzido livremente como Diretrizes para Conteúdos de Acessibilidade Web) pode ser considerado o principal documento de acessibilidade no qual devs podem se basear para tornar um conteúdo acessível.
Esse documento orienta como identificar e implementar técnicas para se eliminar barreiras de acesso para pessoas com deficiência (PCD). Por ser muito extenso o WCAG pode causar uma certa confusão na pessoa que o consulta. Para entender melhor a documentação podemos dividir suas camadas da seguinte forma:
Princípios
Perceptível: citando a própria documentação, “as informações e os componentes da interface do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário”.
Operável: “os componentes de interface de usuário e a navegação devem ser operáveis”. Em outras palavras, o conteúdo deve ser igualmente acessível independente do dispositivo utilizado, seja computador, tablet ou celular.
Compreensível: “a informação e a operação da interface de usuário devem ser compreensíveis”. Deve ser feito o uso adequado de cores, abreviaturas e ícones, por exemplo.
Robusto: “o conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo tecnologias assistivas”.
Diretrizes
Diretriz 1.1 – Alternativas em texto: estar disponível alternativas em texto para elementos não textuais, de acordo com as necessidades dos usuários;
Diretriz 2.1 – Acessível por teclado: “fazer com que toda funcionalidade fique disponível a partir de um teclado”;
Diretriz 3.1 – Legível: “tornar o conteúdo do texto legível e compreensível”;
Diretriz 4.1 – Compatível: “maximizar a compatibilidade entre os atuais e futuros agentes de usuário, incluindo tecnologias assistivas”.
Critérios de sucesso
Nível A: nível mínimo de conformidade. Atingindo-se esse nível diversas barreiras de acessibilidade são eliminadas. Por exemplo: alternativa em texto para elementos não textuais como imagens;
Nível AA: nesse nível atinge-se um público maior que o contemplado pelo A. Por exemplo: grau mínimo de contraste para evitar barreiras de acesso;
Nível AAA: contempla todos critérios presentes nos níveis anteriores, mas é o mais difícil de ser atendido. Recomenda-se usá-lo somente em algumas áreas da aplicação. Por exemplo: não utilizar conteúdo que pisca mais de três vezes por segundo.
Como eliminar as principais barreiras de acesso?
Agora você deve estar se perguntando como devs podem aplicar esses critérios para eliminar as barreiras de acessibilidade. No livro Acessibilidade na Web o autor divide essas barreiras nas seguintes categorias: estrutura, navegação e interatividade, design e multimídia. Baseado nisso vou mostrar exemplos em código de como fazer isso de forma simples, pois tornar as aplicações acessíveis é mais fácil do que parece.
Title
O texto contido no elemento title é o primeiro a ser carregado e transmitido para os leitores de telas. Então é importante que esse título seja claro para o usuário. Colocar o mesmo título para todas as páginas não é uma boa prática, pois não descreve o conteúdo da mesma. Também não é recomendado que se coloque a área do site após o nome. O melhor seria o seguinte:
<title>Sobre | Blog da Ana Camila</title>Idioma da página
Um ponto facilmente esquecido é a marcação do idioma da página. Esse é um atributo muito importante para os usuários de leitores de telas, pois é a partir dele que o software muda o idioma da leitura. Ele deve ser definido assim:
<html lang="pt-br">...</html>Navegação por teclado
Ter todo o conteúdo interativo do site disponível para navegação por teclado é uma das principais regras da acessibilidade na web. A navegação é feita usando as teclas tab e shift+tab.
Com isso torna-se importante manter o foco visível dos links e campos de formulário, ou seja, não é considerada uma boa prática remover o outline dos elementos, ao invés disso podemos customizá-lo.
Uso de cores
Não é considerada uma boa prática usar apenas cores para transmitir uma informação para o usuário. É importante que o entendimento do conteúdo seja igual para pessoas que não enxergam ou não percebem todas as cores.
Para transmitir a mensagem da cor podemos usar ícones ou imagens que a descrevam, isso ajuda também pessoas com deficiências cognitivas ou de aprendizagem.
Atributo alt
Aplicar o atributo alt é algo tecnicamente simples, mas demanda atenção. Deve ser levado em consideração alguns pontos ao descrever uma imagem, se ela é: informativa, decorativa, funcional, de texto, complexa ou mapa de imagens.
Outro ponto importante é que não é necessário escrever “foto de…” ou “ilustração de…” pois essa informação já é passada pelo leitor de tela quando identifica um elemento imagem.
O texto do atributo alt deve ser informativo, porém sucinto. Nele deve estar contido somente o necessário para a contextualização da imagem. Um exemplo de alt para uma imagem informativa seria:
<img src="img/foto123.jpg" alt="Casa de campo" >Conclusão
Com um pouco de empatia e conhecimento técnico podemos aos poucos melhorar a acessibilidade na web.
Recomendo bastante a leitura do livro “Acessibilidade na Web – Boas práticas para construir sites e aplicações acessíveis” do Reginaldo Ferraz, além da documentação da WCAG. Ambos são mais abrangentes e abordam pontos que não citei no artigo.
O que achou do artigo? Tem algo para acrescentar? Conta para a gente nos comentários!
Referências
- Livro Acessibilidade na Web – Casa do Código
- Brasil tem mais de 17 milhões de pessoas com deficiência, segundo IBGE – CNN Brasil
- Cartilha de Acessibilidade na Web – W3C Brasil
- Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0
- WCAG 2.0: compreenda de forma simples e rápida – Blog HandTalk
