Pequenas atitudes no desenvolvimento front-end para grandes benefícios na acessibilidade

A acessibilidade Web ou a11y tem como objetivo tornar possível o uso de websites, ferramentas e tecnologias para pessoas com deficiência.

Photo by rawpixel.com from Pexels

Já diz o ditado que pequenos gestos fazem grandes diferenças, principalmente quando se fala sobre acessibilidade web. Afinal, quando criamos um site, queremos que ele seja acessado pelo maior número de pessoas, certo? Para que isso aconteça, precisamos que ele seja acessível para todos.

O que nós, desenvolvedores, podemos fazer para contribuir?

Experimentar e entender um leitor de tela

Um dos grandes desafios que encontramos, não apenas no desenvolvimento, mas na vida em geral, é a capacidade de ter empatia.

Ao utilizar um site por meio de um leitor de tela nós podemos entender melhor o mundo das pessoas que utilizam este recurso e realizar testes de nossas aplicações.

O leitor NVDA (NonVisual Desktop Access) é um leitor de tela open source, gratuito, muito utilizado, para plataformas Windows. Este guia do NVDA auxilia a utilizar o software.

Para Mac, pressione command +f5 para ativar o leitor de tela (Voice Over) e utilize "mais informações" para aprender e entender um pouco como funciona e, assim, navegar páginas Web.

No caso do Linux, temos o software Orca open source e gratuito que possui todas as funções dos demais leitores.

Pode ser um pouco desafiador utilizar um leitor de tela pela primeira vez, então um ótimo começo é validar a navegação das telas com o teclado.

Conhecer e utilizar as tags semânticas

Semântica está relacionada com a forma como criamos e organizamos o HTML, quais as tags que utilizamos e qual sua hierarquia.

Precisamos ter cuidado com o uso excessivo das tags div e span. Para os leitores de tela, elas não identificam muita coisa. Procure utilizar elementos que falem por si, como, por exemplo article , p, nav, table, button, entre outras. Vale a pena a leitura da documentação do W3C sobre semântica, para redescobrir o universo das tags.

É extremamente importante sempre utilizar label informativo nos campos de input. Utilizar placeholder com essa finalidade não é o ideal, pois o placeholder não é reconhecido pelo leitor de tela.

Um site com boa semântica fica com o código muito organizado e bonito, melhora a indexação no Google e, também, facilita a leitura e manutenção desses códigos pelos desenvolvedores.

Exemplo de uma página com muitas divs onde falta semântica.

Exemplo de uma página rica em semântica que utiliza tags mais específicas.

Utilizar o plano B: Aria

Quando não temos informação de acessibilidade suficiente na tag, podemos utilizar os atributos do tipo aria.

Este atributo cria uma espécie de informação invisível na tela, mas que permite que os leitores de tela falem o texto que está no atributo, assim especificando o que a tag representa, por exemplo:

Exemplo de código com aria-label para um botão que fecha uma notificação.

Existem diversas possibilidades com este atributo. Nesta documentação da Mozilla sobre Aria e no conteúdo sobre Aria da W3C, é possível entender mais sobre todos os atributos tipo aria que podemos utilizar.

Adicionar o atributo alt nas imagens

O texto do atributo alt representa um texto alternativo que vai aparecer, caso a imagem não possa ser visualizada pelo usuário, seja por conta de uma conexão lenta, erro no src da imagem ou ao utilizar um leitor de tela.

O ideal é colocar uma descrição informativa que permita ao usuário entender o contexto da imagem:

Exemplo de código do GitHub de imagem com alt descritivo.

Caso a imagem seja apenas estética e não precise aparecer para o leitor de tela, utilize o texto em branco no atributo alt:

Exemplo de código do GitHub de imagem com alt vazio.

Assim, os leitores de tela ignoram este conteúdo, ao invés de tentar transmitir informações como o nome do arquivo ou algo semelhante, ou seja, o comportamento do alt vazio é diferente de quando não existe alt.

Criar uma estrutura de tópicos

O HTML Outline é uma estrutura de seções criada pelo uso correto das tags de título h1, h2, h3, h4, h5e h6.

A separação criada com estas seções cria uma estrutura de tópicos muito interessante para leitores de tela.

O ideal é sempre utilizar as tags em cascata, cuidando com a indentação. Por exemplo, comece do h1seguindo para o h2e assim por diante. Mais detalhes na documentação da Mozilla sobre outline.

É importantíssimo utilizar apenas uma tag h1 por página, pois para o leitor de tela só existe um título principal na página.

Exemplo de outline no HTML

Links informativos

Ao utilizar tags do tipo a , precisamos evitar links pouco explicativos e muito diretos.

Por exemplo o texto: "Download". Nesse caso, o leitor de tela vai ler algo do tipo "Link: Download" e o usuário não sabe para onde será redirecionado. Nesse exemplo, poderíamos escrever a informação "Download do Node.js".

Exemplo de uma tag anchor com texto informativo.

Seguir boas práticas de modelos

Existem alguns exemplos de como criar componentes acessíveis no site da W3C, por exemplo este tutorial de boas práticas para criação de menu.

A partir de pesquisas nos sites citados neste artigo, que tem material sobre acessibilidade, é possível ganhar conhecimento sobre o assunto, procurar exemplos e desenvolver voltado para acessibilidade de forma eficiente.

Conclusão

Apesar dessas pequenas atitudes ajudarem muito na acessibilidade, este é um caminho que envolve ainda muita pesquisa sobre usabilidade e disseminação da cultura de acessibilidade.

Quando ampliamos nossa visão e começamos a desenvolver pensando em criar sistemas acessíveis para todas as pessoas, conseguimos aplicar essas atitudes em nosso dia a dia, nos tornando melhores pessoas e desenvolvedores.

Espero que estas sejam informações que ajudem no desenvolvimento front end com acessibilidade. Obrigada pela sua leitura!

Leitura recomendada: Desmistificando a acessibilidade Web — O início