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