10 ferramentas para melhorar a acessibilidade do site
Não há dúvida de que você entende a necessidade do seu site estar acessível para o maior número possível de usuários. Mas ler todas as diretrizes e padrões pode ser um pouco esmagador. Você pode encontrar as recomendações mais recentes do W3C aqui, mas precisa conhecer todas as palavras e seguir todas as diretrizes?
Hoje, vamos tentar facilitar um pouco as coisas com algumas ferramentas e recursos para ajudá-lo a melhorar a acessibilidade do site (e talvez até algumas verificações para considerar que não estavam no seu radar!).
Esteja você procurando garantir um contraste visual suficiente, um site acessível aos leitores de tela ou até mesmo criar e-mails acessíveis, temos tudo a ver!
1. Cor segura
O Color Safe ajuda a verificar (e até criar) paletas de cores acessíveis com base nas Diretrizes da WCAG para contraste de texto e cor de fundo. A ferramenta e os padrões usam uma fórmula baseada em proporção para determinar as combinações de cores que podem ser lidas por todos.
As diretrizes das WCAG recomendam uma taxa de contraste de 4, 5 para texto pequeno (corpo) e 3 para texto grande (qualquer coisa acima de 24 pontos).
Basta digitar suas cores - com base no código HEX - escolha e tamanho da fonte e gerar uma paleta. Você obtém uma proporção imediata para comparar e pode ver outras cores semelhantes. Verifique se algo semelhante pode ser uma opção melhor com base no seu tipo de letra e tamanho.
2. NoCoffee
NoCoffee é uma extensão do navegador Google Chrome que ajuda a visualizar seu design da mesma maneira que alguém com deficiência visual pode vê-lo. (Nada destaca a importância da acessibilidade, como vê-la dessa maneira.)
Pode verificar e mostrar o seguinte:
- Baixa acuidade com texto pequeno ou destinos de cliques
- Problemas de baixo contraste com elementos de texto e plano de fundo
- Daltonismo
- Visual neve, brilho, fantasmas e cataratas
- Nistagmo, que é um movimento involuntário rápido dos olhos
- Campos visuais obstruídos
3. Verificador de Contraste
O Verificador de contraste permite que você insira as cores de segundo plano e de primeiro plano na tela e obtenha verificações imediatas em relação a vários padrões visuais com uma aprovação / reprovação instantânea com código de cores.
Os recursos interessantes da ferramenta incluem a capacidade de alternar entre as opções de cores e escalas de cinza, compartilhar amostras de seus cheques e extrair cores das imagens. Você também pode salvar uma amostra de PDF. É uma ferramenta fácil, com muitos recursos que qualquer pessoa pode usar rapidamente.
Ele também fornece a proporção de cores, conforme descrito nas Diretrizes das WCAG.
4. Tota11y
Tota11y é um arquivo JavaScript que coloca um pequeno botão no canto inferior dos documentos. Ele se expande com uma barra de ferramentas que inclui vários plugins para diferentes verificações de acessibilidade.
- Violações de cabeçalhos e ordens de cabeçalhos
- Contraste (ou falta dela)
- Texto do link ausente ou confuso
- Etiquetas ausentes nas entradas
- Imagens sem texto alternativo
- Os rótulos são marcos da ARIA
- O leitor de tela “varinha” para que você possa “ler” o site como um leitor de tela
5. ONDA
WAVE, ou ferramenta de avaliação de acessibilidade da Web, é uma coleção robusta de verificações em um só lugar.
A ferramenta usa uma sobreposição visual de ícones relacionados às informações na barra lateral para fornecer detalhes sobre tudo, desde contraste de cores a títulos redundantes, links para HTML e elementos estruturais.
O verificador gratuito fornece quase tudo o que você precisa saber sobre uma única página, mas o WAVE também inclui ferramentas de nível empresarial pagas para proprietários de vários sites ou usuários que desejam mais de uma página por vez. Ele também inclui extensões de navegador Chrome e Firefox que podem verificar páginas da web intranet, protegidas por senha, geradas dinamicamente ou sensíveis em um ambiente privado.
6. Verificador 508
O Verificador 508 testa URLs para determinar se um site atende às diretrizes de Conformidade 508 dos Estados Unidos, exigidas por lei para qualquer organização que recebe financiamento federal.
Enquanto essa ferramenta é gratuita, você precisa se registrar para ver os resultados completos da verificação.
O site também inclui outras ferramentas e recursos, incluindo um questionário para ajudar as organizações a descobrir se estão sujeitas à conformidade com 508 e recursos específicos para ensino superior, organizações sem fins lucrativos e órgãos governamentais.
7. HTML_CodeSniffer
HTML_CodeSniffer é um script do lado do cliente que verifica o código-fonte e procura violações dos padrões definidos. Ele verifica as Diretrizes de acessibilidade de conteúdo da Web 2.0 e a Seção 508 dos EUA.
Cole o código diretamente no site para uma verificação ou use o bookmarklet.
É fácil de usar e você pode escolher que tipo de informação exibir - erros, avisos ou avisos e visualizar um relatório detalhando quaisquer preocupações da verificação.
8. Email Acessível
O Accessible Email é um verificador on-line e editor de HTML que o ajudará a melhorar o código de um boletim informativo por email antes de enviá-lo. (Você também pode verificar campanhas passadas / enviadas também.)
Com tanta comunicação digital e geração de leads provenientes de email, não deve ser um dos elementos esquecidos do site em termos de acessibilidade, mas geralmente é. As mesmas regras de acessibilidade na web também se aplicam a envios de email.
A ferramenta é gratuita e projetada para promover a acessibilidade e a usabilidade do marketing por email.
9. Amara
Amara é uma ferramenta para criar legendas e legendas para vídeos.
Fornecer uma maneira de conectar-se sem som ou em outro idioma pode abrir seus elementos de design para mais pessoas, principalmente se o vídeo for um elemento-chave do design.
Essa ferramenta inclui opções gratuitas e empresariais que facilitam a colocação do idioma na tela em um formato legível que funciona em sites e plataformas de streaming de vídeo como o YouTube.
10. MobiReady
O MobiReady fornece um teste de acessibilidade móvel em formato visual e com um relatório de resultados para que você possa ver onde seu site pode ficar aquém do menor dos dispositivos.
Você pode comparar seu site com o Alexa 1000, um ranking dos principais sites do mundo; obtenha resultados técnicos detalhados com recomendações e veja as renderizações do seu site em telas diferentes, incluindo dispositivos de alta, média e baixa camadas.
Uma das melhores partes deste teste é que ele é pontuado em dezenas de áreas e há sugestões de melhoria com qualquer "falha".
Conclusão
No que diz respeito à acessibilidade do site, é importante considerar a usabilidade e a legibilidade de todos os tipos de usuários. Pense em cor, tamanho e posicionamento de elementos, legendas e legendas, HTML e estrutura apropriados e até email para fornecer a melhor experiência possível ao maior número possível de pessoas.
Também é importante verificar se há regras de conformidade regionais ou nacionais que possam se aplicar a seus projetos, como os padrões de conformidade 508 mencionados acima.
E quando houver dúvida, é melhor errar no lado da acessibilidade. Não há problema em ajustar uma cor de uma paleta ou aumentar o tamanho da fonte para que mais pessoas possam entender o que está na tela com facilidade.
