Eae!
Tudo bele?
Esta é a segunda parte da série sobre acessibilidade.
Na primeira parte da série (se você ainda não leu, clique AQUI para ler agora!) eu falei sobre o que é acessibilidade e o porquê de aplicá-la em seus projetos.
Nesta segunda parte continuaremos a falar sobre acessibilidade, mas agora veremos como usar certas técnicas para melhorar acessibilidade dos seus projetos.
Preparado? Então, vamos nessa!
Neste artigo você verá:
- Porquê usar o contraste
- Porquê não cusar somente Cor como informação
- Porquê não confiar somente no houver
- Porquê usar a simplicidade de convenções
- Porquê usar rótulos para formulários
- Porquê permitir zoom no conteúdo
Utilize o Contraste
O contraste é uma das coisas mais poderosas no Design. Com contraste, ou a falta dele, podemos criar coisas incríveis. Você pode saber mais sobre acessando este artigo:
E quando o assunto é acessibilidade ele tem um papel fundamental.
É preciso que o contraste ajude a pessoa a consumir o conteúdo da interface de forma fácil e simples. Sem precisar dar “zoom” na tela, ou demorar para tentar interpretar o que está no site. E principalmente quando se refere a cor dos textos e a cor de fundo da interface.
É preciso que as cores tenham um bom contraste permitindo que os usuários em geral (e claro, principalmente para as pessoas com baixa acuidade visual ) que consigam ler os conteúdos da aplicação mais facilmente.
Veja o exemplo a seguir:
Note como quase não existe contraste do texto amarelo com o fundo. Chega até a irritar os olhos. Já no exemplo com o texto roxo fica bem melhor.
Agora mais um exemplo:
Aqui temos duas opções de cinzas. Porém note como o primeiro é muito mais legível que o segundo.
Perceba também que os textos pequenos necessitam de ainda mais contraste e que os textos grandes pode utilizar de um contraste um pouco menor e suportam uma paleta de cores maior.
Segundo o W3C, os textos precisam ter uma relação de contraste de 4.5 ou superior e textos pequenos necessitam de um contraste maior. E para medir o contraste existem sistemas online para isso, como os abaixo:
Faça o teste e explore as combinações de cores de alto contraste. Você verá como na maioria dos casos pode até melhorar o seu layout.
Não utilize apenas as cores para passar informação.
Cores é algo fantástico. Elas dão vidas aos nossos projetos. Porém ao lidar com cores é necessário entender que nem todo mundo enxerga-as da mesma forma.
Uma parcela da população não (aproximadamente 10%) tem dificuldade em distinguir as cores, principalmente o verde.
Por isso é importante de além da cor usar uma outra forma de informar o usuário.
Veja no exemplo a seguir:
Neste exemplo é fácil notar que o primeiro campo está preenchido errado. A cor vermelha indica o erro.
Agora veja como fica esse mesmo exemplo só que sem as cores (como uma pessoa com daltonismo enxergaria, por exemplo):
Percebe que é impossível distinguir através da cor qual campo está errado?
Por motivos como esses que não devemos usar somente a cor como informação.
Uma alternativa é inserir textos e formas para indicar o erro:
Note que temos um ícone que indica o erro (e que é perceptível mesmo sem a cor) mais um texto auxiliar que passa a instrução. Além disso não há necessidade de indicar outro campo, já que com ele está tudo ok.
Veja como fica em uma versão sem cores:
Portanto certifique-se também de que textos e gráficos sejam compreendidos quando vistos sem cores.
E sobre daltonismo você pode realizar testes na sua imagem no próprio Photoshop.
– Converta a imagem em esquema de cores RGB (este regime prevê os resultados mais precisos para daltonismo).
– Vá em Visualizar> Configuração de prova> Daltonismo e, em seguida, escolha Protanopia-tipo ou Deuteranopia-tipo.
E se quiser saber mais sobre essa questão leia o artigo sobre cores e acessibilidade [CLIQUE AQUI].
Você também pode usar o Colorsafe.co (aplicativo baseado na Web Content Accessibility Guidelines (WCAG), em português Diretrizes de Acessibilidade para Conteúdo Web) para criar paletas seguras quando o assunto é acessibilidade. Faça testes! 😀
Elementos em estado desativado e elementos decorativos
Elementos em um estado “inativo”, “inicial” e elementos apenas decorativos não necessariamente precisam cumprir tais relações de contraste. Caso possuam funções importantes, em muitos casos, bastam apenas ter formas identificáveis.
Logo não é preciso deixar o logo do site com alto contraste só para cumprir a relação de proporção, nem naquela “setinha” decorativa que você colocou em uma lista de itens.
Não confie somente no efeito “hover status”
Quando você passa o mouse em algum componente de uma interface e esse muda a cor de fundo, a proporção, a cor do texto…. Enfim…. Quando acontece alguma mudança no layout ou quando determinadas informações são reveladas somente quando o seu mouse está posicionado em cima de um elemento. Esse é o efeito “hover”.
Esse efeito é muito bom também para mostrar elementos que ficam “ocultos “ no layout inicial e que só aparecem realmente quando o usuário o seleciona.
Porém além do problema da cor, que também pode acontecer aqui, existe a questão de não dar acesso as informações aos usuários com limitações motoras.
Isso se dá porque o efeito “hover” acontece somente quando a pessoa passa o mouse, ou seja, se o usuário não puder utilizar o mouse ele não vai ter acesso às informações que são reveladas somente com o “hover status”.
Nesses cenários, o ideal é deixar as informações visíveis logo no estado inicial do elemento. Veja o exemplo:
Quando passo o mouse em algum item das configurações do Facebook, o”efeito hover” aplicado faz o fundo mudar de cor e ainda mostra um ícone de “lápis” indicando que posso editá-lo, mas essas questões são decorativas e auxiliares. O link editar, que é o que importa mesmo, está lá a todo momento. Mesmo no modo inicial.
Outra opção é transformar em evento click (a pessoa clica ou da enter), ou adicionar o mesmo efeito no evento focus, como no Linkedin. Quando seleciono a edição de perfil pelo teclado, ele mostra a mesma coisas se tivesse se estivesse usando o mouse. É possível selecionar todos esses itens de edição de perfil apenas com o teclado.Veja:
Evite elementos que piscam ou mudam de cores muito rápido
Não utilize animações, nos elementos, que “pisquem” por mais do que 3 vezes por segundo.
Pessoas com epilepsia que são fotossensíveis podem ter ataques causados por determinadas frequências de elementos que piscam rapidamente.
Lembra do caso do desenho Pokémon que causou ataques nas crianças? Então…. Não faça como a Nintendo fez com o Pokémon! 😀
Use simplicidade e convenções. Evite confusões e dificuldade de entendimento dos elementos
Outro ponto que deve ser levado em conta são as convenções. Convenções são um “norte” para o usuário.
Convenção é um conjunto de acordos, padrões, que foram admitidos por todos, que se tornam um costume para os usuários. São coisas que ele já está acostumado ao acessar um site.
Então, por exemplo, quando ele vê um logo no topo do site ele sabe que ali tem um link e que ao clicar voltará para a tela inicial. Isso é uma convenção.
Agora seja a imagem a seguir:
Note que no primeiro caso o formulário não usa convenção e nem simplicidade (apesar de minimalista ficou mais confuso). Não se identifica logo de cara onde começa e onde necessariamente termina o campo para digitar.
Usuários com deficiências cognitivas e motoras podem ter muita dificuldade para interagir com campos como esses sem pistas visuais comuns.
Já na solução seria usar a convenção que todos já conhecem, que é o caso da segunda opção(lado direito).
Muitas vezes na vontade de sermos criativos, inovadores, etc; esquecemos que a chave para a maioria das soluções é justamente ser simples. E quando falamos de usabilidade e acessibilidade, a simplicidade tem ainda mais importância.
Use rótulos para formulários e seja claro
Os rótulos (“labels”) servem para informar o usuário sobre qual é objetivo do campo (aqui é você coloca seu e-mail, aqui coloca seu nome, etc).
Além de serem claros e objetivos, o ideal é que esses rótulos estejam visíveis mesmo depois que o usuário clique dentro do campo texto para começar a preenchê-lo.
E mesmo que você queira “esconder” esse rótulos para deixar apenas o conteúdo indicativo dentro do campo (como neste exemplo abaixo do site Twiiter), existem técnicas css/ css+js/ e até mesmo atributos HTML que ajudam os leitores de tela sem prejudicar nesse visual. Mas isso é assunto para outra parte do artigo! 😀
Permita o “zoom” no conteúdo
Não bloquei o ecrã da sua interface. Pessoas com dificuldades visuais podem precisar dar um “zoom”, ou seja, ampliar a visualização do conteúdo da página, para conseguir interagir com a sua interface. Em alguns casos uma boa solução é adicionar botões para a pessoa aumentar o texto.
Mais dicas:
- Elementos importantes devem ser claros e facilmente visíveis;
- Aplique contrastes suficientes e tamanhos apropriados para os elementos.
- Defina uma hierarquia de importância do conteúdo e elementos da página;
- Deixe claro para o usuário onde ele está na sua interface e quais elementos elementos são os mais importantes. Para isso utilize textos, formas, cores, etc;
- Agrupe elementos semelhantes nos formulários;
- Use rótulos claros e apropriados para botões, formulários e controles;
- Os visitantes devem navegar facilmente na sua interface. Os elementos devem ser claros e autoexplicativos;
- Reforce informações importantes através de pistas textuais e visuais (como cores, formas e até animações).
Pense em como sua interface pode ser usada por alguém com necessidades especiais:
- Sem cores;
- Com alto contraste ativado;
- Sem som;
- Com com zoom ou ecrã maximizado;
- Com um leitor de tela;
- Utilizando controles de voz;
- Usando uma combinação de vários constrangimentos listados acima.
Conclusão
Como você pode notar, existem muitas ações simples que podemos pensar e utilizar na hora de criar uma interface. O que foi exposto aqui é apenas uma parte do pode ser pensado e feito para melhorar a acessibilidade em interfaces. Tentei colocar neste artigo uma parcela de boas práticas, que garantem um mínimo de acessibilidade alcançando uma grande parte de usuários.
E assim termina a segunda parte sobre acessibilidade. Estamos evoluindo, Galucho! 😀
Portanto, continuaremos nos próximos posts com o Guia Sobre acessibilidade.
Ainda temos mais coisas para aprender!
Nos vemos no próximo post, bele? 🙂
Leia aqui a primeira parte: Guia sobre acessibilidade [parte 01]
Até mais!
Forte abraço!
Referências:
https://www.w3.org/Translations/WCAG20-pt-PT/
http://ux.sapo.pt/acessibilidade/
https://uxplanet.org/accessible-interface-design-3c59ee3ec730#.ijpfi824p
