Acessibilidade no Android - 101 - Google IO Extended 2017

Transcript

1. Acessibilidade no Android 101
2. Jean Pimentel Product Engineer na CI&T Desenvolvedor mobile há 4 anos Leitor de ficção científica Co-organizador do Android BH e CocoaHeads BH
3. Acessibilidade Usabilidade "Possibilidade e condição de alcance para utilização, com segurança e autonomia, de espaços, […] informação e comunicação, […] por pessoa com deficiência ou com mobilidade reduzida;" - Lei 10.098/2000 "Rapidez com que os utilizadores podem aprender a usar alguma coisa, a eficiência deles ao usá-la, o quanto se lembram daquilo, o grau de propensão a erros e o quanto gostam de utilizá-la" - Jakob Nielsen
4. Usabilidade + Acessibilidade Design Universal: tudo pode ser usado por todos, independente de idade, habilidade ou situação.
5. Deficiências 1 bilhão de pessoas com alguma forma de deficiência 80% dessas pessoas residem em países em desenvolvimento Organização Mundial da Saúde, 2011
6. Deficiências - Brasil 45 milhões de brasileiros com alguma forma de deficiência 85% vivem em áreas urbanas 18.6% - Visual 7.0% - Motora 5.1% - Auditiva 1.4% - Mental/Intelectual IBGE, 2010
7. Deficiências Cegueira Daltonismo Hipermetropia Parkinson Imobilização Mãos ocupadas Surdez Mudez ...
8. Mitos Se eu consigo, todo mundo consegue Difícil de implementar Consome muito tempo e dinheiro É responsabilidade dos desenvolvedores
9. Resolva problemas reais Não assuma que: • sua equipe sabe os problemas • sua equipe pensou em tudo • seus usuários se comportam como você espera
10. Personas Personagens ficcionais criados para representar os diferentes grupos de usuários que irão interagir com um app, produto, serviço etc. Ajudam o time a entender quem é o consumidor, quais suas características, desejos, necessidades, preocupações e objetivos.
11. Personas: José de Souza 65 anos Aposentado Visão ruim, tremor nas mãos e memória curta Prefere textos largos, imagens e ícones chamativos Se perde facilmente durante a navegação Usa o telefone com letras grandes, somente para ligar para parentes e ver as fotos dos netos
12. Limitações
13. Visão: cegos Não podem escanear o conteúdo Difícil de acessar informações visuais Limitado pelos leitores de telas
14. Visão: baixa visão Glaucoma, catarata, hipermetropia… Não conseguem ler textos pequenos sem a lupa Textos em imagens são difíceis de ler Baixo contraste e resolução dificultam muito
15. Visão: daltônicos 8% da população masculina (1/12) Variados tipos Baixo contraste é péssimo Problemas para ler gráficos
16. Audição Alertas sonoros devem possuir alternativas Áudios devem possuir transcrições Vídeos devem possuir legendas
17. Mobilidade Não conseguem usar o touchscreen Se cansam facilmente Precisam de botões extras ou teclados
18. E como fazer?
19. Cor e contraste Relação de contraste recomendada pela WCAG (Web Content Accessibility Guidelines). Quanto maior a diferença, maior o contraste. 4.5:1 AA 7:1 AAA
20. Cor e contraste 2.8 Lorem Ipsum #999999 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum orci quis nulla efficitur rhoncus. Ut malesuada quis metus ut venenatis. Quisque at dignissim justo. Etiam ultricies massa sem, elementum aliquam nunc consequat eu. This sample text attempts to visually demonstrate how readable this color combination is, for normal or bold text of various sizes and font styles.
21. Cor e contraste 4.5 Lorem Ipsum #777777 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum orci quis nulla efficitur rhoncus. Ut malesuada quis metus ut venenatis. Quisque at dignissim justo. Etiam ultricies massa sem, elementum aliquam nunc consequat eu. This sample text attempts to visually demonstrate how readable this color combination is, for normal or bold text of various sizes and font styles.
22. Cor e contraste 7.5 Lorem Ipsum #555555 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum orci quis nulla efficitur rhoncus. Ut malesuada quis metus ut venenatis. Quisque at dignissim justo. Etiam ultricies massa sem, elementum aliquam nunc consequat eu. This sample text attempts to visually demonstrate how readable this color combination is, for normal or bold text of various sizes and font styles.
23. Cor e contraste Daltonismo: Developer Options > Simulate color space
24. Área mínima de toque 48dp, aproximadamente 9mm Dica: android:minHeight, android:minWidth Apesar de não recomendado, é possível aumentar a área de toque programaticamente com o uso de TouchDelegate
25. Fontes Sempre use dimensões em sp (scale-independent) Layouts devem ser responsivos Altere o tamanho da fonte nas configurações do dispositivo e teste
26. Serviços do Android Talkback Brailleback Switch Access Voice Access
27. Content Description Semelhante ao ALT do HTML, é um texto descritivo para os elementos: ImageButton, ImageView, Checkbox
28. Content Description Se o elemento for apenas decorativo: <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:contentDescription="@null" android:src="@drawable/ic_music_note" />
29. Content Description private void updateImageButton() { if (playing) { playPauseImageButton.setImageResource(R.drawable.ic_pause); playPauseImageButton.setContentDescription(getString(R.string.pause)); } else { playPauseImageButton.setImageResource(R.drawable.ic_play); playPauseImageButton.setContentDescription(getString(R.string.play)); } } Não se esquecer dos elementos dinâmicos:
30. EditText android:labelFor no TextView android:hint no EditText <TextView android:labelFor="@+id/email" android:text="@string/email" … /> <EditText android:id="@+id/email" android:hint="@string/email" … />
31. Live Region Usado para alterações dinâmicas, sem que seja necessário o foco. Faz com que o TalkBack anuncie as mudanças.
32. Live Region Opções: none, polite, assertive <TextView android:id="@+id/status" android:layout_width="match_parent" android:layout_height="wrap_content" android:accessibilityLiveRegion="polite" />
33. Agrupamento de conteúdo Evitar que o Talkback anuncie os conteúdos separadamente: android:focusable + ViewGroups
34. Ordenação do Foco Suporte a navegação por teclados externos. android:nextFocusForward (Next) android:nextFocusUp android:nextFocusDown android:nextFocusLeft android:nextFocusRight
35. CustomViews Podem ser problemáticas! É responsabilidade do desenvolvedor: Tratar navegação via teclado Implementar as APIs de acessibilidade Popular, tratar e lançar eventos: CLICKED, FOCUSED, SCROLLED…
36. Faça testes Android Lint Accessibility Scanner Talkback Voice Access Color Simulation USUÁRIOS REAIS!
37. Contato contato@jeanpimentel.com.br speakerdeck.com/jeanpimentel github.com/jeanpimentel