Projetando para a
neurodiversidade
Talita Pagani - Utilizza
Neurodivergente: depressão, transtorno generalizado de ansiedade, transtorno
obsessivo compulsivo, problemas de concentração e de memória de curto prazo,
indicativo forte de Asperger
Pesquisadora de UX
Consulta de Acessibilidade na Utilizza e na Sondery
Mestre em Ciência da Computação (Acessibilidade Web)
Membro do grupo de especialistas de acessibilidade do W3C Brasil
Google Developer Expert (GDE) em Tecnologias Web
Me apresentando...
O que vêm à mente quando falamos em acessibilidade?
Mas e quando o
problema é
“invisível”?
Simone Biles (medalista olímpica)
Transtorno de Déficit de Atenção e Hiperatividade
(TDAH)
Justin Timberlake (cantor vencedor de Grammy)
Transtorno de Déficit de Atenção (TDA) e
Transtorno Obsessivo Compulsivo (TOC)
Steven Spielberg (diretor vencedor
de Oscar)
Dislexia
Whoopi Goldberg (atriz vencedora
de Emmy, Grammy, Oscar e Tony)
Dislexia
Courtney Love
(cantora)
Autismo
Pessoas possuem
habilidades diversas para
processar informação.
Você considera essa
diversidade ou atende as
características típicas?
Transtornos de
aprendizagem e de
leitura
Transtornos de
desenvolvimento
Transtornos
neurológicos
Doenças
mentais
Neurodiversidade
diferentes habilidades de
processamento de estímulo
Várias funções afetadas
Memória de curto ou longo prazo
Percepção
Velocidade de leitura
Compreensão
Atenção
Momentos de confusão
Fala
Julgamento
Coordenação
Priorização
Resolução de problemas
Habilidade de lidar com mudanças
Quem são as pessoas
impactadas?
Pode ser você
Nós somos ou seremos impactados
Daqui a alguns anos ou décadas
Através de mudanças em nossas vidas
Quando estamos com privação de sono ou com cansaço
Quando passamos por situações estressantes
Condições de longa duração, temporárias ou situacionais
Nós iremos envelhecer
E vamos apresentar problemas de memorização, fala, compreensão, coordenação motora...
Desafios ao lidar com condições neurodiversas
Elas variam muito
Elas variam entre pessoas
Elas podem variar na mesma pessoa (humor, envelhecimento,
evento episódico)
Podem ser difícil de identificar
Podem se sobrepor
Exemplos de barreiras
Frases complexas que são difíceis de ler e palavras incomuns que são difíceis de
entender.
Longas passagens de texto sem imagens, gráficos ou outras ilustrações para realçar
o contexto.
Mover, piscar ou cintilar conteúdo e áudio de fundo que não pode ser desativado.
Navegadores web e reprodutores de mídia que não fornecem mecanismos para
suprimir animações e áudio.
Pontos-chave para incluir estas pessoas
Consistência
Informar em múltiplos
meios
Controle do usuário Conteúdo compreensível
Previsibilidade Navegabilidade
Orientações
Consistência
Páginas diferentes mas com layout e elementos consistentes.
Consistência
Mesmo ícone para indicar que a ação que pode ser feita e que foi feita.
Eu sei as ações
que posso
fazer
Eu reconheço as
ações que fiz
Informações em múltiplos meios
Use imagens, diagramas, ícones e vídeos para dar suporte a textos.
Informações em múltiplos meios
Use ícones que ajudem as pessoas a memorizar e recordar as ações.
MENU
Controle do usuário
Permita que usuários controlem movimento e tempo.
Controle do usuário
Forneça tempo de ação e de leitura adequados.
Controle do usuário
Certifique-se de que os elementos tenham uma área grande clicável.
Conteúdo compreensível
Informações organizadas de forma hierárquica e sem excessos.
Conteúdo compreensível
Use espaços em branco para distinguir as informações.
Conteúdo compreensível
Evite combinações de cores muito saturadas ou brilhantes.
Conteúdo compreensível
Conteúdo que fala a linguagem do público-alvo.
“Fulano já viu a viola em caco.” “Fulano viu que não isso não ia dar certo.”
Não está errado, mas não é recomendável. Frase sem figura de linguagem, ajuda também pessoas
surdas e que podem não entender regionalismos.
Conteúdo compreensível - Textos
Cuidado ao usar palavras sublinhadas, em itálico ou em
MAIÚSCULA, elas podem dificultar a leitura.
Prefira textos alinhados à esquerda.
Use negrito para destacar termos importantes e guiar a leitura.
Certifique-se de que o comprimento da linha não exceda de 70
a 80 caracteres.
Conteúdo compreensível
Não force as pessoas a fazer contas.
12x de R$ 74,36
e 30% de desconto somente hoje
Conteúdo compreensível
Os usuários são ajudados a evitar e corrigir erros.
Previsibilidade
Eu sei o que está acontecendo e quais as consequências das ações
Previsibilidade
Eu sei que ainda há alguns passos para terminar este formulário.
Previsibilidade
Eu sei quanto tempo vou levar para ler e
qual meu progresso na leitura.
Previsibilidade
Evite conteúdos intrusivos como janelas popup de propaganda e formulário.
Navegabilidade
Os usuários podem navegar facilmente, encontrar conteúdo e
determinar onde estão.
Para finalizar
Onde encontrar mais informações
https://gaia.wiki.br/ https://guia-wcag.com/
Projetar para a
neurodiversidade é
projetar para nós mesmos
no futuro.
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.
MATTES, K. Cognitive Abilities: Designing for a broad spectrum. 2018.
https://developer.paciellogroup.com/blog/2018/05/cognitive-disabilities-designing-for-a-broad-spectrum-accessu/
POUNCEY, I. Web Accessibility for Cognitive Disabilities and Learning Difficulties. 2010.
https://dev.opera.com/articles/cognitive-disability-learning-difficulty/
SEEMAN, L.; COOPER, M. (Org.). Cognitive Accessibility User Research. 2015. 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
WAI. Tips for Getting Started Designing for Web Accessibility. 2015. https://www.w3.org/WAI/tips/designing/
WEBAIM. Cognitive. 2013. http://webaim.org/articles/cognitive/
Obrigada!
contato@talitapagani.com / twitter.com/talitapagani
Talita Pagani - Utilizza

