Acessibilidade na web não é uma escolha, é um dever nosso

Unfortunately, the power and adaptability of the Web is not always fully utilized

Acessibilidade sempre foi um assunto que alguns Front-end deixam de lado(eu deixava) acham que é questão de “público alvo”, e se esquecem que a Web é para todos, independente de deficiência, e claro, não to falando daqueles sistemas internos que não contratam pessoas com alguma deficiência para usá-lo(uma falta de respeito). Vale lembrar que acessibilidade não é só para deficientes visuais, existe muitos usuários que atuam em contextos diferentes do comum.

Isso deve ser tão preocupante quanto você se preocupa com a organização do seu CSS e JavaScript, ela é um dever de todos em um time; Designers, Programadores, Testers, etc.

O número de idosos acessando a internet mais que dobrou de acordo com o IBGE entre o ano de 2008 e 2013.

Estão deixando o html de lado e focando apenas no CSS e JavaScript!

“Ah, mas é que só algumas divs já resolve meu problema e o que importa é a beleza da coisa e funcionar.”

Porém, você fazendo isso, vai ter diversos problemas de acessibilidade, performance, experiência do usuário, SEO, etc. “O que devo fazer então?”

Você ‘só’ escrevendo um html semântico já vai está fazendo boa parte do trabalho e ajudando diversas pessoas.

Vou compartilhar 10 dicas com vocês, e espero que ajude.

Não remova o outline

Se você usa um reset css que remove o outline, melhor ir atrás de outro. Por favor, não faça mais isso, já passei por momentos onde em um formulário eu preenchia o campo e apertava TAB para sair pulando alguns campos, mas acabou que eu me perdi e não sabia em que campo estava, pois não tinha nenhuma borda indicando. Precisar levar a mão no mouse pra simplesmente ir para outro campo, é ao meu ver uma falha do software, imagine alguém que só navega pelo teclado!? E não é apenas em formulário esse problema, então sempre procure saber como está indicando o foco nos seus elementos, seja títulos, blocos, links, menu, etc. Navegação via teclado é necessário para muitos usuários sim! Então quando for fazer o :hover, faça o :focus também.

Alt e title nas imagens

O alt ou texto alternativo é um atributo adicionado na tag image, e será mostrado quando houver algum problema na imagem e não carregar.

O title também é um atributo que você coloca, e é usado para dá um titulo na imagem, e o legal é que ele mostrará em um popup ao descansar o mouse na imagem.

Ambos são ótimos para acessibilidade e devem ser utilizados, pois um deficiente visual por exemplo usa um leitor de tela, e quando chegar na imagem, ele interpretará.

Esse já um bom motivo para você sempre usar, mas não só isso, como também é ótimo para ferramentas de busca como Google, que vai saber do que se trata a imagem e indexar para que se possa ser usado as informações da imagem, assim possibilitando novas formas de acesso ao seu conteúdo. O texto declarado no alt, também é usado na parte de detalhes. DETALHES!??

Imagem com o atributo alt.
Resultado de pesquisa do Google com o texto do alt em detalhes da imagem.

Quando você pesquisa por imagens no Google e você clica na imagem, o google utiliza o texto do alt para maiores detalhes, e quando não declarado, ele utiliza o texto que vem antes da imagem.

Então, na próxima vez que publicar uma imagem, pense bem em como descrever, ela pode ser a única forma de encontrar essa imagem por uma ferramenta de busca.

Use o atributo title em links

Pense nesse atributo como uma breve descrição pra onde esse link levará o usuário quando clicar. Porém, isso não ajudará se for o mesmo conteúdo da tag, e isso só será um conteúdo redundante para usuários de leitor de tela.

Só cuidado para não criar vários titles com valores parecidos, pois usuários que usam leitores de tela como o JAWS, dependem dos títulos para encontrar um determinado link, e se ele reunir links em ordem alfabética e eles iniciam com o mesmo texto por exemplo, vai ser mais difícil para usar as funções de pesquisas que tem nos leitores de tela.

Sempre declare a linguagem do documento

Sei que parece ser bobo, mas tem desenvolvedores que não sabe a importancia de colocar isso no documento. É útil demais para que o leitor de tela por exemplo, saiba qual voz colocar e definir o sotaque a ser lido, ninguém iria querer colocar pt-br em um documento em inglês né!? Já pensou ler palavras como “My House” em “mi ouse”?

Crie atalhos para navegações rápidas

Você pode criar interações rápidas com seu elemento HTML, como links e possibilitar em uma navegação rápida.

Para acessar, na maioria dos browsers do windows e linux é alt + tecla-de-acesso e no mac é ctrl + option + tecla-de-acesso.

Informe que o campo é obrigatório

Muitas vezes em um formulário você precisa informar que um campo seja obrigatório o preenchimento, e existe algumas maneiras de fazer isso, que é usando a palavra “Obrigatório”, colocando uma imagem no lado do campo e colocando o atributo alt informando que esse conteúdo é obrigatório ou o mais comum, usar o famoso asterisk “*”.

O HTML5 prover outras formas de fazer isso, porém alguns browsers e leitores de tela não dão esse suporte.

Com isso o leitor de tela vai saber comunicar que o campo é obrigatório, mas nem todos os browsers ou leitores dão suporte ao HTML5. O NVDA 2012.3 por exemplo, indentifica no firefox 19 quando que o campo é obrigatório, mas não com o IE9, e cai entre nós, alguém confia em pessoas que usam IE?

Não só o HTML5, como também tem como informar usando a ARIA, que é uma especificação que nos fornece algumas funções e propriedades que definem elementos de uma interface acessível e pode ser usada pra melhorar a acessibilidade e interoperabilidade de conteúdos na Web.

E por variar muito o suporte entre eles, é comum usar os dois.

Sobre mais detalhes desse suporte, tem um artigo muito bom do John Foliot chamado: Accessible HTML5 Forms — Required Inputs

Crie um link para pular a navegação

Imagine para quem precisa navegar pelo site via teclado e ter que chegar em alguma coisa apertando TAB, e você tem um menu logo no início com muitos links, vai ser bem ruim para a experiência de um usuário assim, não!? Crie um link logo no início, que pule logo para o conteúdo e esconda com o css. Como exemplo prático, olhe no site da DigitalGov.

Crie frases significativos em links

É importante criar descrevendo do que se trata o link. Por exemplo:

Coloque labels nos elementos

Assim, quem estiver usando um leitor de tela, vai saber do que se trata aquele input. E se não quero colocar uma label?

Não apenas para inputs, mas também ajudará em botões.

<button aria-label="Fechar" onclick="myDialog.close()">X</button>

Pare de compatilhar imagens com textos

Já presenciei diversas landing pages que costumam colocar imagens de textos, e isso apesar de não ser acessível, traz prejuízos.

  1. As imagens vão deixar seu site mais pesado, e para quem acessar em uma internet 3G, é um terror.
  2. Dificuldade na edição de textos.
  3. Corre risco da imagem não ser carregada.
  4. O texto não será traduzido.
  5. O texto não é selecionável.
  6. Deve ter muitos outros, compartilha com a gente, e comente :)

Conclusão

Você não precisa se preocupar em ser 100% acessível, até porque isso é impossível, existe muitos fatores e parâmetros que podem influenciar.

Deixe seu html semântico e já vai está fazendo boa parte. Depois faça um teste e desabilite todo seu css e javascript, e pergunte a si-próprio se a página ainda está fazendo todo sentido.

Sei que existe diversas outras práticas, algumas mais comuns e outras mais desconhecidas. Então fique a vontade em deixar nos comentários suas dicas.

Like what you read? Give Victor Igor a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.