5 dicas para melhorar a acessibilidade em sua interface

Será que acessibilidade é algo tão complicado que vale a pena eu abrir mão de 25% dos meus usuários? Acessibilidade normalmente é um tema que não é muito abordado por aí, seja por falta de informação ou de interesse. Confira cinco dicas para melhorar a acessibilidade do seu projeto.

Tanto no curso de UX, quanto nos cursos de Front-end da Caelum sempre levantamos pontos conceituais e técnicos deste tema tão importante. Muitos alunos vão para o curso de UX querendo melhorar a usabilidade do site de sua empresa, mas usabilidade está totalmente amarrada à acessibilidade:

E por favor, não me venha com essa de “não é meu público-alvo” ou “não temos tempo”. Saiba que além de ser lei, cerca de 1/4 da população brasileira tem algum tipo de deficiência. Olá querido amigo-leitor com miopia!

Fala com a minha mão

Não é meu público-alvo blá blá blá….

Agora vamos te ajudar a deixar sua interface mais acessível com algumas dicas/macetes.

1 – Não depender da cor para passar informação

Você é o mais novo desenvolvedor em uma empresa de gestão horizontal. Aí chega na hora de ver a prioridade de cada tarefa no Trello pelas etiquetas e você se depara com isso:

Etiquetas do Trello simulando daltonismo

 

Entre elas temos categorias como “feito”, “melhorias” e “bug que pode custar seu emprego”. Qual você atacaria primeiro? A vermelha claro… Percebeu como é perigoso depender da cor para passar alguma informação?

O que poderia ser feito é colocar uma legenda ou mesmo uma textura para diferenciar as etiquetas entre si, tarefa que o pessoal do Trello fez com louvor:

Trello labels with texture

Pra fazer um teste de como ficaria aos olhos de um daltônico, normalmente vou no Photoshop e em “View > Proof Setup > Color Blindness”. Mas existem várias extensões para o Chrome que ajudam nisso também.

Outro exemplo disso é quando dá erro em algum formulário e só a borda do campo fica vermelha para indicar o erro. Você pode ajudar o usuário com um apoio visual (um ícone) ou um apoio textual:

Input with and without error message

2 – Não tirarás o zoom do usuário

Eu uso óculos. Além de deixar o iOS com textos em negrito e aumentar a fonte do sistema como um todo, eu constantemente preciso dar zoom em sites. Aí por algum motivo divino alguém achou que era uma boa ideia travar o zoom para eu não enxergar o conteúdo do site. Afinal, tem que ficar bonitinho

Zoom dont allowed

Toda vez que você bloqueia o zoom no seu site ou app, um filhote de panda escorrega e cai no cimento. Apesar de ser fácil travar o zoom, ferir essa liberdade só se justificaria se a experiência de usuário fosse bastante prejudicada por conta disso. Entretanto, recomendo que tenha mais empatia e repense essa UX.

3 – Imagens de conteúdo precisam do atributo ALT

Você entra no seu e-commerce preferido para ver se tem promoção de roupa e aparece isso logo na home:

Promotion 20% off banner example

Bacana! 20% de desconto é um baita desconto! Agora olha como fica para o leitor de tela de uma pessoa cega:

Example banner without alt attribute

Não tão bacana agora, ele vai ler apenas “Imagem…”, como que o software vai saber do que se trata a imagem?! Como que o usuário cego vai saber que está rolando uma promoção? Hoje, infelizmente, os softwares leitores de tela ainda não conseguem ler o conteúdo de uma imagem sem um apoio textual, o atributo alt.  Veja como não é nada complicado colocar o alt em uma imagem no HTML:

<img src="imagens/destaque-home.png" alt="Promoção: Sunny Days 20% off">

Alguns pontos interessantes sobre o alt:

  • você colocou o texto “imagem de um robô” no alt de uma imagem, o leitor de tela lerá “Imagem: imagem de um robô”. Redundante? Com certeza! Evite;
  • se não há nada para ser colocado em algum alt, repense a função da imagem, se ela for decorativa coloque-a via CSS com técnicas de image replacement. Se não puder tirar, deixe o alt vazio;
  • além de melhorar a acessibilidade, você melhorará a experiência de uso para conexões mais lentas e também sua posição no Google;
  • o Facebook tem uma AI monstruosa que está gerando alt automático. Dê um “Inspect element” em algumas fotos suas ou olha esse print aqui. Ainda um pouco aberto demais, mas estamos evoluindo bem;
  • Recomendo fortemente investir meia hora do seu tempo e ver esta talk do Reinaldo Ferraz sobre o alt.

 

