Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Somos todos acessiveis

1,125 views

Published on

Quantas vezes investimos tempo em desenvolver animações, telas bonitas e performáticas, e esquecemos de deixar nosso app acessível. Com poucas linhas de código podemos transformar um app para deixá-lo acessível e atender os mais diversos usuários.
Um projeto de exemplo está disponível no github: https://github.com/paulacr/Acessibilidade e digite a hashtag #acessibilidade para procurar os exemplos onde deve ser implementada.

Published in: Mobile

Somos todos acessiveis

  1. 1. Desenvolvedora Android Somos Todos Acessíveis: práticas modernas de acessibilidade no Android Paula Rosa http://www.slideshare.net/PaulaCarolinedaRosa/ somos-todos-acessiveis
  2. 2. Definindo Acessibilidade • Qualidade do que é acessível, do que tem acesso. Facilidade, possibilidade na aquisição, na aproximação. Oferecer experiências semelhantes a todos tipos de usuários
  3. 3. Definindo Acessibilidade Acessibilidade = Experiência “Se seu aplicativo possui uma boa acessibilidade, com certeza a experiência estará boa também” (Rosa, Paula) Acessibilidade deve ser parte do processo de desenvolvimento
  4. 4. Recursos de Acessibilidade Talkback Switch access Brailleback Voice accessMagnificationConfigurações Correção de Cor
  5. 5. Recursos de Acessibilidade - TalkBack • é o recurso que mais precisa da atenção do desenvolvedor • Mais utilizado • Navega por cada elemento da tela, falando “estado + texto + tipo de componente” —> “conectar botão”, “não selecionado, lembrar senha, caixa de seleção"
  6. 6. Vídeo
  7. 7. Talkback 2 AÇÕES: - perceber o muro - desviar do muro • Cada componente será falado pelo talkback (botões, listas, spinners, textos, imagens…); • O usuário faz um mapeamento dos componentes e funcionalidades na mente; • A partir disto ele pode então decidir as ações que deverá tomar
  8. 8. Talkback Gestures 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
  9. 9. Talkback • Dar significado aos componentes (nomear); • Agrupar e Ordenar; • Fornecer navegabilidade no app • Facilitar o entendimento do usuário Componentes com significado ImageButton ImageView Checkbox
  10. 10. Talkback - Nomeando Imagens android:importantForAcessibility="no" (API >= 16)
  11. 11. Talkback - Nomeando textos
  12. 12. Talkback - Agrupamento de Views
  13. 13. Talkback - EditText
  14. 14. Talkback - Live region • Polite = Espera o talkback terminar o áudio • Assertive = interrompe o áudio do talkback • None = sem Feedback
  15. 15. Talkback * Envia evento para talkback falar o componente * Anuncia acessibilidade API 16
  16. 16. CustomViews Views que herdam acessibilidade CustomView onDraw() onMeasure() Sobreescreve os métodos: Views que não herdam acessibilidade Herda de View
  17. 17. Tratamento especial para CustomViews • Enviar o evento view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED) • Sobreescrever método dispatchPopulateAccessibilityEvent(AccessibilityEvent)
  18. 18. Ferramentas para checar acessibilidade • Utilizando talkback • Accessibility scanner • Utilizando espresso • Lint (Android Studio)
  19. 19. Accessibility Scanner • Descrição de imagens • Descrição repetida* • Contraste de imagem • Contraste de texto • Não atende 100% • Android Marshmallow (6.0) Item label com.duolingo:id/icon —> This item may not have a label readable by screen readers. Image contrast com.duolingo:id/icon —>The image's contrast ratio is 2,44. This ratio is based on an estimated foreground color of #FFFFFF and an estimated background color of #1CB0F6. Consider increasing this ratio to 3,00 or greater. Text contrast —> The item's text contrast ratio is 2,38. This ratio is based on an estimated foreground color of #A8A8A8 and an estimated background color of #FFFFFF. Consider increasing this item's text contrast ratio to 3,00 or greater.
  20. 20. Testes com Espresso • Testar se o componente possui contentDescription • Testar se o componente possui contentDescription correta
  21. 21. Checagem com Lint
  22. 22. Dicas Marotas Cuidado Redobrado - telas com banners, transparência, tutoriais. Vibração — Explorar vibração para ações do app e notificações Atenção a componentes de duplo estado - toogles, switches (…) Mais informação - Textos informativos que expliquem como interagir com as funcionalidades Busca por voz integrada - Pode ajudar bastante a usabilidade do app
  23. 23. Exemplos de apps que implementam acessibilidade (ou não)
  24. 24. Exemplos de apps que implementam acessibilidade (ou não)
  25. 25. Acessibilidade no Twitter Configurações > Imagem e Som > Acessibilidade > Escrever Descrição das Imagens
  26. 26. Links úteis • https://developer.android.com/guide/topics/ui/accessibility/index.html • https://codelabs.developers.google.com/codelabs/basic-android-accessibility/ • http://www.slideshare.net/KellyShuster/android-accessibility-droidcon-london • http://www.slideshare.net/7mary4/android-accessibility-39995456 • https://www.youtube.com/watch?v=euEsfNR5Zw4 (io 2015) • https://www.youtube.com/watch?v=apEz73_H2fU (Voice Access) • https://www.udacity.com/course/viewer#!/c-ud853/ • https://engineering.twitter.com/university/videos/accessibility-for-android-at-twitter • https://github.com/paulacr/Acessibilidade #Acessibilidade
  27. 27. Contato @_paulacr paula.mecatronica@gmail.com https://br.linkedin.com/in/paularosa paula.rosa@concrete.com.br

×