Palestra ministrada na BrazilJS 2016 sobre como requisitos de acessibilidade web para pessoas com deficiências cognitivas, neuronais ou de aprendizagem como Autismo, Dislexia, TDAH, entre outras.
2. Talita Pagani
Bacharel e quase mestre em
Ciência da Computação
10+ de XP em TI
Professora, palestrante
UX Designer / Front-end
Foco atual = UX e Acessibilidade Web
Membro do grupo de especialistas em
Acessibilidade Web do W3C Brasil
3. O que vêm à mente
quando falamos sobre
Acessibilidade Web?
5. E quanto à usuários que
têm dificuldade de manter
o foco e a concentração em
um texto?
6. E quanto à usuários que
têm problemas de memória
de curto prazo?
7. E quanto à usuários que
não conseguem relacionar
uma representação de um
objeto ao objeto?
8. E quanto à usuários que
têm dificuldade de
interpretar metáforas e
expressões conotativas?
9. E quanto à usuários que
têm dificuldade com
conteúdo que é mais
textual que visual?
10. Estes são alguns problemas
recorrentes para pessoas que
possuem alguma deficiência
cognitiva, neuronal ou de
apredizagem
11. Deficiências cognitivas, neuronais ou
de aprendizagem (DCNA)
Condições, síndromes ou transtornos relacionados ao
desenvolvimento da memória, atenção, linguagem,
comunicação, habilidade de comunicação e letramento,
dentre outras funções cognitivas e de neurodesenvolvimento
(SEEMAN; COOPER, 2016)
13. 1,3% da população têm
alguma destas condições,
segundo o Censo de 2010
(IBGE, 2010)
14. 2 milhões de brasileiros
podem ter Autismo
Estimativas internacionais de 1 a cada 51 pessoas
(OLIVEIRA, 2015)
15. Isto significa que pelo menos
30 pessoas
neste auditório podem ser autistas
(e muitos nunca foram diagnosticados, como eu)
(OLIVEIRA, 2015)
16. Funções afetadas em DCNAs
Memória/memorização;
Resolução de problemas;
Leitura;
Compreensão verbal ou linguística (lidar com materiais
escritos);
Compreensão visual;
Foco e atenção;
Compreensão matemática
(POUNCEY, 2010; WEBAIM, 2014)
17. “Mas se eu fizer um site
acessível com base em nas
diretrizes existentes, eu
estarei atendendo a este
público”
18. FALSO
Para DCNAs pode ser necessário
uma simplificação do conteúdo ou
adaptabilidade
19. Algumas dificuldades
DCNAs são complexas (muitas variações)
Não são binária
De difícil identificação
Podem se sobrepor (ex.: TDAH e Dislexia)
São pouco endereçadas em recomendações
20. Barreiras de interação para este público
podem gerar:
Stress
Ansiedade
Pânico
Desconforto de um modo geral
Impedem MESMO a pessoa de utilizar o sistema
21. Não basta ser acessível a nível
funcional (leitores de tela, navegação
via teclado), tem que ter acessibilidade
informacional (compreender o
conteúdo)
22. Dados da survey do meu mestrado:
84% dos profissionais de TI não consideram ou
consideram parcialmente pessoas com DCNAs em
seus projetos
75% dos que não consideram o fazem porque não têm
conhecimento suficiente sobre essas deficiências para
aplicar em seus projetos
54% dizem que empresa em que atuam não considera
que estes usuários seriam parte do público-alvo dos
projetos
23. Dados da survey do meu mestrado:
33% dos participantes desconhecem
totalmente o WCAG
62% desconhecem o trabalho e as
recomendações do COGA (Cognitive and
Learning Disabilities Task Force - WAI - W3C)
24. 10 Dicas
De como você pode tornar a experiência
melhor para este público
25. #1 Indique claramente o progresso e forneça
indicativos de navegação
Previsibidade, consistência, rotina e reconhecimento: Dislexia, Autismo e Dificuldades de Memória
(ELLISON, 2011) Imagens de TypeForm e Livra.com
26. #2 Forneça recurso de multimodalidade e
representações redundantes
Imagens do app SocialClues
Reforço de conteúdo: Dislexia, Disgrafia, Discalculia, Autismo e Dificuldades de Aprendizagem
(ELLISON, 2011; WEBAIM, 2013; SMITH, 2009)
27. #2 Forneça recurso de multimodalidade e
representações redundantes
Imagens do Spotify
Reforço de conteúdo: Dislexia, Disgrafia, Discalculia, Autismo e Dificuldades de Aprendizagem
(ELLISON, 2011; WEBAIM, 2013; SMITH, 2009)
28. #2 Forneça recurso de multimodalidade e
representações redundantes
Imagens do site do Detran-SP
Reforço de conteúdo: Dislexia, Disgrafia, Discalculia, Autismo e Dificuldades de Aprendizagem
(ELLISON, 2011; WEBAIM, 2013; SMITH, 2009)
29. #2 Forneça recurso de multimodalidade e
representações redundantes
http://webaim.org/articles/cognitive/
Reforço de conteúdo: Dislexia, Disgrafia, Discalculia, Autismo e Dificuldades de Aprendizagem
(ELLISON, 2011; WEBAIM, 2013; SMITH, 2009)
30. #3 Projete páginas simples e intuitivas
https://willianjusten.com.br/criando-efeito-parallax-no-header/(ELLISON, 2011; WEBAIM, 2013)
Consistência, foco e atenção: Dislexia, Autismo, TDA/TDAH e Dificuldades de Aprendizagem
31. #4 Habilite customização quando possível
http://www.raphaelfabeni.com.br/
Legibilidade, contraste adequado, controle: Dislexia, Disgrafia e Autismo
32. #5 Forneça feedback adequado
Visibilidade do estado do sistema: Dislexia, Autismo e Dificuldades de Aprendizagem
33. #5 Forneça feedback adequado
Visibilidade do estado do sistema: Dislexia, Autismo e Dificuldades de Aprendizagem
Imagens de Interaction-Design.org
34. #6 Permita uma área de clique confortável
Prevenção de erros: Dislexia, Autismo e Dificuldades de Aprendizagem
Imagens de TypeForm e SEBRAE
35. #7 Seja previsível: elementos similares devem
produzir interações similares
Previsibidade, consistência, rotina e reconhecimento: Dislexia, Autismo e Dificuldades de Memória
https://www.interaction-design.org/literature/article/principle-
of-consistency-and-standards-in-user-interface-design
36. #8 Evite popups e propagandas que interrompem
o conteúdo
Previsibidade, quebra de expectativa: Autismo e Dificuldades de Aprendizagem
http://kikolani.com/optin-popup-forms.html
37. #9 Quando possível, tenha um modo de leitura
Foco, atenção e compreensão visual: Autismo, Dislexia, Disgrafia
https://support.mozilla.org/en-US/kb/view-articles-reader-
view-firefox-android
38. #10 Tenha suporte a “alternative spelling”
Prevenção de erros, flexibilidade: Dislexia, Disgrafia
39. Outras dicas
Facilite a escolha das opções
Permita que usuários controlem movimento e tempo
(cuidado com autoplay e timeout de forms)
Evite menus com muitos níveis, muitas opções e submenus
Cuidado com flat design #polêmica
Atente-se à ortografia dos itens
Confirme ações
(ELLISON, 2011; WEBAIM, 2013; DAHL, 2015; SMITH, 2009)
44. Para saber mais
Cognitive Accessibility User Research
http://w3c.github.io/coga/user-research/
WebAIM: Cognitive
http://webaim.org/articles/cognitive/
Meus “2 cents” sobre o assunto:
GAIA - Guia de Acessibilidade de Interfaces Web com foco
em aspectos do Autismo (Guidelines for Accessible
Interfaces for people with Autism)
http://talitapagani.com/gaia/
45. Referências
DAHL, D. Web accessibility for people with cognitive disabilities. 2015.
http://www.slideshare.net/dadahl/web-accessibility-for-people-with-cognitive-disabilities
ELLISON, R. Designing for cognitive disabilities. 2011.
http://www.slideshare.net/RuthEllison/designing-for-cognitive-disabilities/
IBGE, Censo Demográfico 2010. 2010. Disponível em: http://censo2010.ibge.gov.br/
OLIVEIRA, Carolina. Um retrato do autismo no Brasil. 2015.
http://www.usp.br/espacoaberto/?materia=um-retrato-do-autismo-no-brasil
POUNCEY, I. Web Accessibility for Cognitive Disabilities and Learning Difficulties. 2010. Disponível
em: https://dev.opera.com/articles/cognitive-disability-learning-difficulty/
SEEMAN, L.; COOPER, M. (Org.). Cognitive Accessibility User Research. 2015. Disponível em:
https://www.w3.org/TR/coga-user-research/
SMITH, J. Insights into Cognitive Web Accessibility. 2009.
http://www.slideshare.net/jared_w_smith/insights-into-cognitive-web-accessibility
WEBAIM. Cognitive. 2013.http://webaim.org/articles/cognitive/