Acessibilidade Web Cognitiva - BrazilJS 2016

Acessibilidade Web CognitivaTalita Pagani@talitapagani

http://br.freepik.com/vetores-gratis/bckground-moderna-do-crebro_884409.html

Talita PaganiBacharel 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

O que vêm à mente quando falamos sobre Acessibilidade Web?

Deficiência visual?

Leitores de tela?

Recursos assistivos?

Teclado adaptado?

Talvez deficiência auditiva?

E quanto à usuários que têm dificuldade de manter o foco e a concentração em um texto?

E quanto à usuários que têm problemas de memória de curto prazo?

E quanto à usuários que não conseguem relacionar uma representação de um objeto ao objeto?

E quanto à usuários que têm dificuldade de interpretar metáforas e expressões conotativas?

E quanto à usuários que têm dificuldade com conteúdo que é mais textual que visual?

Estes são alguns problemas recorrentes para pessoas que possuem alguma deficiência cognitiva, neuronal ou de apredizagem

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)

Source: http://www.slideshare.net/RuthEllison/designing-for-cognitive-disabilities/6-There_is_no_onesizefitsallrulebr

1,3% da população têm alguma destas condições, segundo o Censo de 2010

(IBGE, 2010)

2 milhões de brasileiros podem ter AutismoEstimativas internacionais de 1 a cada 51 pessoas

(OLIVEIRA, 2015)

Isto significa que pelo menos

30 pessoas neste auditório podem ser autistas(e muitos nunca foram diagnosticados, como eu)

(OLIVEIRA, 2015)

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)

“Mas se eu fizer um site acessível com base em nas diretrizes existentes, eu estarei atendendo a este público”

FALSOPara DCNAs pode ser necessário uma simplificação do conteúdo ou adaptabilidade

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

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

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)

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

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)

10 DicasDe como você pode tornar a experiência melhor para este público

#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

#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)

#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)

#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)

#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)

#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

#4 Habilite customização quando possível

http://www.raphaelfabeni.com.br/

Legibilidade, contraste adequado, controle: Dislexia, Disgrafia e Autismo

#5 Forneça feedback adequadoVisibilidade do estado do sistema: Dislexia, Autismo e Dificuldades de Aprendizagem

#5 Forneça feedback adequadoVisibilidade do estado do sistema: Dislexia, Autismo e Dificuldades de Aprendizagem

Imagens de Interaction-Design.org

#6 Permita uma área de clique confortávelPrevenção de erros: Dislexia, Autismo e Dificuldades de Aprendizagem

Imagens de TypeForm e SEBRAE

#7 Seja previsível: elementos similares devem produzir interações similaresPrevisibidade, 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

#8 Evite popups e propagandas que interrompem o conteúdoPrevisibidade, quebra de expectativa: Autismo e Dificuldades de Aprendizagem

http://kikolani.com/optin-popup-forms.html

#9 Quando possível, tenha um modo de leituraFoco, atenção e compreensão visual: Autismo, Dislexia, Disgrafia

https://support.mozilla.org/en-US/kb/view-articles-reader-view-firefox-android

#10 Tenha suporte a “alternative spelling”Prevenção de erros, flexibilidade: Dislexia, Disgrafia

Outras dicasFacilite 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)

Acessibilidade Web Cognitiva é sobre

Comunicação efetiva

Acessibilidade Web Cognitiva é sobre

Controle do usuário

Acessibilidade Web Cognitiva é sobre

Consistência

Acessibilidade Web Cognitiva é sobre

Multimodalidade

Para saber mais

Cognitive Accessibility User Researchhttp://w3c.github.io/coga/user-research/

WebAIM: Cognitivehttp://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/

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/

OBRIGADA!Talita Pagani | @talitapagani

http://br.freepik.com/vetores-gratis/bckground-moderna-do-crebro_884409.html