Uma análise da WebAIM (Web Accessibility In Mind) sobre o estado atual da Acessibilidade na Web de 1 milhão de páginas (na grande maioria famosas) revelou resultados devastadores: os sites analisados mostraram em média quase 60 erros cada em relação à problemas de acessibilidade, e a porcentagem de sites com resultados “perfeitos” foi inferior a 3%. Mas havia um lado positivo: a maioria dos erros poderia ser agrupada em apenas algumas categorias. De um total de 59,6 milhões de erros, 52,1 milhões foram causados ​​por apenas cinco problemas fáceis de prevenir:

• 36 milhões foram exemplos de texto com contraste insuficiente .
• 12,3 milhões eram imagens sem um texto alternativo .
• 2 milhões foram insumos sem um rótulo correspondente .
• 1,3 milhão eram links ambíguos ou vazios .
• 0,5 milhão eram títulos não ordenados .

Corrigir esses cinco tipos de problemas resolveria a maioria dos problemas de acessibilidade detectados.

Os 5 passos fáceis

1. Aumentar o contraste da cor do texto

Contraste de texto ruim foi o erro mais comum de acordo com o relatório WebAIM. Em média, as home pages analisadas continham 36 problemas com contraste insuficiente entre texto e seu fundo.

Para mim, este pode ser o requisito mais limitativo (pelo menos em termos de criatividade), pois muitas vezes encontro uma paleta de cores interessante que acabo por descartar porque não cumpre as especificações das WCAG. Uma opção é seguir os critérios de nível AA que são menos restritivos, pois não é possível satisfazer todos os critérios de sucesso de Nível AAA qualquer maneira mesmo.

O WebAIM tem uma ótima ferramenta para verificar o contraste das cores , e você pode encontrar muitas outras ferramentas online. Na verdade, é muito fácil implementar o seu próprio. Requer alguma matemática, mas nada sofisticado, e pode ser uma ótima experiência de aprendizado. Por exemplo, existe um verificador de contrate muito bacana, você pode encontrá-lo aqui. Ele é ótimo para testar cores RGB, já que todos os verificadores online trabalharam apenas com valores HEX.

2. Adicione texto alternativo às imagens

Adicionar texto alternativo (famoso alt) a imagens é um dos principais pilares e princípios básicos da acessibilidade na Web .No entanto, é um dos problemas mais comuns em quase todos os sites, mesmo quando o atributo alt é necessário em imagens.

 <img src="guernica.jpg" alt="Guernica painting by Pablo Picasso" /> 

Embora pareça tão simples quanto adicionar o atributo alt com uma descrição à tag <img> , o texto alternativo pode exigir um pouco de reflexão. Qual é o papel da imagem? Qual é o texto em torno dele? Podemos não querer ignorar a imagem (adicionando um alt="" ), e não queremos que os leitores de tela repitam a mesma informação duas vezes.

alt="Guernica painting by Pablo Picasso" alt="Guernica: a large oil painting by Spanish artist Pablo Picasso completed in June 1937" alt=""

Qualquer um dos alt à direita poderia funcionar para a imagem, O correto dependerá do contexto.

E mais uma coisa a considerar: se a imagem é usada como um CTA , o alt deve ser uma descrição da ação a ser tomada e não da imagem! Os usuários podem querer saber que a imagem é uma impressora, mas o que o usuário realmente querem saber é que, se clicarem nela, o documento será impresso.

3. Elementos label de um formulário

Os labels apresentam muitos benefícios, como: (1) ajudam a identificar e fornecer informações adicionais sobre o campo; (2) quando clicados, eles se concentrarão no elemento do formulário vinculado; e (3) são simples de implementar. Você só precisa envolver o texto com uma tag <label> e usar o atributo for para apontar para o ID do elemento:

 
 <label for="username">Username:</label> 
    <input id="username" type="text" name="user"> 
    
 <label for="password">Password:</label> 
    <input id="password" type="password" name="pass"> 

