Accessibility for Android Applications

Simple steps to apply accessibility to Android Apps

Transcript

1. Acessibilidade em Android Dicas práticas de como deixar seu app acessível TDC Floripa - 2019 Paula Rosa @_paulacr
2. ACESSIBILIDADE EM APLICAÇÕES ANDROID | PERGUNTAS PARA A PLATÉIA • Como uma pessoa que perdeu a mão direita usa o seu aplicativo? Ela consegue usar perfeitamente? • Como que uma pessoa com alguma desabilidade motora usa seu app? • Como um deficiente visual usa o seu app? • Se a pessoa sofrer um acidente e precisar chamar algum número de emergência, conseguirá fechar seu app facilmente?
3. O QUE É ACESSIBILIDADE?
4. ACESSIBILIDADE EM APLICAÇÕES ANDROID | DEFINIÇÃO DE 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, considerando a limitação de cada um.
5. RECURSOS DE ACESSIBILIDADE NO ANDROID
6. ACESSIBILIDADE EM APLICAÇÕES ANDROID | RECURSOS DE ACESSIBILIDADE * A maior parte dos recursos estão presentes nas configurações dos devices Correção de cor Talkback Switch access Brailleback Magnification Voice access
7. ACESSIBILIDADE EM APLICAÇÕES ANDROID | RECURSOS DE ACESSIBILIDADE - ANDROID PIE
8. ACESSIBILIDADE EM APLICAÇÕES ANDROID | GOOGLE LOOKOUT - PIXEL U.S.
9. ACESSIBILIDADE EM APLICAÇÕES ANDROID | SELECT TO SPEAK
10. TALKBACK
11. ACESSIBILIDADE EM APLICAÇÕES ANDROID | TALKBACK • É o recurso que mais precisa de atenção do desenvolvedor • É o recurso mais utilizado • Navega por cada elemento da tela falando: “estado + texto + tipo de componente”:
 exemplo: “conectar botão”
 exemplo: “não selecionado, lembrar senha, caixa de seleção"
12. ACESSIBILIDADE EM APLICAÇÕES ANDROID | FUNCIONAMENTO DO TALKBACK
13. ACESSIBILIDADE EM APLICAÇÕES ANDROID | FUNCIONAMENTO DO TALKBACK • Cada componente será falado pelo talkback (ao ser tocado ou focado) • O usuário faz um mapeamento dos componentes da tela • Depois deste mapeamento, decide quais ações irá tomar 2 ações: - Perceber o muro - Desviar o muro
14. ACESSIBILIDADE EM APLICAÇÕES ANDROID | FUNCIONAMENTO DO TALKBACK Lê o componente 2x Click Scroll Troca de foco (swipe) Back button Home screen Recent Apps Notifications
15. NOMEAÇÃO / ETIQUETAGEM DE COMPONENTES (LABELING)
16. ACESSIBILIDADE EM APLICAÇÕES ANDROID | IMAGENS DECORATIVAS android:importantForAcessibility="no" (API >= 16) <ImageView android:id=“@+id/ic_sino” android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_app" android:layout_gravity="center" android:layout_marginTop="40dp" android:contentDescription="@null" />
17. ACESSIBILIDADE EM APLICAÇÕES ANDROID | IMAGENS QUE EXECUTAM AÇÕES <ImageView android:id="@+id/botao_facebook" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/facebookicon" android:contentDescription=“@string/login_facebook" />
18. ACESSIBILIDADE EM APLICAÇÕES ANDROID | NOMEAÇÃO/ ETIQUETAS <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" android:text="24 x R$ 25,90" android:contentDescription="24 vezes de R$ 25,90"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" android:textStyle="bold" android:text="Vencimento" android:contentDescription="Vencimento em" />
19. AGRUPAMENTO DE VIEWS (GROUPING)
20. ACESSIBILIDADE EM APLICAÇÕES ANDROID | AGRUPAMENTO DE VIEWS <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true" android:focusableInTouchMode="true"> <TextView …/> <TextView …/> </LinearLayout>
21. ACCESSIBILITY SCREEN READER FOCUSABLE (ANDROID P)
22. ACESSIBILIDADE EM APLICAÇÕES ANDROID | ACCESSIBILITY HEADING <LinearLayout (…) android:screenReaderFocusable="true"> </LinearLayout> • Possibilita agrupamento de views • Foi pensado para que não seja necessário usar o atributo de foco
23. ACCESSIBILITY HEADING (ANDROID P)
24. ACESSIBILIDADE EM APLICAÇÕES ANDROID | ACCESSIBILITY HEADING <LinearLayout (…) android:accessibilityHeading="true"> </LinearLayout> • Adiciona uma espécie de “seção" num agrupamento de layout • Possibilita que o usuário possa pular de seção • Foi pensado para grandes porções de texto (texto de artigos, por exemplo)
25. CAMPOS DE TEXTO
26. ACESSIBILIDADE EM APLICAÇÕES ANDROID | EDITTEXT <android.support.design.widget.TextInputLayout android:labelFor=“@+id/texto_nome"> <EditText android:hint=“@string/hint_nome_usuario” …/> </android.support.design.widget.TextInputLayout>
27. LIVE REGION
28. ACESSIBILIDADE EM APLICAÇÕES ANDROID | LIVE REGION Polite: Espera o áudio em execução 
 Assertive: Interrompe o áudio em execução
 None: nenhum dos tipos acima ViewCompat.setAccessibilityLiveRegion (view,ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE);
