Dicas de como melhorar a acessibilidade de seu site
Introdução
Acessibilidade é um tópico muito falado mas muitas vezes vejo isso sendo deixado de lado.
Por ser um tópico bem grande, hoje irei abordar alguns pontos que são fáceis de começar e bem fácil de lembrar durante seu desenvolvimento.
Outline
Já notou que nos navegadores baseados no Chromium e no Firefox algumas interações possuem um comportamento padrão do navegador? Como por exemplo a seleção de um botão ou input.
Muitas vezes eu vejo sites onde removem por completo o outline em CSS Reset. E isso implica diretamente na acessibilidade.
Pessoas que utilizam navegação pelo teclado ou não conseguem identificar alterações de cores não conseguem detectar o que está acontecendo caso essa propriedade seja removida. Okay, entendo que talvez não combine muito com o layout, mas não o remova, você pode alterar o comportamento padrão do navegador e aplicar seu próprio estilo.
Basta seguir este artigo para ter uma ideia melhor: Copy the Browser’s Native Focus Styles
Textos alternativos
Textos alternativos são super importantes!
Seja pra SEO, acessibilidade e até performance.
O texto alternativo, ou alt, de uma imagem, por exemplo, quando a imagem não carregar o texto será exibido de placeholder. E além disso, os leitores de tela farão uso deste texto, então lembre-se de fazer um texto que faça sentido e que ajude quem realmente precisa. Tente descrever o máximo a imagem!
ESLint
ESLint é o seu melhor amigo durante o desenvolvimento. Além de te ajudar a manter um bom código ele pode te ajudar com acessibilidade também!
Esse plugin vai te ajudar com vários pontos importantes de acessibilidade, como garantir os textos alternativos, a inclusão de aria em seus componentes, verificar se as anchor tags são válidas, se os emojis estão corretos e possuem acesso aos leitores de tela entre inúmeras funcionalidades. Vale a pena dar uma conferida!
Obrigado por ler! E se gostou do conteúdo, não deixe de seguir meu site que também está na fonte :D
Dicas valiosíssimas Miguel!!
Recentemente conheci a Headless UI uma lib para React e Vue que além de facilicar o desenvolvimento do componente em sí, traz muita coisa pronta com relação a acessibilidade.
Caso alguém esbarre com esse tópico aqui no futuro, o Miguel implementou um linter no TabNews e que faz algumas verificações no nosso CI:
Miguel sensacional!!! Adorei o plugin do ESLint para acessibilidade.
Você tem acesso ao repositório do TabNews? Se não tiver, peço que responda aqui com o seu username no Github para adicionar. Se já tiver, peço que veja essa issue:
https://github.com/filipedeschamps/tabnews.com.br/issues/95
E topa fazer um PR com a instalação desse plugin?