4 – HTML semântico com sabedoria

Essa pode levar meses para você dominar, mas preocupe-se em quando estiver marcando o conteúdo do seu site em marcá-lo corretamente.

Se um texto tem função de subtítulo, por que marcá-lo com um <p> se existe um elemento específico para isso, no caso, o <h2>? Isso é ruim tanto para acessibilidade quanto para SEO.

Além disso, há alguns leitores de tela que possuem atalhos para escaneamento rápido dos títulos da página, que tal ajudar nisso?

Outros pontos rápidos?

  • se for pra navegação, use o <a>, se for interação ou em formulários use o <button>;
  • campos de texto sempre atrelados a algum rótulo (<label>) sobre o que é aquele campo;
  • se precisa de um container e não sabe direito qual elemento do HTML5 usar, melhor ser genérico com <div> do que marcar erroneamente;
  • quer passar a ideia que um texto é importante, use o elemento <strong>, o <b> seria visual, e visual é CSS;
  • use o atributo lang correspondente ao idioma da página, e até de trechos que sejam diferentes do da página;
  • o leitor de tela não diferencia atualmente <h1> de <main> e <h1> de <footer>, mantenha a regra antiga limitando-se a um por página;
  • placeholder não substitui <label> e isso é regra.

 

5 – Menu muito grande? Link para pular para o conteúdo

Você resolveu ir a um show e acabou quebrando os braços (não me pergunte como) enquanto pulava loucamente ao som de Night Train. Ortopedista disse que em duas semanas você poderá tirar o gesso, e enquanto isso só conseguirá usar o computador com um dedo… Vai ter que se virar usando só a tecla TAB.

Aí você entra em algum e-commerce e tem que passar por quinhentos itens no menu de navegação até chegar no produto que você quer. Nada legal… Solução? Um link escondido para pular para o conteúdo principal! Algo como o WordPress faz:

Jump to main content in WordPress

Como que esse atalho surge? No primeiro TAB que o usuário der! Simples e facilita bastante a vida de quem depende do teclado para navegação, como no exemplo que dei acima (deficiência temporária) ou algum tipo de deficiência permanente ou situacional.

E claro, dê uma tratada com carinho na ordem dos tabs com a ajuda do atributo tabindex.

 

Implementei tudo isso já, e agora?

Legal, Natan. Implementei essa lista e várias outras coisas mas como saber se está ok?“.

Quando você troca uma lâmpada como você sabe se funcionou? Você testa!
Várias coisas bacanas que você pode fazer para testar:

  • desligar o monitor e tentar navegar usando um leitor de tela como o NVDA;
  • tentar navegar apenas via teclado;
  • tirar o óculos para ver se os tamanho das fontes estão decentes;
  • usar alguma extensão como o Spectrum que simula a visão daltônica;
  • lista com validadores automáticos de acessibilidade;
  • contratar deficientes visuais para fazer testes de usabilidade.

A melhor maneira de verificar se o seu site é acessível é testando!

 

Quem seguir e onde pegar mais informações

Como a acessibilidade é tratada, ou não tratada, na sua empresa hoje?
Quais os desafios e desculpas que aparecem no dia-a-dia?

Ah, e o que você pensa sobre um curso na Alura que mostre alguns desses conceitos na prática?
Conta aí nos comentários!

 

