Pequenos passos para deixar seu site mais acessível
Contexto
Salve galera, vamos falar hoje um pouco sobre acessibilidade.
Todos sabemos que a internet deve ser construída para todos, porem na pratica nem sempre priorizamos assuntos como acessibilidade, é comum desenvolvermos um site e depois utilizar uma ferramenta como lighthouse para ver nota, mas será que aquele 100 em acessibilidade realmente é real?
Bom a grande maioria dos sites na web não tem nem um alt descritivo nas imagens no próprio html.
O Tópico de hoje não é para apontar o dedo dizendo o que fazemos ou não, ou quem é culpado ou não, e sim um pauta que devíamos discutir mais para deixar o tema mais recorrente.
Let’s bora 🚀
Pequenos passos
Semântica
Uma maneira bem legal de começar a falar sobre como deixar o meu site mais acessível é pelo html, um html semântico com tags que fazem sentido e tem um escopo declarativo vai ajudar ferramentas como NVDA (leito de tela) a navegar melhor no site.
Ruim
<body>
<div>
{conteudo}
</div>
<div>
{conteudo}
</div>
<div>
{conteudo}
</div>
</body>
Bom
<body>
<header>
{conteudo}
</header>
<main>
{conteudo}
</main>
<footer>
{conteudo}
</footer>
</body>
Alt nas imagens
Outro ponto é adicionar o alt em imagens para facilitar o entendimento de pessoas com problemas visuais.
<img src="logo.png" alt="Logo da empresa, uma maçã prateada com um mordida na parte direita"/>
Acho que mesmo sem ver o logo você ja deve ter sacado de que marca estamos falando.
Aria-label
O aria-label é um atributo utilizado em tags html onde podemos passar um texto que será lid como descrição pelo leitor de tela exemplo
<button aria-label="Fechar" onclick="myDialog.close()">X</button>
Nesse caso o leitor lê o botão como "fechar" e não como "botão x".
Ferramentas
LowVision
Existe um site chamado lowVision que permite testarmos como pessoas com problemas de visão (cataratas, daltonismo, etc.) enxergam nosso site, vale a pena dar uma olhada.
Sobre o NVDA
Outra ferramenta é o NVDA (Non Visual Desktop Access) é um leitor de tela gratuito e open-source, muitas pessoas optam por ele por ser de fácil acesso.
Uma característica top dessa ferramenta é a portabilidade, podemos baixar e leva-la em um pendrive ou na nuvem para onde quisermos, sem a necessidade de instalar.
Guia WCAG
O WCAG é um conjunto de regras utilizados para referências de como podemos aplicar acessibilidade nos sites, é um documento bem extenso que na maioria das vezes serve mais como consulta do que como um guia para seguir.
Por exemplo estou com duvida de como utilizar audio de uma maneira mais acessível para pessoas com problemas de audição.
Então eu vou na barra de pesquisa e busco sobre audio:
E o resultado é alguns cards relacionados a pesquisa:
Se olharmos para o primeiro card ele diz sobre colocar uma audiodescrição em texto, faz sentido se pensarmos no caso das imagens adicionamos alts para pessoas com problema de visão então podemos colocar uma audiodescrição para quem tem problemas de audição.
Conclusão
Bom esses foram alguns tópicos que tive estudando sobre acessibilidade, o tema e bem extenso e vai muito alem do que essas ferramentas podem fazer, mas se conseguir seguir esses pequenos passos ja conseguimos garantir uma web melhor para todos.