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.
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).
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.
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:
Layout responsivo e contrastante: Podemos assumir que metade do trabalho é com o front e a outra com os designers. Afinal, no front temos que tomar os devidos cuidados para entregar o layout responsivo e a questão de contraste tanto relacionada a cor quanto tamanho da tipografia ou seu peso deve ser avaliada pelos designers.
Informações em várias mídias (texto, áudio, vídeo): Sabe aquele blog que você visita e tem um player onde é possível ouvir o conteúdo da matéria, então, o foco não é pra quem tem pressa ou preguiça e sim para aqueles que possuem dificuldades de leitura. Nós também podemos encontrar vídeos, muito comuns em blogs de reviews, a ideia é a mesma.
De fácil entendimento: Na área de Design, falando especificadamente de UX Design, existe um profissional chamado UX Writer cujo um dos trabalhos é identificar a dificuldade das pessoas lerem um texto e compreenderem. Em outras palavras, eles tem um conjunto de regras para avaliar a complexidade de textos. Isso serve muito para interface, por exemplo: Imagine quantos perfis de pessoas com diferentes dispositivos lidam com a interface do aplicativo de um banco e você precisa que a proposta se encaixe para todos eles.
Conteúdo acessível por teclado: Que seja possível interagir com todos os elementos da página utilizando o teclado, que esses elementos siga uma ordem intuitiva e esteja claro para o usuário o elemento que está focado.
Facilmente navegável: Imagine um mega menu, se você repetidamente pressiona TAB, entra nas opções e não consegue sair, é um problema. Então cabe a nós elaborar uma estratégia para que as pessoas consigam acessar esse menu diretamente ou o conteúdo principal, por exemplo.
Se o conteúdo for animado, que o intervalo de tempo seja razoável e as animações suaves: Um slider que passa muito rápido e ninguém consegue ler não é muito útil não é mesmo? Além disso, dependendo da velocidade algumas pessoas podem experimentar desde um mal estar até crises epilépticas.
Conteúdo legível e comportamento previsível: Se você aplica o mesmo botão em duas telas diferentes, ele precisa exercer a mesma função. Por exemplo, se ele abre uma nova aba num lugar e abre um modal em outro, se torna confuso para o usuário.
Ajude o usuário a corrigir erros: Imagine um formulário onde você erra e nenhum campo tem contornos em vermelho, as mensagens de erro não estão próximas dos campos correspondentes e você precisa ir e voltar, para cima e para baixo, o tempo todo. Tendo que enviar duas ou três vezes pela falta de feedback. Frustrante, não? Pois é.
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:
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.
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.
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.
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.
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.
Se chegamos até aqui e ainda não ficou clara a resposta para essa pergunta, vamos analisar os tópicos abaixo:
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!
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.
Se dedique aos estudos de acessibilidade mas não desenvolva uma obsessão pela sua solução atender 100% dos casos;
Sempre tenha empatia e disposição a ouvir;
Lembre-se que não se muda tudo de uma vez, seja paciente;
Descubra as opções de acessibilidade dos seus dispositivos;
Familiarize-se com leitores de tela: VoiceOver da Apple, NVDA disponível para Window 7 ou superior e, o Orca em distribuições Linux;
Estude HTML semântico que é a linguagem universal de todos os dispositivos que acessam a web e provêm descrição e significado ao conteúdo. Em outras palavras, entenda a estrutura de uma página simples criada utilizando corretamente tags como: header, footer, main, article, section, nav, menu; pesquise sobre tags de imagem: img, alt, figure, figcaption, picture; tags voltadas a formatar conteúdo: abbr, em, kbd, strong, wbr;
Construa sua biblioteca de referências para ter suporte na hora de desenvolver do zero ou analisar um código. Dois bons exemplos são a Vox Accessibility Guidelines e o guia WCAG de Marcelo Sales (@msales, especialista em acessibilidade digital).
E, por último mas não menos importante, compartilhe o que você aprendeu 😊