Boas práticas para acessibilidade na web

Publicado por Lívia Amorim no dia design, dev

Acessibilidade consiste em possibilitar acesso às pessoas: seja para entrar num estabelecimento físico, num software ou acessar uma informação em determinado site. A utilização desse conceito na web pode ser complexo pois abre discussões sobre responsividade e design adaptativo – afinal, quem usa um celular também precisa acessar determinado conteúdo. O foco deste post, porém, é mostrar os níveis de acessibilidade na web e colaborar com formas práticas de tornar uma aplicação mais acessível. São exemplos básicos e de baixo custo que devem ser considerados antes mesmo do design responsivo.

A acessibilidade na web pode ser vista em três níveis: visual, de navegação e de leitura. É um processo cognitivo simples para assimilar uma informação como, por exemplo, o conteúdo de uma página HTML. Na Resultados Digitais, estabelecemos algumas soluções em semântica como padrão para o nosso código, o que facilitou a exigência desses padrões na revisão de um pull request (alteração no software). Usar esses patterns é uma forma de trazer a conscientização do time de desenvolvimento sobre o tema.

Visual

Soluções visuais são as mais discutidas em acessibilidade. Pensamos nelas sempre que alteramos uma tela para facilitar o entendimento de uma informação. Quando um designer altera a cor ou aumenta a fonte de um texto para facilitar a leitura ele está pensando em deixar essa informação acessível. É importante, contudo, lembrar que a solução visual, por si só, não gera grande ganho para a experiência do usuário. Por isso fazer parte de processo comum de design, daremos destaque aos dois próximos níveis.

Navegação

Você já tentou navegar por um formulário sem usar o mouse? Um usuário cego, por exemplo, usa a tecla tab para passar de um elemento HTML para outro. O caminho percorrido pelo usuário depende da estrutura do seu HTML e pode ser alterado com atributos inclusos no elemento. Para tornar seu HTML mais acessível, algumas soluções são:

  • Usar autofocus no primeiro input de uma página de formulário. Isso descarta o uso do mouse para seleção do elemento.
1
<input type="text" autofocus />
  • Usar tabindex nos elementos, traçando o melhor caminho pela página, independente da ordem em que eles aparecem na estrutura do HTML.
1
2
3
<a href="http://www.resultadosdigitais.com.br/" tabindex="2">Resultados Digitais</a>
<a href="http://www.rdstation.com.br/" tabindex="1">RD Station</a>
<a href="http://www.raioxdomarketing.com.br/" tabindex="3">Raio X do Marketing</a>
  • Usar accesskey nos elementos para criar atalhos de navegação.
1
2
<a href="#" accesskey="s">Sim</a>
<a href="#" accesskey="n">Não</a>

Leitura

Entendemos por leitura o entendimento integral da informação passada - o que depende de uma boa solução visual e de uma boa navegação. Para facilitar a leitura dos usuários usa-se:

  • Marcação de elementos com lang. Alguns usuários utilizam softwares de leitura de tela para navegar pela web e é o atributo lang que mostra para o software qual idioma deve ser interpretado.
1
2
3
4
5
6
7
<html lang="pt-BR">
  <ul>
    <li>Capivaras são legais</li>
    <li lang="it">Capibara sono legali</li>
    <li lang="fr">Capybaras sont légales</li>
  </ul>
</html>
  • Inputs com type bem definido. Além de ajudar na validação via HTML5, o usuário que estiver acessando a página via celular terá um teclado adequado ao input. Por exemplo, terá um teclado numérico ao preencher o input abaixo:
1
<input type="number" name="age" />
  • Imagens com alt relevante. Pense que nem todo usuário estará olhando para a imagem. capivara comendo milho
1
<img src="/images/posts/capybara.jpg" alt="capivara comendo milho" />
  • Links com title principalmente quando for uma URL externa. Usuários com leitor de tela precisam saber para qual caminho estão sendo levados.
1
<a href="http://rdstation.com.br" title="RD Station">software de marketing digital</a>
  • Elementos com o atributo role. O WAI-ARIA, especificação criada pela W3C para acessibilidade na web, prevê dar mais semântica e metadados ao HTML.
1
2
3
<article role="article">
  <p>Olá!</p>
</article>

Conclusão

Quando pensamos em acessibilidade, logo vem em mente um ambiente altruísta que se preocupa em dar acesso a pessoas com deficiência. Na verdade, o significado é dar acesso a todos. Sabemos que pensar em acessibilidade para pessoas com deficiência é mais difícil, mas isto porque idealizamos um ser humano ideal, um usuário perfeito.

Nosso usuário pode ser cego, ter baixa visão ou defiência motora. Na Resultados Digitais pensamos nisso de maneira múltipla e já deixamos de usar certas soluções visuais por pensar na possibilidade de um usuário daltônico, por exemplo.

Ao trabalhar com boas práticas para acessibilidade percebemos que tratar a semântica do HTML já é um grande passo para alcançar um site acessível com acessibilidade mantenível. Porém, ainda é necessário pensar em todas as variáveis possíveis de acesso à informação. Faz parte do nosso trabalho levar informação às pessoas e, por essa razão, pensar em sistemas acessíveis é uma atividade de extrema relevância e deve ser levada em consideração durante todo o processo de desenvolvimento.

Lívia Amorim

Lívia Amorim

UI/UX Designer

Comentários