29. COMPONENTES DE DUPLO ESTADO
30. ACESSIBILIDADE EM APLICAÇÕES ANDROID | ACCESSIBILITY EVENT / ANNOUNCE ACCESSIBILITY announceForAccessibility("texto de acessibilidade anunciado"); Anunciar acessibilidade layoutViewTarefasDetalhe.sendAccessibilityEvent( AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED); Direcionar o foco *colocar foco no layout quando usar este método com foco
31. PANE TITLE (ANDROID P)
32. ACESSIBILIDADE EM APLICAÇÕES ANDROID | PANE TITLE <LinearLayout (…) android:accessibilityPaneTitle=“notificacao”> </LinearLayout> Pane • O sistema registra esses títulos como se fossem id’s para determinada área (container) • O sistema é notificado automaticamente quando houver mudanças naquela área • O usuário vai ter mais informação sobre o que foi alterado • Causa impacto mínimo para o desenvolvimento
33. CUSTOM VIEWS
34. ACESSIBILIDADE EM APLICAÇÕES ANDROID | CUSTOM VIEWS Views que herdam acessibilidade CustomView Views que não herdam acessibilidade onDraw() onMeasure() Sobreescreve os métodos: Herda de View
35. ACESSIBILIDADE EM APLICAÇÕES ANDROID | TRATAMENTO ESPECIAL PARA CUSTOM VIEWS Sobreescreva o método: @Override public boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event) { if(event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED){ event.getText().add("texto de acessibilidade”); } return true; }
36. TESTANDO ACESSIBILIDADE
37. ACESSIBILIDADE EM APLICAÇÕES ANDROID | TESTES • Talkback • Accessibility scanner • Espresso (teste instrumentado) • Lint (Android studio)
38. ACESSIBILIDADE EM APLICAÇÕES ANDROID | ACCESSIBILITY SCANNER Descrição de imagens Descrição repetida Contraste de texto Não atende 100% Android 6.0+ Acertou contrastes de texto / Acertou parcialmente imagens sem descrição
39. ACESSIBILIDADE EM APLICAÇÕES ANDROID | ESPRESSO onView(withId(R.id.ic_app_notificacao)).check (matches(not(hasContentDescription()))); Testar se tem ou não descrição na imagem onView(withId(R.id.botao_twitter)).check (matches(withContentDescription("Logar com twitter"))); Testar o texto da descrição da imagem
40. ACESSIBILIDADE EM APLICAÇÕES ANDROID | LINT
41. DICAS
42. ACESSIBILIDADE EM APLICAÇÕES ANDROID | DICAS • Cuidado com banners (podem roubar o foco) • Cuidado com transparência (componentes são lidos por trás da transparência) • Explorar vibração • Atenção redobrada a componentes de duplo estado • Integrar comandos de voz quando possível (exemplo busca)
43. ACESSIBILIDADE EM APLICAÇÕES ANDROID | TUTORIAIS Prefira tutoriais com páginas ao invés de tutoriais com transparência Certo Certo
44. CASES DE ACESSIBILIDADE
45. ACESSIBILIDADE EM APLICAÇÕES ANDROID | IFOOD Facilite o entendimento Como o talkback lê cada um dos textos da célula • variada: tipo de comida variada • $$$: faixa de preço 4 de 5 • 40-55 min: tempo de entrega de 40 a 55 minutos
46. ACESSIBILIDADE EM APLICAÇÕES ANDROID | DICAS • Acessibilidade é um dever de toda a equipe: incluindo gerentes de projetos, scrum masters, p.o. , designers e UX, QA's • Acessibilidade pensada antes previne retrabalhos além de garantir que seu app estará com a melhor experiência possível • Como várias coisas na vida, colocar acessibilidade é hábito: inclua acessibilidade no seu code review
47. ACESSIBILIDADE EM APLICAÇÕES ANDROID | CASE DE ACESSIBILIDADE: TWITTER Configurações > Imagem e Som > Acessibilidade > Escrever Descrição das Imagens Adicionar descrição…
48. ACESSIBILIDADE EM APLICAÇÕES ANDROID | 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 • https://www.youtube.com/watch?v=euEsfNR5Zw4 (io 2015) • https://www.udacity.com/course/viewer#!/c-ud853/ • https://engineering.twitter.com/university/videos/accessibility-for-android-at-twitter • https://bit.ly/2B0JtYr (artigo) • https://github.com/paulacr/Acessibilidade #Acessibilidade
49. CONTATO | PAULA CAROLINE DA ROSA Paula Rosa • @_paulacr • https://medium.com/@Paula.Rosa • paula.mecatronica@gmail.com • https://www.linkedin.com/in/paularosa/ • paula.rosa@arctouch.com (vagas)