O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Desenvolvedora Android
Somos Todos Acessíveis: práticas modernas de
acessibilidade no Android
Paula Rosa
http://www.slides...
Definindo Acessibilidade
• Qualidade do que é acessível, do que tem acesso. Facilidade,
possibilidade na aquisição, na apr...
Definindo Acessibilidade
Acessibilidade = Experiência
“Se seu aplicativo possui uma boa acessibilidade, com
certeza a expe...
Recursos de Acessibilidade
Talkback Switch access Brailleback
Voice accessMagnificationConfigurações
Correção de Cor
Recursos de Acessibilidade - TalkBack
• é o recurso que mais precisa da atenção do desenvolvedor
• Mais utilizado
• Navega...
Vídeo
Talkback
2 AÇÕES:
- perceber o muro
- desviar do muro
• Cada componente será falado pelo talkback (botões, listas, spinner...
Talkback Gestures
Toque
simples (audio)
duplo (seleciona)
Swipe p/
cima e baixo
(fab)
Swipe duplo p/
cima ou baixo
(scroll...
Talkback
• Dar significado aos componentes (nomear);
• Agrupar e Ordenar;
• Fornecer navegabilidade no app
• Facilitar o e...
Talkback - Nomeando Imagens
android:importantForAcessibility="no" (API >= 16)
Talkback - Nomeando textos
Talkback - Agrupamento de Views
Talkback - EditText
Talkback - Live region
• Polite = Espera o talkback
terminar o áudio
• Assertive = interrompe o áudio
do talkback
• None =...
Talkback
* Envia evento para talkback falar o componente
* Anuncia acessibilidade
API 16
CustomViews
Views que herdam
acessibilidade
CustomView
onDraw()
onMeasure()
Sobreescreve
os métodos:
Views que não
herdam
...
Tratamento especial para CustomViews
• Enviar o evento
view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)
•...
Ferramentas para checar acessibilidade
• Utilizando talkback
• Accessibility scanner
• Utilizando espresso
• Lint (Android...
Accessibility Scanner
• Descrição de imagens
• Descrição repetida*
• Contraste de imagem
• Contraste de texto
• Não atende...
Testes com Espresso
• Testar se o componente possui contentDescription
• Testar se o componente possui contentDescription ...
Checagem com Lint
Dicas Marotas
Cuidado Redobrado - telas com banners,
transparência, tutoriais.
Vibração — Explorar vibração para ações do ...
Exemplos de apps que implementam acessibilidade (ou não)
Exemplos de apps que implementam acessibilidade (ou não)
Acessibilidade no Twitter
Configurações > Imagem e Som >
Acessibilidade > Escrever Descrição das Imagens
Links úteis
• https://developer.android.com/guide/topics/ui/accessibility/index.html
• https://codelabs.developers.google....
Contato
@_paulacr
paula.mecatronica@gmail.com
https://br.linkedin.com/in/paularosa
paula.rosa@concrete.com.br
Próximos SlideShares
Carregando em…5
×

Somos todos acessiveis

1.054 visualizações

Publicada em

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.

Publicada em: Celular
  • Seja o primeiro a comentar

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

×