Projetando para a neurodiversidade

  • 1.
  • 2.
    Neurodivergente: depressão, transtornogeneralizado de ansiedade, transtorno obsessivo compulsivo, problemas de concentração e de memória de curto prazo, indicativo forte de Asperger Pesquisadora de UX Consulta de Acessibilidade na Utilizza e na Sondery Mestre em Ciência da Computação (Acessibilidade Web) Membro do grupo de especialistas de acessibilidade do W3C Brasil Google Developer Expert (GDE) em Tecnologias Web Me apresentando...
  • 3.
    O que vêmà mente quando falamos em acessibilidade?
  • 4.
    Mas e quandoo problema é “invisível”?
  • 5.
    Simone Biles (medalistaolímpica) Transtorno de Déficit de Atenção e Hiperatividade (TDAH) Justin Timberlake (cantor vencedor de Grammy) Transtorno de Déficit de Atenção (TDA) e Transtorno Obsessivo Compulsivo (TOC)
  • 6.
    Steven Spielberg (diretorvencedor de Oscar) Dislexia Whoopi Goldberg (atriz vencedora de Emmy, Grammy, Oscar e Tony) Dislexia Courtney Love (cantora) Autismo
  • 7.
    Pessoas possuem habilidades diversaspara processar informação. Você considera essa diversidade ou atende as características típicas?
  • 8.
    Transtornos de aprendizagem ede leitura Transtornos de desenvolvimento Transtornos neurológicos Doenças mentais Neurodiversidade diferentes habilidades de processamento de estímulo
  • 9.
    Várias funções afetadas Memóriade curto ou longo prazo Percepção Velocidade de leitura Compreensão Atenção Momentos de confusão Fala Julgamento Coordenação Priorização Resolução de problemas Habilidade de lidar com mudanças
  • 10.
    Quem são aspessoas impactadas?
  • 11.
  • 12.
    Nós somos ouseremos impactados Daqui a alguns anos ou décadas Através de mudanças em nossas vidas Quando estamos com privação de sono ou com cansaço Quando passamos por situações estressantes Condições de longa duração, temporárias ou situacionais
  • 13.
    Nós iremos envelhecer Evamos apresentar problemas de memorização, fala, compreensão, coordenação motora...
  • 14.
    Desafios ao lidarcom condições neurodiversas Elas variam muito Elas variam entre pessoas Elas podem variar na mesma pessoa (humor, envelhecimento, evento episódico) Podem ser difícil de identificar Podem se sobrepor
  • 15.
    Exemplos de barreiras Frasescomplexas que são difíceis de ler e palavras incomuns que são difíceis de entender. Longas passagens de texto sem imagens, gráficos ou outras ilustrações para realçar o contexto. Mover, piscar ou cintilar conteúdo e áudio de fundo que não pode ser desativado. Navegadores web e reprodutores de mídia que não fornecem mecanismos para suprimir animações e áudio.
  • 16.
    Pontos-chave para incluirestas pessoas Consistência Informar em múltiplos meios Controle do usuário Conteúdo compreensível Previsibilidade Navegabilidade
  • 17.
  • 18.
    Consistência Páginas diferentes mascom layout e elementos consistentes.
  • 19.
    Consistência Mesmo ícone paraindicar que a ação que pode ser feita e que foi feita. Eu sei as ações que posso fazer Eu reconheço as ações que fiz
  • 20.
    Informações em múltiplosmeios Use imagens, diagramas, ícones e vídeos para dar suporte a textos.
  • 21.
    Informações em múltiplosmeios Use ícones que ajudem as pessoas a memorizar e recordar as ações. MENU
  • 22.
    Controle do usuário Permitaque usuários controlem movimento e tempo.
  • 23.
    Controle do usuário Forneçatempo de ação e de leitura adequados.
  • 24.
    Controle do usuário Certifique-sede que os elementos tenham uma área grande clicável.
  • 25.
    Conteúdo compreensível Informações organizadasde forma hierárquica e sem excessos.
  • 26.
    Conteúdo compreensível Use espaçosem branco para distinguir as informações.
  • 27.
    Conteúdo compreensível Evite combinaçõesde cores muito saturadas ou brilhantes.
  • 28.
    Conteúdo compreensível Conteúdo quefala a linguagem do público-alvo. “Fulano já viu a viola em caco.” “Fulano viu que não isso não ia dar certo.” Não está errado, mas não é recomendável. Frase sem figura de linguagem, ajuda também pessoas surdas e que podem não entender regionalismos.
  • 29.
    Conteúdo compreensível -Textos Cuidado ao usar palavras sublinhadas, em itálico ou em MAIÚSCULA, elas podem dificultar a leitura. Prefira textos alinhados à esquerda. Use negrito para destacar termos importantes e guiar a leitura. Certifique-se de que o comprimento da linha não exceda de 70 a 80 caracteres.
  • 30.
    Conteúdo compreensível Não forceas pessoas a fazer contas. 12x de R$ 74,36 e 30% de desconto somente hoje
  • 31.
    Conteúdo compreensível Os usuáriossão ajudados a evitar e corrigir erros.
  • 32.
    Previsibilidade Eu sei oque está acontecendo e quais as consequências das ações
  • 33.
    Previsibilidade Eu sei queainda há alguns passos para terminar este formulário.
  • 34.
    Previsibilidade Eu sei quantotempo vou levar para ler e qual meu progresso na leitura.
  • 35.
    Previsibilidade Evite conteúdos intrusivoscomo janelas popup de propaganda e formulário.
  • 36.
    Navegabilidade Os usuários podemnavegar facilmente, encontrar conteúdo e determinar onde estão.
  • 37.
  • 38.
    Onde encontrar maisinformações https://gaia.wiki.br/ https://guia-wcag.com/
  • 39.
    Projetar para a neurodiversidadeé projetar para nós mesmos no futuro.
  • 40.
    Referências DAHL, D. Webaccessibility 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. MATTES, K. Cognitive Abilities: Designing for a broad spectrum. 2018. https://developer.paciellogroup.com/blog/2018/05/cognitive-disabilities-designing-for-a-broad-spectrum-accessu/ POUNCEY, I. Web Accessibility for Cognitive Disabilities and Learning Difficulties. 2010. https://dev.opera.com/articles/cognitive-disability-learning-difficulty/ SEEMAN, L.; COOPER, M. (Org.). Cognitive Accessibility User Research. 2015. 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 WAI. Tips for Getting Started Designing for Web Accessibility. 2015. https://www.w3.org/WAI/tips/designing/ WEBAIM. Cognitive. 2013. http://webaim.org/articles/cognitive/
  • 41.