Introdução

Antes de mais nada, se você ainda não leu a parte 1 deste tema, recomendo que leia-o, basta clicar aqui.

A ideia de uma continuação veio a partir do Episódio 3 do reality Show me the code, feito pela Rocketseat. Onde no terceiro episódio o foco era aumentar e melhorar a acessibilidade do site em questão.

Então, com isso, separei mais alguns pontos do que fazer e como testar a acessibilidade.

TabIndex

O tabIndex nada mais é do que uma propriedade que inserimos em elementos da tela para definir uma ordem de navegação pelo teclado.

Como neste exemplo retirado do MDN:

<p>Clique em qualquer lugar deste painel, então tente navegar pelos elementos utilizando tab</p>

<label>O primeiro na ordem do tab<input type="text"></label>

<div tabindex="0">Pode ser acessado via tab por conta do tabindex</div>

<div>Não "tabeável" por não possuir tabindex</div>

<label>Terceiro na ordem do tab<input type="text"></label>

O resultado, assim como mais explicações pode ser acessado na documentação do MDN.

Contrastes de cor

Muitas pessoas tem dificuldades de percepção de cor, assim como o alto contraste pode dificultar/machucar a visão. Um exemplo bem básico disso é colocar um amarelo #f5ff6f nos textos enquanto o fundo está branco, por exemplo. Você terá de fazer um esforço enorme para conseguir ler o texto. E isso pode vir e virá a incomodar bastante sua visão com o tempo. Para isso existe a WCAG, que trás diretrizes que podemos seguir, a fim de obtermos uma boa acessibilidade!

Existem sites que te ajudam a validar se o background e a cor do texto possuem um nível de contraste bom, como o Color A11y. O ideal seria conseguir o máximo de aprovação neste teste, para garantir que todos consigam ler da melhor forma.

O próprio DevTools ajuda com isso, como no exemplo a seguir:

Conclusão

Então é isso, conseguimos dar uma passada bem rápida e legal sobre o tema, e se o post te ajudou de alguma forma compartilhe e comente se já sabia de alguma dessas informações e quem sabe eu faça mais alguns posts sobre acessibilidade. Podemos até aprofundar em algum dos temas citados neste post!

Obrigado por ler!