Precisamos falar sobre acessibilidade na Web
Vamos ser sinceros, a maioria de nós, desenvolvedores, sabemos da existência de pessoas com algum tipo de limitação para navegar na internet, mas ao mesmo tempo, poucos de nós realmente pensa nisso na hora de programar.
Nesse artigo eu não vou pedir pra você baixar um leitor de tela, fazer um novo curso de HTML ou arrumar alguém pra testar seu site, mas como um pouco de bom senso e algumas propriedades no HTML podem mudar totalmente a experiência do seu site e alcançar muito mais pessoas.
Acessibilidade nunca foi minha prioridade na hora de desenvolver, até o dia em que um deficiente visual me abraçou e me agradeceu pelo meu site ser acessível. Isso abriu a minha mente. Nós vivemos dentro da nossa bolha de realidade, achando que todo mundo usa a última versão do Chrome, numa máquina top, sem nenhuma limitação e com conhecimento técnico pra entender como preencher um formulário (spoiler: não é todo mundo).
Apenas pra você ter uma noção, no brasil, apenas 5% das páginas na web são acessíveis e 3,5% da população brasileira tem algum tipo de deficiência visual e 2,3% tem algum problema de mobilidade. Pode parecer pouca coisa mas isso significa 12 milhões de pessoas. É muita gente.
Um dos maiores problemas em questão de acessibilidade em muitos sites são os formulários.
É comum criar um formulário da seguinte maneira:
A maioria das pessoas conseguem deduzir que é pra preencher o nome mas para o leitor de tela de um deficiente visual, não há nenhuma sugestão do que deve ser preenchido. Podemos melhorar isso da seguinte forma:
Onde label é a sugestão do campo e deixando o atributo for igual ao id do input, eles ficam atrelados, assim, ao clicar no label, o input ganha o foco.
Essa dica também é ótima pra ser usada em inputs do tipo Radio e Checkbox, quando a área do clique é um pouco pequena e difícil de clicar, se você usar um label com um for igual ao id deles.
Ou até para criar um input bonito e estilizado, apenas com label, e o input escondido, e usar a propriedade :checked do CSS para ativar/desativa-lo visualmente, dessa forma:
React Tip
Algo muito prático e que me ajuda a deixar um formulário acessível é criar um componente de input no React da seguinte forma.
Assim, podemos usar o name dele pra setar o name, for e id e ainda usar o mesmo event handler em todos os inputs para alterar seu valor/estado, da seguinte forma:
Outro problema comum de acessibilidade são imagens sem uma descrição. Um leitor de tela não tem a capacidade de reconhecer o contexto de uma imagem, por isso o atributo alt é importante pra dar essa dica.
E sabe quando você faz um botão apenas com um X pra fechar um modal? Você pode torna-lo acessível usando a propriedade aria-label pra atribuir uma descrição quando não há ou o texto está escondido.
Bom Senso com HTML
Um ótimo teste que você mesmo pode fazer enquanto desenvolve é tentar navegar pelo seu site apenas usando a tecla Tab e preencher os campos de um formulário, clicar em botões, links, scrollar listas, etc.
Lembre-se do propósito do HTML, que é marcar textos e dar significado para seu conteúdo. Então, por favor, procure usar as tags corretas em listas, botões, links, menu, cabeçalho, rodapé, parágrafos, títulos.
Por exemplo, apesar de ser possível escutar eventos de clique em todas as tags e deixa-las visualmente parecidas com um botão com CSS, como div, span, p, li, por natureza, elas não são clicáveis. Você mesmo não vai conseguir seleciona-las/clica-las com o Tab.
Veja nesse exemplo:
Repensando acessibilidade
Mas acessibilidade vai muito além de pessoas com deficiência visual conseguirem acessar o seu site. Acessibilidade é o seu site e conteúdo estar disponível para qualquer pessoa, incluindo idosos ou não, crianças ou não, com mobilidade reduzida ou não, e através de qualquer dispositivo e navegador, seja num MacBook, Internet Explorer, Smart TV, usando apenas um teclado, mouse, leitor de tela, ou movimento dos olhos.
A internet está aí pra facilitar nossa vida. Conseguimos fazer muitas coisas bem rápido, como pagar contas, comprar um ingresso pro cinema, mas essas tarefas cotidianas se tornam extremamente complexas para os deficientes. Coisas que fazemos em 2 minutos pra eles podem levar ás vezes de 30, 40 minutos.
E só depende de nós, programadores, tornar a internet mais acessível e menos seletiva, incluir todas essas pessoas, sem diferencia-las. Que tal lembrar delas na próxima vez que for codar?
Mais dicas
Claro que existem muitas outras técnicas e formas de deixar seu site mais acessível, deixarei o link de alguns artigos aqui em baixo e se você tiver outra dica, fique a vontade em colocar nos comentários, que eu atualizo post.
https://www.felipefialho.com/blog/2016/sobre-wai-aria-acessibilidade-e-semantica
https://aerolab.co/blog/web-accessibility
