Acessibilidade mobile para UXs e designers

Pensar em acessibilidade não é uma tarefa tão fácil assim. Mas para facilitar isto, é preciso entender o funcionamento das ferramentas utilizadas por pessoas com quaisquer desabilidades, uma vez que você entenda como tudo funciona, fica tudo mais fácil

Transcript

1. Acessibilidade mobile para UXs e designers Paula Caroline da Rosa Desenvolvedora Android @ Concrete @_paulacr (Twitter)
2. ACESSIBILIDADE
3. ACESSIBILIDADE Definição Ferramentas de acessibilidade Talkback • Acessibilidade é adaptar a aplicação para poder atender todos os tipos de usuários • Você pode melhorar a qualidade de vida de um usuário por colocar acessibilidade em um aplicativo • Aplicativos com acessibilidade = proporciona independência
4. ACESSIBILIDADE Definição Ferramentas de acessibilidade Talkback 1 em cada 5 pessoas terão alguma 
 desabilidade em algum momento da vida
 (2010, US - Census)
5. Correção de cor Talkback Switch Access BrailleBack Magnification Voice Access Definição Ferramentas de acessibilidade Talkback ACESSIBILIDADE
6. • Correção de cor: corrige cores (daltonismo) • Talkback: lê os elementos da tela • Switch Access: navega pela tela • Magnification: zoom na tela • Voice Access: comando de voz no sistema Definição Ferramentas de acessibilidade Talkback ACESSIBILIDADE
7. • Destinado a pessoas com limitações visuais (parcial ou total) • Compreende maior número de usuários que utilizam algum tipo de acessibilidade • É o item que mais precisa de esforço na hora de desenvolver Definição Ferramentas de acessibilidade Talkback ACESSIBILIDADE Talkback
8. FUNCIONAMENTO DO TAKBACK
9. Como funciona Como os usuários utilizam Gestos do talkback TALKBACK
10. • Cada componente da tela é falado pelo talkback • (conteúdo + estado + tipo componente) -> “selecionar botão” • O usuário faz um mapeamento da tela na mente • Depois ele decide quais ações tomar 2 AÇÕES: - perceber o muro - desviar do muro TALKBACK Como funciona Como os usuários utilizam Gestos do talkback
11. Toque simples (audio) duplo (seleciona) Swipe p/ cima e baixo (fab) Swipe duplo p/ cima ou baixo (scroll) Swipe p/ lados troca foco ATALHOS Back button Context Menu Home Screen Apps recentes Notificações GESTOS
12. COMO MELHORAR A EXPERIÊNCIA Poucas ações para grandiosos resultados
13. Descrição de imagens Modificação de textos Duplo estado Agrupamento Alterações em tempo de execução Decorativo Ações Elementos que executam ações são mais importantes para acessibilidade TALKBACK “Conectar com” facebook
14. Descrição de imagens Modificação de textos Duplo estado Agrupamento Alterações em tempo de execução 24 “vezes de” Vencimento “em” TALKBACK Formato de moeda ja possuem acessibilidade própria
15. Descrição de imagens Modificação de textos Duplo estado Agrupamento Alterações em tempo de execução Estado inicial Estado final Estado + “toque duas vezes para expandir/retrair” TALKBACK
16. Nomeação Modificação de textos Duplo estado Agrupamento Alterações em tempo de execução Itens não agrupados Leitura fora de contexto Itens agrupados Leitura sequencial TALKBACK
17. Nomeação Modificação de textos Duplo estado Agrupamento Alterações em tempo de execução Evento Resultado do evento Eventos demorados: deve fazer talkback falar os dois estados TALKBACK
18. ACESSIBILIDADE NA PRÁTICA
19. ESPECIFICAÇÃO 1 2 3 Fluxo 1 Stories Toolbar 2 Image from stories 3 Rate button * Só precisa especificar o que deve ser lido de forma diferente do padrão
20. PRINCIPAIS CUIDADOS
21. CUIDADOS • Telas com transparência: elementos posicionados atrás são lidos (cuidado com tutoriais) • Android ≠ iOS (há semelhanças mas há diferenças) • A acessibilidade deve fazer parte da experiência • O desenvolvedor pode ser seu amigo
22. PRINCIPAIS REFERÊNCIAS
23. APLICATIVOS REFERÊNCIA Google play Twitter Facebook
24. REFERÊNCIAS • https://developer.android.com/guide/topics/ui/accessibility/index.html • https://support.google.com/accessibility/android/answer/6151850? hl=pt-BR (Correção de cor) • https://support.google.com/accessibility/android/ • https://www.youtube.com/watch?v=Flo7aif5zHY (Twitter) • https://github.com/paulacr/Acessibilidade (#acessibilidade)
25. CONTATO @_paulacr (Twitter) paula.mecatronica@gmail.com paula.rosa@concrete.com https://www.linkedin.com/in/paularosa/