Executando verificação de segurança...
9

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.

http://lowvision.support/

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:

wcag

E o resultado é alguns cards relacionados a pesquisa:

resultado

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

NV Access
lowvision.support
Guia WCAG

Carregando publicação patrocinada...
2
2

essa ferramenta do google Chrome lighthouse é muito boa, é difícil de indentificar algumas coisas que ela faz isso pra ti de forma automática...

1

Ótimas dicas, algumas delas são as mesmas que o Lighthouse me apresentou, recomendo o uso, pude ter uma visão diferente da construção das minhas páginas, como sou iniciante é interessante poder ver seus próprios erros e corrigir.

1
1

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.

1
1

Boa, parabéns pelo conteúdo!

Eu sou defensor da ideia de que a acessibilidade deveria ser um requisito essencial e mínimo para todo website.

1

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!

1

Post maravilhoso com dicas muito boas para a acessibilidade.

Aos poucos ele poderia ser incrementado com outras dicas e assim criar-se um material bastante rico e sólido sobre o assunto.

1

Ótimo post Auri 👏, 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!

1
1
1

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/

0