Acessibilidade no Frontend - Introdução

Olá, pessoa! Tudo bem?

Sem muita enrolação, vamos conversar sobre acessibilidade. Muitas vezes esse assunto envolve documentações extensas e cansativas, então nossa intenção é sermos práticos pra que você não durma ou feche a aba.

Só pra deixar claro, o objetivo audacioso deste post é dar uma introdução conceitual e apresentar práticas aplicáveis no dia a dia para que você finalize essa leitura sabendo identificar falhas básicas de acessibilidade e como corrigi-las.

O que é acessibilidade?

A descrição mais concisa que pude encontrar foi:

Oferecer possibilidades de transpor as barreiras que existem na nossa sociedade, garantindo que todas as pessoas possam participar dos diversos âmbitos sociais.

No nosso caso, como frontends, tratamos de acessibilidade na web, afinal, o âmbito é estritamente digital pois o produto do nosso trabalho são aplicativos e sites.

Se você for pesquisar, também é possível encontrar bastante conteúdo sobre acessibilidade como a11y existe até um projeto opensource que leva a sigla no nome, chamado The A11y Project e, que possui diversos conteúdos, tanto para designers, quanto desenvolvedores, Product Managers, enfim, se despertou sua curiosidade dê uma olhada depois (vale a pena).

Quem define as diretrizes

Falando de um ponto de vista mais técnico, se temos diretrizes, quem as define?

É a famosa W3C (World Wide Web Consortium), um consórcio que regulamenta os padrões para web e, que fazem homologação desde tags HTML até protocolos.

Em outras palavras, eles são incumbidos de escrever a WCAG (Web Content Accessibility Guidelines) que é um conjunto de diretrizes sobre acessibilidade.

Princípios da WCAG 2.1

Atualmente a WCAG encontra-se em sua versão 2.1 e tudo que é escrito nela é baseado em 4 princípios: Perceptível, Operável, Compreensível e Robusto.

Ao invés de trazer o que cada um desses tópicos significa e acabarmos numa conversa abstrata, dei uma lida geral e concatenei 12 recomendações que eles publicaram em 2018 em pequenos textos que na minha opinião refletem o que temos que entregar para o usuário final para que consigamos nos adaptar a cada um dos tópicos:

Perceptível

Operável

Compreensível

Robusto

Critérios de Sucesso

Para cada diretriz, são fornecidos critérios de sucesso testáveis, a fim de atender as necessidades dos diferentes grupos e situações, são definidos três níveis de conformidade:

Selo de acessibilidade digital

Falamos muito sobre diretrizes e critérios até agora mas alguém vai validar isso pra você? Pode. Se você quiser.

Existe um processo de análise realizado pela Comissão Permanente de Acessibilidade onde você pode obter um selo de site acessível caso esteja dentro dos parâmetros necessários.

De maneira simplificada, as etapas do processo são:

Para saber mais sobre as etapas você pode conferir este vídeo: Selo de Acessibilidade Digital.

Acessibilidade dos sites brasileiros

Falando um pouco sobre estatísticas, vamos ver como andam os números de 2019 e 2020 com base nos 14.5 milhões de endereços .br:

2019

2020

Não temos sequer 1% ainda e quando falamos por setores, como fica essa divisão?

Os setores menos acessíveis são blogs (98,76%), e-commerce (98,70%), corporativos (97,19%), notícias (96,97%) e educacionais (96,12%).

Sendo que os principais erros incluem problemas com formulários e somam 55,19% das falhas dos sites, problemas nos links chegam a 93,65%, mais de 83% tem problemas de acessibilidade com imagens, 30% com frames e 97% dos sites apresentaram algum problema no teste do W3C.

Vamos falar menos de sites e mais de pessoas

A cada 5 segundos, uma pessoa fica cega no mundo.

Esse dado foi retirado do World Report on Disability 2010 e do Vision 2020 segundo a Fundação Dorina.

Por si só é um número assustador mas te convido a ir além e visitar o site Stories of Web Users onde casos comuns foram documentados para evidenciar as barreiras de acessibilidade e os benefícios de sites acessíveis.

De uma maneira mais leve o movimento Web Para Todos também abordou o assunto com o vídeo Como marcar um date na web (sendo cego) | Campanha Movimento Web para Todos, são 30 segundos só e vale a pena. O ator escolhido é o Gustavo @torniero, jornalista e ativista pelos direitos das pessoas com deficiência.

