O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Daltonismo no desenvolvimento web - ABC Dev 2017

575 visualizações

Publicada em

Slides

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Daltonismo no desenvolvimento web - ABC Dev 2017

  1. 1. Daltonismo no Desenvolvimento Web O que é o daltonismo, problemas mais frequentes encontrados e como resolvê-los Lucas Silva
  2. 2. CALMA JOVEM! Os slides estão disponibilizados em bit.ly/daltonismo-abcdev e no meu twitter após a talk
  3. 3. Quem sou eu? ● Front-End; ● Designer; ● Músico; ● Ex-criador de memes; ● Cozinheiro; ● Lavador de louça; ● e 1001 outras utilidades. @lucas_dejsilva
  4. 4. Daltonismo (Discromatopsia) Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  5. 5. Hora de aventura: Fome de vermelho, ep 38, 5ª temporada.
  6. 6. Daltonismo “O daltonismo (também chamado de discromatopsia ou discromopsia) é uma perturbação da percepção visual caracterizada pela incapacidade de diferenciar todas ou algumas cores, manifestando-se muitas vezes pela dificuldade em distinguir o verde do vermelho.”
  7. 7. Diretriz 1.4: Distinguível, da WCAG “1.4.1 Utilização da Cor: A cor não é utilizada como o único meio visual de transmitir informações, indicar uma ação, pedir uma resposta ou distinguir um elemento visual.”
  8. 8. Problemas mais frequentes
  9. 9. 1- CAPTCHA Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  10. 10. CAPTCHA Completely Automated Public Turing test to tell Computers and Humans Apart. Teste de Turing público completamente automatizado para distinguir entre computadores e pessoas.
  11. 11. CAPTCHA Visão Normal Visão com Protanopia
  12. 12. CAPTCHA ● A quantidade de spam que você está recebendo realmente vale perder conversões? ● Se a resposta for sim, o seu CAPTCHA é amigável para todos os usuários, inclusive para aqueles que são deficientes visuais? ● CAPTCHAs são para robôs, não para seres humanos. Infelizmente, tudo o que uma pessoa pode codificar para tentar evitar os robôs de entrarem em um site é algo que o outro pode encontrar um caminho. A verdadeira consideração é: estamos apenas empurrando o problema com spam para os nossos clientes?
  13. 13. ReCAPTCHA www.google.com/recaptcha
  14. 14. 2- Seletor de Cor Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  15. 15. Seletor de Cor
  16. 16. Seletor de Cor Seletor de cor do Microsoft Word
  17. 17. Seletor de Cor Seletor de cor do Google Docs
  18. 18. Seletor de Cor www.jqueryrain.com/demo/jquery-color-picker
  19. 19. 3- Gráficos Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  20. 20. Gráficos Visão Normal Visão com Protanopia
  21. 21. Gráficos Gráficos do Google Analytics em 2012.
  22. 22. Gráficos Gráficos do Google Analytics em 2016.
  23. 23. Gráficos Gráficos do Google Forms em 2016.
  24. 24. Gráficos Gráficos no Visual Website Optimizer antes de 2012.
  25. 25. Gráficos Gráficos no Visual Website Optimizer em de 2012.
  26. 26. 4- Tabelas Comparativas Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  27. 27. Tabelas Comparativas Tabela em uma matéria do uol.com.br
  28. 28. Tabelas Comparativas Comparativo de celulares no tudoparacelular.com
  29. 29. 5- Games Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  30. 30. Games Telas do jogo Wordfeud.
  31. 31. Games Telas do jogo Trainyard
  32. 32. Games Telas do jogo Trainyard
  33. 33. Ferramentas para teste Sobre CAPTCHA Seletor de Cor Gráficos Tabelas Comparativas Games Ferramentas para teste
  34. 34. NoCoffe Vision Simulator Extensão para o Google Chrome
  35. 35. Color Safe http://colorsafe.co/
  36. 36. Color Safe http://leaverou.github.io/contrast-ratio
  37. 37. Photoshop Photoshop CC 2015
  38. 38. Obrigado! ! bit.ly/daltonismo-abcdev github.com/lucasjs twitter.com/lucas_dejsilva

×