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.
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.
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:
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:
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
:
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
, h5
e 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 h1
seguindo para o h2
e 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.
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".
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