Desafios em montar um front-end realmente acessível para todos — parte 1

Cassio Dourado
3 min readJun 9, 2020

--

Um front-end acessível vai muito além de um projeto bonitinho responsivo ou que funcione em diversos dispositivos. Mas sim, um projeto inclusivo focado na experiência do usuário.

Recentemente foi recebido o desafio de tornar o portal da TotalAcesso mais acessível e inclusivo. Para tornar isso possível foi necessário levantar algumas questões:

  • Por que é importante ter um site/produto acessível?
  • É possível um projeto com o front-end em Angular acessível?
  • Quais as ferramentas devo utilizar?
  • Por onde começar?
  • O que é WAI-ARIA?
  • A semântica realmente importa?
  • Como consigo validar se o projeto realmente está acessível?
  • O que é o selo de acessibilidade digital?

Por que é importante ter um site acessível?
Apenas para contextualizar: No Brasil cerca de 24% da população possui algum tipo de deficiência. Tornando o seu projeto acessível fará com que essas pessoas sejam incluídas e consigam ter acesso ao seu conteúdo/produto.
Na TotalAcesso fazemos a venda de ingressos para grandes eventos e também para os jogos do estádio do Morumbí em que parte dos tickets é destinado a PCD (pessoa com deficiência). E tornando a plataforma acessível estamos fazendo com que o processo de compra seja mais simples e fácil para eles, dessa forma eles não precisarão mais pegar fila para tentar efetuar a compra do ingresso na hora do evento e assim evitando o risco de chegar até o local e os ingressos estarem esgotados.

É possível um projeto angular ser acessível?
Sim, independente da stack que você utiliza em seu projeto ele poderá ser acessível.
Basicamente será necessário seguir e implantar as diretrizes de acessibilidade e escrever um código semântico. Lembrando que a real necessidade de escrever um código semântico não é apenas pensando no SEO, mas sim pensando nos usuários que usam leitores de tela (eles interpretam as tags contidas no código e dão sentido a elas). Por exemplo a hierarquia dos títulos da página, as listas de links, os botões, etc.

Quais ferramentas utilizar?
Durante o processo de validação da acessibilidade, utilizamos o software leitor de tela NVDA (ambiente windows). Também é disponibilizado pelo governo federal uma ferramenta ASES WEB que faz os testes e retornam uma pontuação de cada página, além de sugerir o que precisa ser melhorado ou substituído.

Uma outra forma simples e fácil de testar o seu projeto é com a extensão para o crhome chamada Axe.

Por onde começar?
O primeiro passo nesse processo é validar o quão acessível está o seu projeto. Para isso o governo disponibiliza uma ferramenta online e gratuíta o ASES (avaliador e simulador de acessibilidade em sítios) que é um validador e testador de código.
Nele é possível validar o seu código por meio de URL, upload de arquivo ou copiar e colar o código fonte.

A semântica realmente importa?
Sim! Quando escrevemos um HTML semântico estamos ajudando usuários que utilizam tecnologias assistivas a navegar e estamos dando significado ao conteúdo. utilizamos as landmarks e tags corretamente, adicionando os labels em inputs, alt descrevendo as imagens e respeitando a hierarquia e a ordenação do conteúdo..

Problemas comuns e como resolvê-los
Bom, durante os testes de aplicação de acessibilidade encontramos um cenário em que o usuário com baixa visão precisa preencher um campo de senha que por questão da segurança da informação não seria ideal deixar o leitor de tela expor a senha do usuário, mas por outro lado ele precisa saber o que está sendo digitado, isto foi algo bastante desafiador e irei detalhar como resolvemos este problema no próximo post.

REFERÊNCIAS:

--

--

Cassio Dourado

Desenvolvedor front-end, gosto por fotografia e culinária. Um cara que normalmente toma mais café que água…