Desafios em montar um front-end realmente acessível para todos — parte 1
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:
- IBGE pessoas com deficiência https://educa.ibge.gov.br/jovens/conheca-o-brasil/populacao/20551-pessoas-com-deficiencia.html
- Lei brasileira de inclusão da pessoa com deficiência http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm
- Cartilha de acessibilidade na web https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-II.pdf