Às vezes, pode haver situações complicadas nas quais as entradas podem não ter um label específico para cada uma delas (por exemplo, uma tabela com linhas que permitem edição ou um label que deve ser aplicado a vários campos). Nesses casos, você pode usar o atributo aria-labelledby para apontar para o elemento que servirá como um label:

  
<table>
  <thead>
    <tr> 
    <th id="namelabel">Name</th> <th id="addresslabel">Address</th>
    <th id="agelabel">Age</th> 
     </tr>
  </thead>
     <tbody>
      <tr> 
      <td><input aria-labelledby="namelabel" name="name" /></td>
      <td><input aria-labelledby="addresslabel" name="address" /></td>
      <td><input aria-labelledby="agelabel" name="age" /></td>
      </tr> ... 
    </tbody>
</table> 
 

Se você tiver um formulário ou componente que inclua elementos de formulário, como inputs ou radio buttons, não se esqueça de adicionar um label para os diferentes elementos do formulário ou adicionar um atributo aria-labelledby .

4. Adicione significado aos links

Quantas vezes você encontrou um site ou blog com resumos dos posts e links pedindo para “Ler mais”? Embora essa seja uma descrição da ação que o usuário executará, ela realmente não fornece significado real ao link . Vamos ler mais sobre elefantes, programação na web ou cirurgia cerebral? Leia mais sobre o que?

Não faça essas coisas … Consulte Mais informação

Faça essas coisas em vez disso … Leia mais sobre Acessibilidade na Web

Um desses links fornece informações reais sobre o conteúdo vinculado.

Agora, alguns podem dizer: ” Mas ter um link longo e significativo quebra a forma como nosso site é apresentado! Há apenas espaço para uma legenda” Leia mais “! ” E para eles há uma alternativa: use aria-label em seus links:

 <a href="#" aria-label="Read more about Web Accessibility"> Read more </a> 

Os leitores de tela modernos lerão o aria-label vez do texto âncora , para que você possa deixar sua legenda de link curto enquanto fornece um texto significativo e acessível.

5. Organize o conteúdo corretamente

O conteúdo de cada página deve ser estruturado de forma semântica e organizada corretamente , usando os títulos certos de maneira ordenada. Isso pode soar como um acéfalo, mas é um erro muito comum: mais da metade das home pages analisadas apresentaram esse problema.

Os leitores de tela permitem que os usuários pulem de um cabeçalho para outro. Um documento mal organizado se tornará confuso para todos: leitores, leitores de tela e buscadores.

Cabeçallho 1 Cabeçalho 3 Cabeçalho 2 Cabeçalho 4

Cabeçalho 1 Cabeçalho 2 Cabeçalho 3 Cabeçalho 4

Seu documento deve ser organizado como a coluna da direita, nunca como o da esquerda

Além disso, não esqueça de usar as tags semânticas apropriadas; é importante usar títulos ( <h1> , <h2> , etc.) em vez de estilizar outros elementos para parecer um título. Eles podem ser visualmente semelhantes, mas nem todos os usuários confiam em sua visão.

Conclusão

O fato de que 87% dos problemas de Acessibilidade na Web encontrados na análise do WebAIM foram realmente muito pequenos, e isto pode parecer uma ótima notícia, mas precisamos levar esses resultados com um pouco de sal: as páginas analisadas eram apenas home pages, que normalmente não possui componentes complexos (sujeitos a problemas de acessibilidade mais complexos.). Confesso que irei colocar um pouco mais do meu tempo aqui no blog para melhorar estas questões de acessibilidade (pelo menos estas mais simples), pois acredito que estas pequenas mudanças, principalmente no caso das imagens, poderão surtir um efeito muito positivo na vida de todos.

Além disso, alegando que 85% de todos os problemas de acessibilidade podem ser corrigidos com as 5 etapas acima, é um pouco exagerado. (Desculpe pelo título de click bait.) Embora, as chances são de que a porcentagem real não esteja tão longe da realidade (o que tornaria boa a antiga regra 80/20 na computação ).

A principal lição a ser retirada seria que melhorar a Acessibilidade na Web pode ser um desafio, mas não é tão complicado quanto parece, e todas as melhorias, mesmo as mais pequenas, contam.

Fonte original: https://dev.to/alvaromontoro/fix-85-of-your-web-accessibility-issues-in-5-easy-steps-pnf

Fonte WebAIM: https://webaim.org/

Cartilha de acessibilidade na web pela W3C: http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-II.html

Um grande abraço a todos!