6 Comentários

  1. João Victor Martins 06/11/2017 at 17:29 #

    Natan, muito bacana o post. O que eu acho complicado no front-end é justamente agradar a todos os usuários. As vezes é muito pessoal e sua página será julgada de diferentes formas. Hoje eu tento entregar uma página mais funcional do que uma página mais “bonita”. O que você pensa sobre isso? O que seria o mais próximo da acessibilidade citada no post? Eu tentar entregar uma página mais simples, poderia atrapalhar a acessibilidade daquele site / sistema?

  2. Natan Souza 07/11/2017 at 10:31 #

    Oi Joao, obrigado pelo comentário! É complexo sim! O lado pessoal acaba muitas vezes atrapalhando muito quando estamos projetando, uma vez que colocamos nossa opinião do que é bom ou não é bom acima do que seria bom para nosso usuário.

    Vejo a funcionalidade como algo base, porém uma usabilidade decente e uma interface amigável impacta diretamente na percepção do usuário no seu produto. Usabilidade é facilidade de uso, se sua interface não está fácil de se usar, ela não está acessível. Pensando no usuário que depende do uso do teclado para navegação, como seu site se comporta somente pelo teclado?

    Sou a favor do “menos é mais”. Fazer simples pode ser fácil, mas simples e eficiente é mais complicado, e acredito que esse deve ser o foco quando estamos projetando nossas interfaces.

    Abcs!

  3. Leandro 07/11/2017 at 21:15 #

    É trabalhoso legal algo pronto e melhorar a acessibilidade. Mas se cuidarmos disso a cada elemento que adicionamos, fica mais fácil.
    E existem muitas pessoas que devem sorrir ao usar um sistema acessível. Eu, por exemplo, adoro poder navegar pelo teclado e me sinto muito melhor dando zoom em tudo, tenho uma dificuldade enorme pra acha e coisas em menus, mesmo em ordem alfabética parece que as palavras se misturam. Até para achar aquelas letras de senha em caixa eletrônico eu demoro.

    A acessibilidade tem que vir antes de qualquer coisa.

  4. Cirleno 16/11/2017 at 11:44 #

    Parabéns Natan pelo post e obrigado pelo conhecimento compartilhado. Abç

  5. juliano césar ribeiro 29/11/2017 at 14:15 #

    Prezado, ótimo artigo, bem sucinto e colaborativo! Sou deficiente visual, e trabalho com testes de acessibilidade, e gostaria de acrescentar mais alguns itens, os quais julgo importantes para que um site seja acessível, seguindo os padrões do E-mag(Cartilha de Governo Eletrônico, em sua versão 3.0): 1) No caso de uma grande quantidade de menus, ou links, deve ser implementado o atributo accesskey para que o usuário, possa acessar via tecla de atalho os menus da página, facilitando a navegabilidade, sem necessitarde utilizar com muita frequencia apenas o tab. 2) No que se referem a imagens, já enfrentei a seguinte situação: Uma imagem que está atrelada a um botão (imagebutton), não possuir o alt, ou por exemplo, um botão de formulário do tipo “submit”, não possuir o atributo value correspondente, estando apenas vazio. Neste caso, o leitor de telas não identifica o botão. 3) No que se refere aos cabeçalhos(<h1), devem ser ordenados de forma correta, conforme citado no artigo. 4) Uma outra forma de verificar se o site está acessível é a seguinte: desativar o css, para verificar se o site e´ acessível. desativar o javascript, para verificar se é possível efetuar as mesmas ações(para isto, deve ser inserido o ). Por que, devo colocar isso? Pela seguinte razão: Nós, cegos, utilizamos um sistema chamado “dosvox”, que possui um navegador chamado webvox”, que não suporta javascript. Então, para alguns deficientes visuais, que não utilizam leitores de tela como o nvda e o Jaws para Windows(Leitores de tela que utilizam browsers usuais), terão dificuldade para acessar alguns sistemas. 6) tabelas: Deve ser identificada a finalidade da tabela, “atributo summary ou caption”. Isto porque, quem usa leitor de telas,deve saber para que finalidade deve ser usada a tabela, por exemplo, se for uma tabela de dados, como “tabela de frutas”. Bem, espero ter ajudado com meu comentário. At, Juliano, consultor em acessibilidade, deficiente visual.
    Caso necessitem de algum serviço de prestação na área de testes de acessibilidade em algum sistema, segue abaixo e-mail para contato:
    julianotrovao2gmail.com

    Já atuei nos seguintes projetos:
    CJF – Conselho Da Justiça Federal como testador pela Cast Informática S.A.
    IInep – Teste de Acessibilidade no sistema do Enem(Exame Nacional do Enscino Médio).
    PMSP – Prefeitura Municipal de São Paulo.
    AJG – Assistência Jurídica Gratuita, pela empresa Cast Informática.
    Watzap: 61985290804.

  6. Natan Souza 29/11/2017 at 15:22 #

    Oi Juliano, muito obrigado pelo comentário e pela contribuição!

Deixe uma resposta