Falando um pouco sobre o Brasil

Segundo a ONU, há 1 bilhão de pessoas com algum tipo de deficiência no mundo. Em outras palavras, a cada 7 pessoas 1 tem alguma deficiência.

De acordo com o Censo de 2010, 46 milhões de brasileiros possuem certo grau de dificuldade, seja para enxergar, ouvir, caminhar, subir degraus, deficiência mental/intelectual.

Dentre as pessoas com dificuldades parcial ou total nas habilidades para enxergar, caminhar, ouvir ou subir degraus, há mais de 12.5 milhões de brasileiros, o que corresponde a 6,7% da população.

Permanente versus Temporário

Os números citados são grandes e nós sequer estamos englobando o cenário do Permanente versus Temporário, o que isso quer dizer?

Imagine um personagem chamado Pedro, ele nasceu sem o braço direito, ele está dentro daquela estatística. Agora temos dois novos personagens, o Ricardo e a Marina. Ricardo quebrou o braço direito em um acidente de moto e Marina teve uma filha recentemente e como trabalha de home office, frequentemente está com a criança num braço e o mouse no outro.

Neste cenário eles dividem a mesma dor pois sofrem as mesmas dificuldades.

Por que devemos pensar em acessibilidade?

Se chegamos até aqui e ainda não ficou clara a resposta para essa pergunta, vamos analisar os tópicos abaixo:

Fazendo diagnóstico de páginas

Preparação

Antes de mais nada, você precisa saber o que está procurando. Você se lembra que vimos os principais problemas de acessibilidade e eram pontos básicos de navegação?

Sendo assim, aconselho duas séries de vídeos, a primeira é chamada: a11y casts playlist criada pelo Google Chrome Developers, que abordará assuntos como: O que é focus? Controlando o foco; Basta usar um botão; Tabindex; Leitores de Tela (VoiceOver, NVDA); Atributo ARIA, entre outros.

E a segunda playlist é chamada Quick accessibility test playlist com vídeos de em média 1 minuto onde você aprende a fazer testes rápidos manuais e não precisará de nada além do teclado e mouse. Alguns assuntos abordados são: Navegação com teclado, Redimensionamento da janela e zoom, Alto Contraste, entre outros.

Mas eu não preciso estudar isso! As ferramentas e snippets de código me dirão o que fazer.

É mesmo? Vamos olhar o snippet de código abaixo e você me diz o que tem de errado. Vou adiantar que é um trecho de código em Javascript que ao ser executado no Console do Google Chrome Devtools adiciona bordas vermelhas a todas as imagens que não possuem atributo alt ou que ele esteja vazio.

(() => {
    const imagesWithoutAlt = document.querySelectorAll('img[alt=""], img:not([alt])');
    imagesWithoutAlt.forEach(item => item.style.outline = "solid 10px red");
})();

Já entendeu? Não? A questão é que o atributo alt vazio não é um erro, ele indica uma imagem decorativa, ou seja, que não tem conteúdo relevante para ser descrita.

Meu ponto é: As ferramentas e snippets podem auxiliar muito na jornada mas sem entendimento dos conceitos para tomar suas decisões, elas podem induzir ao caminho errado. Dito isso, vamos ao próximo tópico!

Ferramentas

Avançando para ferramentas de diagnóstico, as duas primeiras ferramentas são:

Resolvi citá-las primeiro porque provavelmente você tem esses dois navegadores instalados e deve aproveitar os recursos antes de sair caçando soluções mirabolantes. Aconselho o vídeo Understand Website Accessibility with the Firefox Accessibility Inspector postado no canal Mozilla Developer onde Jen Simmons (@jensimmons, designer, desenvolvedora, educadora e palestrante) explica sobre o Accessibility Inspector.

Agora vamos avançar para Bookmarklets, que nada mais são do que scripts favoritáveis no navegador que executam funções em Javascript no site e, no nosso caso, relacionadas a acessibilidade:

Partindo para ferramentas robustas de terceiros indico as duas abaixo que analisam seu site em produção e geram reports completos com acertos, erros e pontos a serem conferidos manualmente:

Lembrando que existe uma variedade de ferramentas e você tem liberdade para escolher a que melhor se encaixa no seu contexto. Vou deixar mais este link interessante com 25 ferramentas de teste: Top 25 Awesome Accessibility Testing Tools for Websites.

Conclusão

Referências