Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Acessibilidade no Android - 101 - Google IO Ext...

Acessibilidade no Android - 101 - Google IO Extended 2017

Jean Pimentel

May 17, 2017
Tweet

More Decks by Jean Pimentel

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. Usabilidade + Acessibilidade Design Universal: tudo pode ser usado por

    todos, independente de idade, habilidade ou situação.
  4. 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
  5. 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
  6. Mitos Se eu consigo, todo mundo consegue Difícil de implementar

    Consome muito tempo e dinheiro É responsabilidade dos desenvolvedores
  7. 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
  8. 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.
  9. 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
  10. Visão: cegos Não podem escanear o conteúdo Difícil de acessar

    informações visuais Limitado pelos leitores de telas
  11. 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
  12. Visão: daltônicos 8% da população masculina (1/12) Variados tipos Baixo

    contraste é péssimo Problemas para ler gráficos
  13. 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
  14. 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.
  15. 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.
  16. 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.
  17. Á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
  18. 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
  19. Content Description Semelhante ao ALT do HTML, é um texto

    descritivo para os elementos: ImageButton, ImageView, Checkbox
  20. 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" />
  21. 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:
  22. Live Region Usado para alterações dinâmicas, sem que seja necessário

    o foco. Faz com que o TalkBack anuncie as mudanças.
  23. Agrupamento de conteúdo Evitar que o Talkback anuncie os conteúdos

    separadamente: android:focusable + ViewGroups
  24. Ordenação do Foco Suporte a navegação por teclados externos. android:nextFocusForward

    (Next) android:nextFocusUp android:nextFocusDown android:nextFocusLeft android:nextFocusRight
  25. 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…