Desde 1991, quando foi criada por Tim Berners-Lee, a web vem sendo utilizada em diversas áreas das nossas vidas e vem ganhando cada vez mais importância. E quando pensamos no futuro, é possível imaginar um ambiente cada vez mais imersivo e que possibilite experiências completamente inovadoras (ex: metaverso). Porém, você já parou pra pensar o quão acessíveis são esses ambientes? Será que a sua página na web oferece a mesma experiência para pessoas com algum tipo de deficiência?

Somente no Brasil, existem cerca de 17,3 milhões de pessoas que podem ser seus potenciais clientes e estão sendo deixados de lado, caso a acessibilidade não esteja em pauta de relevância para o seu negócio.

A busca pela acessibilidade na web não é apenas uma prática recomendada, mas um dever para websites, afinal, a internet é para todos e o acesso à informação é um direito universal.

Para melhor entendimento do tema, separamos esse artigo em 4 tópicos:

O que é acessibilidade na web?

• Por que devemos nos preocupar com isso?

• Diretrizes de acessibilidade: O que são, e como as aplicamos?

• Ferramentas que utilizamos para monitorar a acessibilidade.

Boa leitura!

O que é acessibilidade na web?

Segundo a Cartilha de acessibilidade do W3C (Organização que trabalha para desenvolver padrões para a Web), podemos entender acessibilidade na web da seguinte forma:

”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”

Para a maioria das pessoas a tecnologia serve para facilitar suas vidas e quando falamos de pessoas com deficiência, a tecnologia torna as coisas possíveis. Por isso, a tecnologia é um instrumento fundamental para a autonomia dessas pessoas, quando temos um site sem acessibilidade, temos uma barreira, que impede o acesso e a comunicação.

Portanto podemos dizer de maneira mais abrangente que:

“Acessibilidade na web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso.” (Cartilha de acessibilidade do W3C)

Por que devemos nos preocupar com isso?

Segundo um levantamento do Instituto Brasileiro de Geografia e Estatística (IBGE), cerca de 8,4% da população brasileira têm algum tipo de deficiência. Apesar de em termos percentuais esse número ser relativamente baixo, quando olhamos para a quantidade total de pessoas vemos que isso representa 17,3 milhões de pessoas. Sendo assim, quando uma página não está acessível, ela está criando uma barreira para milhões de pessoas. Ou seja, se o seu site não está acessível, com certeza o seu negócio está perdendo dinheiro.

Ao analisar globalmente, o novo relatório da OMS (Organização Mundial da Saúde), aponta que há quase 1 bilhão de adultos e crianças com algum tipo de deficiência excluídos do acesso a tecnologias.

Segundo a Lei Brasileira de inclusão (criada em 2015), todos os sites públicos e privados devem estar acessíveis, porém, segundo um estudo realizado pelo movimento WPT (Web para todos), menos de 1% dos sites disponíveis no Brasil estão seguindo os padrões de acessibilidade. Com isso, podemos dizer que ter um site acessível não é apenas cumprir a lei, é ter um diferencial competitivo. 

Diretrizes de acessibilidade: O que são, e como nós aplicamos?

As diretrizes de acessibilidade são recomendações que têm a finalidade de tornar o conteúdo Web mais acessível. O W3C desenvolveu um documento que estipula os padrões de acessibilidade que devem ser seguidos pelos sites, esse documento é chamado de WCAG (Web Content Accessibility Guidelines).

Existe também o WAI-ARIA (Accessible Rich Internet Applications) que é um conjunto de atributos especiais para a acessibilidade, que pode ser adicionado a qualquer linguagem de marcação, mas é especialmente adequado para HTML.

Aqui na trinca, nós aplicamos essas diretrizes levando em consideração 3 tópicos:

• Estrutura de página

• Multimídia e conteúdo não textual

• Navegação e interatividade

Estrutura de página

A estruturação da página é muito importante para pessoas com deficiência cognitiva e dificuldade de aprendizado. Uma página que tenha uma estrutura confusa, com títulos que não fazem sentido e semântica ruim, prejudica a priorização do conteúdo e a navegação para pessoas que utilizam leitores de tela. Além disso, a estrutura da página é um fator muito relevante para os motores de busca, dependendo de como o seu site é estruturado isso prejudica o seu ranqueamento.

