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.
Referências
Apesar do número de ferramentas que auxiliam no desenvolvimento de páginas acessíveis para pessoas com deficiência auditivas e visuais, percebo que é um assunto com pouco alcance, considerando sua relevância. Penso ainda que é preciso trazer ao debate as limitações e formas de inclusão digital de pessoas com transtorno do espectro autista, cujo número aumenta a cada dia, porém ainda são "invisíveis" aos olhos da sociedade. Fico feliz em ver esse tipo de discussão aqui.
Muito massa, realmente com o passar do tempo acessibilidade está ganhando força mas muitos ainda infelizmente a ignoram!
Muito interessante. São inserções tão pequenas no código mas fazem toda a diferença para deficientes. Parabéns pela iniciativa em compartilhar esse conteúdos!
Ótimo post Auri :clap:, realmente acessibilidade muitas vezes é posta de lado em preferência da agilidade de entrega de uma aplicação, o que é errado. Muitas das práticas que você exemplificou podem ser anexados a nossa forma de codar diariamente, só basta ter a atenção e disposição!
importantíssimo esse conteúdo, principalmente para quem tá iniciando a entender como funciona um site bem acessivo.
Li recentemente em um artigo que há um movimento para que deixemos de utilizar o placeholder. Uma vez que os leitores que necessitam de alto contraste ativado para conseguir visualizar, ao verem um campo com o placeholder, isto lhes passa a impressão que é um campo já preenchido. Além disso, tradutores do browser normalmente tendem a ignorar os placeholders, assim como programas de acessibilidade podem não fazer distinção, e apresentarem aquele dado para as pessoas sem visão, como algo que está escrito na tela (como se fosse um input já preenchido). Uma solução seria mover o placeholder para que fique entre o label e o input. O artigo contempla muito mais detalhes, e o link estará no final do comentário.
Outro detalhe para nos atentarmos se mostra com relação ao texto justificado. Formatos de texto como os de revistas, dos quais apresentam várias colunas de texto justificado, por colocarem espaços 'artificais' no meio do texto para que as linhas fiquem alinhadas tanto à esquerda quanto à direita, pode causar certo desconforto para pessoas disléxicas. Esses espaços de tamanhos diferentes passam a ser vistos como espaços no meio de palavras, dificultando a leitura do texto.
link do artigo sobre placeholders (em inglês) : https://www.smashingmagazine.com/2018/06/placeholder-attribute/
Muito bom, não conhecia as questões de acessibilidade. Espero que na Tabnews tenha uma forma de favoritar postagens afim de consultas posteriores.