Acessibilidade no Android - 101 - Google IO Extended 2017

Acessibilidade no Android - 101 - Google IO Extended 2017

Dd958da4c68b7d3227b3f1cd92a429a6?s=128

Jean Pimentel

May 17, 2017
Tweet

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