6 Noções básicas de acessibilidade causam 97% dos erros

Repetidamente encontro os mesmos seis problemas ao avaliar a acessibilidade de um site, assim como a maioria dos consultores.

Eu gostaria de imaginar um mundo onde as empresas limpam a maioria das falhas de acessibilidade internamente e contratam consultores apenas para resolver problemas altamente técnicos.

Infelizmente, muitas empresas lutam para implementar o básico. Resolver os seis erros comuns abaixo resolve muitos acessibilidade snafus, ajudando muito os usuários com deficiência visual.

6 Erros Comuns de Acessibilidade

A organização sem fins lucrativos WebAIM analisa periodicamente os problemas de acessibilidade da página inicial dos 1 milhão de sites mais visitados. O estudo usa testes automatizados para identificar o número e o tipo de erros.

Parte superior da página inicial do WebAIM

O WebAIM analisa a página inicial dos 1 milhão de sites mais visitados em busca de erros de acessibilidade.

Como é típico com teste automatizado, o estudo detecta apenas cerca de um terço dos problemas de acessibilidade. Mas é útil identificar erros comuns.

Em 2022, o WebAIM descobriu que 96,8% de todas as páginas iniciais testadas tinham pelo menos um erro, de acordo com as Diretrizes de Acessibilidade de Conteúdo da Web. Também descobriu que 96,5% dos erros se enquadravam em um dos seis tipos:

  • Texto de baixo contraste,
  • Faltando texto alternativo para imagens,
  • Links vazios,
  • Faltam rótulos de entrada de formulário,
  • Botões vazios,
  • Idioma do documento ausente.

Texto de baixo contraste. Usar cores semelhantes para fundo e texto não tem contraste. Isso afeta profundamente os compradores on-line com daltonismo, visitantes mais velhos com perda de visão induzida pela idade ou até mesmo usuários de dispositivos móveis sob luz solar intensa.

Contraste de cores Os testes aplicam um algoritmo que analisa uma métrica chamada “luminância relativa”, que tenta quantificar a diferença entre duas cores. Quando duas cores diferem insuficientemente, a porcentagem de usuários que lutam para ler o conteúdo é significativamente maior.

Um artigo sobre cores e acessibilidade da Mozilla Foundation é bem Vale a pena ler.

Em muitos casos, você pode corrigir o baixo contraste com uma alteração modesta. Nos exemplos abaixo, a correção é um ajuste na cor do texto.

Captura de tela do texto de exemplo usando baixo contraste de cores.

Este texto falha no teste de contraste de cores. A cor do texto é o código hexadecimal #777 (um tom de cinza) sobre uma cor de fundo #fff (branco).

Captura de tela de um contraste de cor aceitável

Alterar a cor do texto para #757575 (outro tom de cinza) sobre uma cor de fundo #fff (branco) permitiu que este exemplo passasse no teste de contraste de cores.

A diferença entre esses dois é quase imperceptível visualmente. Mas legalmente, é significativo. Observe que as cores de marca de baixo contraste são melhor usadas como acentos, não como texto.

Texto alternativo ausente. Cada imagem em uma página da web precisa de um alt atributo, texto que representa essa imagem. Nem toda imagem precisa de texto descritivo, no entanto. Um atributo alt vazio deliberado pode ser apropriado. Mas “vazio” e “ausente” são diferentes.

Vazio atributos alternativos aparecer como alt=””.

A imagem tem uma descrição, que está vazia. Os leitores de tela ignoram essas imagens. É razoável decidir que uma imagem é decorativa, não requerendo texto. Mas um botão, gráfico ou imagem de texto ou números nunca é decorativo.

Um atributo alt ausente significa que o campo inteiro não está presente. Os leitores de tela geralmente assumem que a imagem é importante e injetam seu nome de arquivo como o alt atributo.

Para ajudar a decidir, consulte o árvore de decisão de texto alternativo do World Wide Web Consortium.

Links vazios. Links sem texto âncora estão “vazios”. A “árvore de decisão de texto alternativo” acima é o texto âncora para esse link. O problema de links vazios é semelhante à falta de texto alternativo.

Um link se forma quando o uma elemento está presente com um href atributo. O que quer que esteja dentro disso uma elemento é o texto do link — que é o que será lido em um leitor de tela. No exemplo abaixo, “árvore de decisão de texto alternativo” é o texto do link. Eu adicionei vermelho para dar ênfase.

árvore de decisão de texto alternativo

Quando você vincula uma imagem — como um JPG ou PNG ou um ícone baseado em fonte — o “texto” do link é o alt texto. Se o alt texto está faltando, o link está vazio. Os usuários de leitores de tela saberão que é um link, mas não terão mais informações.

Cada link precisa de um rótulo de texto descrevendo sua finalidade. Portanto, o texto alternativo para uma imagem pode mudar com base no contexto.

Por exemplo, uma imagem no página do produto deve ter uma descrição de, digamos, o ângulo do item mostrado. Mas uma imagem de produto vinculada a uma página de produto deve ter o nome do produto.

Rótulos de entrada de formulário. Um site que coleta informações do visitante – uma frase de pesquisa, número de cartão de crédito, endereço de e-mail – usa um formulário e uma entrada. Se esses campos de entrada não tiverem rótulos, os visitantes dos leitores de tela não saberão o que você está tentando coletar.

Mas um “rótulo” é mais do que um texto visível. Ele precisa de uma descrição no código, como “Endereço de e-mail”.

Assim, o texto que descreve um campo não significa que ele está rotulado. Um campo tem não label se o texto não tiver uma conexão explícita ou for um espaço reservado que desaparece dentro do formulário quando um usuário adiciona as informações.

O campo de formulário ideal tem um rótulo visível dentro de um A Iniciativa de Acessibilidade à Web do W3C tem um excelente artigo na rotulagem de campos de formulário.

Botões vazios são o mesmo problema que links vazios e texto alternativo ausente. Todos os três carecem de uma versão textual de um elemento visual.

Um botão ou link que não seja texto simples requer uma descrição ou nome para um leitor de tela.

Idioma do documento ausente. Os leitores de tela falam o idioma de uma página conforme configurado no sistema operacional do visitante, aplicando as regras de pronúncia apropriadas. Os leitores de tela falam espanhol se os visitantes usarem seus computadores nesse idioma.

o lang atributo é padrão em HTML. Ele informa à tecnologia visitante o idioma do site. Um site em inglês, por exemplo, deve ter este elemento raiz:

Quando presente, esse atributo informa aos leitores de tela as regras essenciais de pronúncia.

Chocantes 22,3% das 1 milhão de páginas iniciais em 2022 não tinham essa declaração. A maioria dos usuários nunca notará a omissão. Mas faz muita diferença para quem precisa — com pouco esforço de um desenvolvedor.

Encontrando problemas

ANDI (Inspetor de Nomes e Descrição Acessíveis) é um ferramenta da Administração de Seguridade Social dos EUA que identifica rapidamente a maioria desses problemas.

3 ANDI example

O ANDI funciona como um marcador em seu navegador e requer apenas um clique para ser executado. ANDI mostra formulários rotulados incorretamente, atributos alternativos de imagem ausentes, links e botões vazios e texto de baixo contraste. Outras ferramentas de teste de acessibilidade incluem ACENOa Extensões do navegador Axee Tenon.iopara nomear alguns.

Nenhum dos seis problemas acima são difíceis de resolver. Todos são facilmente detectáveis ​​por testes automatizados de acessibilidade. Então, por que não corrigi-los antes de buscar ajuda especializada?

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

dois × dois =

- Ana Pereira -spot_img

Últimos Artigos