Para garantir uma boa estruturação e facilitar os leitores de tela, algumas coisas devem ser levadas em consideração no momento do desenvolvimento, como:

• Utilizar a tag <title> para títulos da página
  A tag <title> permite que os leitores de tela identifiquem que o texto é um título.

• Utilizar as tags <header>, <nav>, <section> e <footer>
  Normalmente uma página web tem uma estrutura lógica dos seus conteúdos. É muito comum termos uma seção de cabeçalho ( <header>) e outra de rodapé ( <footer>), um menu ou área de navegação ( <nav>) e o conteúdo. Para que essa estrutura seja entendida da melhor forma, é necessário utilizar as tags html corretas.

• Idioma da página e de partes do conteúdo

Multimídia e conteúdo não textual

Além de textos, uma página web contém diversos tipos de conteúdos não textuais, como imagens. Mas, como as pessoas com deficiência visual poderiam interagir com essas imagens? É por isso que é necessário utilizar diversos atributos na tag <img> do html, para que os leitores de tela consigam descrever exatamente o que aquela imagem representa no contexto do seu site.

Além disso, assim como na estruturação da página, imagens com atributos de acessibilidade passam a ser indexadas pelos motores de busca.

Logo abaixo, apresentamos alguns atributos da tag <img> para cada tipo de imagem:

• Imagens informativas:
  São aquelas imagens que têm algum significado. O exemplo abaixo é do site da Trinca, onde temos uma imagem que é descrita de forma textual no atributo alt da tag <img>

• Imagens complexas
  Imagine que você deseja adicionar a imagem de um gráfico na sua página. Para isso, podemos utilizar a estrutura mostrada abaixo para que os leitores de tela consigam descrever o que o gráfico está representando.
  
  Navegação e interatividade
  
  Uma das coisas mais importantes na experiência de um usuário com um site é a interatividade e navegação que este proporciona. Porém, quando pensamos em navegação, temos que considerar que nem todas as pessoas conseguem utilizar o mouse. Além disso, a forma como os usuários interagem com o seu site não é a mesma. Por isso é extremamente importante possibilitar a navegação por teclado para que todos consigam navegar pelo site.
  
  Ferramentas que utilizamos para monitorar a acessibilidade
  
  Aqui na Trinca, o pensamento sobre acessibilidade acontece desde o diagnóstico de experiência e envolve as equipes de design, desenvolvimento e testes. Quando as tarefas chegam na equipe de desenvolvimento, algumas ferramentas podem ser utilizadas para verificar se o que estamos desenvolvendo está de acordo com as boas práticas descritas pelo W3C. Abaixo segue a listagem de algumas ferramentas que utilizamos:

• eslint-plugin-jsx-a11y
  Para o desenvolvimento das páginas web de nossos clientes, nós utilizamos uma biblioteca de desenvolvimento de interfaces de usuário chamada Reacjs. Ao utilizar essa biblioteca, nós temos a possibilidade de instalar  algumas ferramentas que nos ajudam no momento do desenvolvimento. Uma dessas ferramentas é o eslint-plugin-jsx-a11y, que monitora o nosso código buscando por possíveis erros de acessibilidade.

• Lighthouse do Google Chrome
  O Google Chrome disponibiliza um conjunto de ferramentas que auxiliam os desenvolvedores chamado Developer Tools(DevTools). Uma das ferramentas que estão presentes dentro do DevTools é o Lighthouse. Com ele é possível auditar os sites que estamos desenvolvendo, além da geração de relatórios completos sobre a acessibilidade tanto para dispositivos móveis quanto desktop.
  
  Quer saber mais sobre acessibilidade e ficar por dentro dos assuntos de tecnologia? Continue acompanhando o Blog da Trinca e conte conosco para tornar seu site ou produto digital acessível e assim, abrir as portas da sua empresa para um público ainda maior, além de reforçar o seu posicionamento inclusivo e diverso.