Android Accessibility - Bay Area Android Meetup

http://www.meetup.com/bayareaandroid/events/220644234/
http://www.meetup.com/svmobiledev/events/220644236/

Transcript

1. Accessibility  ‘a11y’   Delivering  next  level  User  Experience   SV  Mobile  Developer  &  Design  meetup   Bay  Area  Android  Developer  meetup     April  1,2015   San  Francisco,  CA   Suyash  Joshi  -­‐  @suyashcjoshi   Enterprise  Mobile  Developer   Meetup  Co-­‐Organizer  
2. 4  Step  to  accessibility  proof   U   • Understand  Accessibility   D   • Design  for  Accessibility   C   • Code  for  Accessibility   T   • Test  for  Accessibility  
5. Disability  Demographics   Mild   Disabili Ies   Visually   Impaired  (Blind,   Low  Vision  etc.)   Age   related   disability   Physical     Disability   Deaf  
7. FACT:  Mark  Zuckerberg  is  red-­‐green  color-­‐blind,     which  is  part  of  the  reason  why  the  Facebook   we  know  today  is  blue!  
9. Avoid  LiIgaIon  –  It’s  the  Law*   *SecIon  508  is  applicable  in  the  United  States  -­‐  ww.secIon508.gov  
10. Care  about  growth?  -­‐  User  AcquisiIon   h_p://www.longtail.com/about.html  
11. It’s  the  right  thing  to  do  J  
12. Live  Demo  Break  
13. The  Big  3  –Accessibility  tools     Switch Access    Braille   Access     TalkBack  
14. MagnificaIon  gestures     Large  text     Power  bu_on  ends  call     Auto-­‐rotate  screen   Speak  passwords     Accessibility  shortcut     Text-­‐to-­‐speech  output     Touch-­‐and-­‐hold  delay     CapIons  (Android  4.4+)   AddiGonal  tools  /  services  
15. Code  for  Accessibility   U   • Understand  Accessibility   C   • Code  for  Accessibility   D   • Design  for  Accessibility   T   • Test  for  Accessibility  
16. Making  your  UI  accessible   Accessible   Widgets   Accessible     Layouts   Accessible   Custom   Views   ‘low  hanging  fruits  first’  
17. Accessible  Widgets-­‐   “setContentDescripIon”   <ImageBu_on          android:id="@+id/add_note_bu_on"          android:src="@drawable/add_note"          android:contentDescripGon="@string/add_note"  />     <ImageView                  android:contentDescripGon="Save"  />     //  In  Java  (Dynamically)  on  any  Object  of  type  View,  implement:     public  void  setContentDescripIon  (CharSequence  contentDescripIon)    
18. setContentDescripIon:  Java   <Bu_on  android:id="@+id/btnMute"            android:layout_height="wrap_content"            android:layout_width="wrap_content"            android:text="@string/mute"            android:onClick="toggle"  />     public  void  toggle(View  v)  {        if  (v.isPressed())  {            view.setContentDescripIon("Muted");        }        else        {            view.setContentDescripIon("Mute");        }}  
19. Accessible  Widget:  EditText   <EditText          android:id="@+id/password”                  android:inputType=“number”          android:hint="Password"            android:layout_height="wrap_content"            android:layout_width="wrap_content">   </EditText>     •  Hint  Text  is  needed   •  Correct  inputType  helps  the  user  with  the  correct  keyboard  shown  
20. Accessible  Layout  -­‐  RadioGroup   <RadioGroup  android:layout_width="match_parent"  android:id="@+id/ radioGroup_1"  android:orientaIon="horizontal”>          <RadioBu_on      android:layout_height="wrap_content”      android:id="@+id/radio_0"      android:checked="true"  android:text="OpIon  A"    android:contentDescripIon="Choose  OpIon  -­‐  OpIon  A">          </RadioBu_on>          <RadioBu_on      android:layout_height="wrap_content”      android:id="@+id/radio_1"      android:text="OpIon  B"     ✓  
21. Accessible  Widget-­‐  RadioBu_ons   <RadioBu_on     android:layout_height="wrap_content"     android:id="@+id/radio_0"     android:checked="true"     android:text="OpIon  A"     android:contentDescripIon="OpIon  A">   </RadioBu_on>   <RadioBu_on     android:layout_height="wrap_content"     android:id="@+id/radio_1"  android:text="OpIon  B"   android:contentDescripIon="OpIon  B">   </RadioBu_on>   ✗  
22. Accessible  Widget–  semanIc  widget   <Bu_on            android:background="@drawable/login_img”          android:contentDescripIon=“login”   </Bu_on>     <ImageView          android:background="@drawable/login_img”          android:contentDescripIon=“@string/login”   </ImageView>     ✓   ✗  
23. Managing  Focus  Order:  Key  a_ributes   •  android:nextFocusDown  Defines  the  next  view  to  receive  focus   when  the  user  navigates  down.     •  android:nextFocusLet  Defines  the  next  view  to  receive  focus  when   the  user  navigates  let.   •  android:nextFocusRight  Defines  the  next  view  to  receive  focus  when   the  user  navigates  right.   •  android:nextFocusUp  Defines  the  next  view  to  receive  focus  when   the  user  navigates  up.    
24. Accessible  Layout:  Focus  Order     <LinearLayout        android:orientaIon="horizontal”  >                  <EditText  android:id="@+id/edit"                android:nextFocusDown=”@+id/text”  />            <TextView                    android:id="@+id/text"                  android:focusable=”true”                  android:text="Hello,  I  am  a  focusable  TextView"                  android:nextFocusUp=”@id/edit”/>     </LinearLayout>  
25. Accessible  Custom  Views:  4  things   1.  Handle  direcIonal  controller  clicks   2.  Implement  accessibility  API  methods   3.  Send  AccessibilityEvent  objects  specific  to  your   custom  view   4.  Populate  AccessibilityEvent  and  AccessibilityNodeInfo   for  your  view  
26. Handle  Touch  Events:  When   touch  is  removed     //A  touch  event  listener  a_ached  to  an  element  to  perform  an  acIon  on  ACTION_UP     @Override   public  boolean  onTouchEvent(MoIonEvent  event)  {        int  acIon  =  event.getAcIon();        if(acIon  ==  MoIonEvent.ACTION_UP)  //  trigger  touch  on  ACTION_UP      {        ...      }          return  false;   }    
27. Custom  View:  example   Note:  If  your  custom  view  has  disInct  clickable  regions,  such  as  a  custom  calendar  view,  you   must  implement  a  virtual  view  hierarchy  by  overriding  getAccessibilityNodeProvider()  in   your  custom  view  in  order  to  be  compaIble  with  accessibility  services.  
28. public  AccessibilityNodeProvider   getAccessibilityNodeProvider  ()   •  Gets  the  provider  for  managing  a  virtual  view   hierarchy  rooted  at  this  View  and  reported  to   AccessibilityServices  that  explore  the  window   content   •  If  this  method  returns  an  instance,  this  instance  is   responsible  for  managing  AccessibilityNodeInfos   describing  the  virtual  sub-­‐tree  rooted  at  this  View   including  the  one  represenGng  the  View  itself.    
29. Sending  Accessibility  Events   •  dispatchPopulateAccessibilityEvent()   •  onPopulateAccessibilityEvent()   •  onIniIalizeAccessibilityEvent()   •  onIniIalizeAccessibilityNodeInfo()   Detailed  docs:  PopulaIng  Accessibility  Events  
30. Sending  Acc  events:  Custom  View   StarIng  with  API  Level  4  View  Class  provides:   •  TYPE_VIEW_CLICKED   •  TYPE_VIEW_LONG_CLICKED   •  TYPE_VIEW_FOCUSED   StarIng  with  API  Level  14  addiIonal  even  types:   •  TYPE_VIEW_SCROLLED   •  TYPE_VIEW_HOVER_ENTER  -­‐  Explore  by  Touch   •  TYPE_VIEW_HOVER_EXIT  -­‐  Explore  by  Touch   Detailed  docs:  PopulaIng  Accessibility  Events  
31. Fire  Accessibility  Events:  Custom  View   //implemenIng  a  custom  slider  bar  that  allows  a  user  to  select  a  numeric  value  by  pressing  the   let  or  right  arrows     @Override   public  boolean  onKeyUp  (int  keyCode,  KeyEvent  event)     {          if  (keyCode  ==  KeyEvent.KEYCODE_DPAD_LEFT)            {                  mCurrentValue-­‐-­‐;                  sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);                  return  true;          }          ...   }   Detailed  docs:  PopulaIng  Accessibility  Events  
32. Handle  Focus  :  Custom  Views   <CustomBu_on     android:layout_height="wrap_content"   android:layout_width="wrap_content"   android:background="@drawable/bu_on">   </CustomBu_on>       //  the  bu_on.xml  file  in  res/drawable  
33. Handle  Focus  :  Custom  Views   <?xml  version="1.0"  encoding="uy-­‐8"?>   <selector  xmlns:android="h_p://schemas.android.com/apk/res/android">            <item  android:state_pressed="true"                      android:drawable="@drawable/bu_on_pressed"  />          <item  android:state_focused="true"                      android:drawable="@drawable/bu^on_focused"  />          <item  android:state_hovered="true"                      android:drawable="@drawable/bu_on_focused"  />          <item  android:drawable="@drawable  bu_on_normal"  />     </selector>  
34. Design  for  Accessibility   U   • Understand  Accessibility   C   • Code  for  Accessibility   D   • Design  for  Accessibility   T   • Test  for  Accessibility  
35. Design  for  Everyone  
36. Accessible  +  Usable  Design  =  Universal  design  
37. Make  navigaIon  intuiIve   Example:  AcIon  Bar    +  NavigaIon  Drawer    =    Common  Android  IntuiIve  NavigaIon  
38. Minimum  Touch  Target  :  48dp  (mdpi)   •  48dp  translate  to  a  physical  size  of  about  9mm.   •  This  is  comfortably  in  the  range  of  recommended   target  sizes  (7-­‐10  mm)  for  touchscreen  objects  and   users  will  be  able  to  reliably  and  accurately  target   them  with  their  fingers.  
39. Minimum  Touch  Target  :  48dp  (mdpi)   <ImageView  ...          Android:id="@+id/addBookmark"            android:layout_width="50"          android:layout_height="50">   </ImageView>       //  Java  code  (Dynamically)     LinearLayout.LayoutParams  layoutParams  =  new  LinearLayout.LayoutParams  (50,  50);     addBookmark.setLayoutParams(layoutParams);    
40. Label  UI  Elements  –  “setContentDescripIon”   1.  “group”   2.  “all  contacts”   3.  “favorites”   4.  “search”   5.  “acIon  overflow   bu_on”   6.  when  starred:  “remove   from  favorites”     7.  when  not  starred:  “add   to  favorites”   8.  “acIon  overflow   bu_on”   9.  “text  message”  
41. Proper  Spacing  between  elements   <ImageBu_on            android:id="@+id/addBookmarkBtn"            android:layout_margin="1"          android:layout_height="wrap_content"          android:layout_width="wrap_content"          android:src="@drawable/addBMK"  />       //  Java  Code  (Dynamically)     LinearLayout  layout  =  new  LinearLayout(...);   LinearLayout.LayoutParams  params  =  new  LinearLayout.LayoutParams(...);   params.setMargins(1,  1,  1,  1);   ImageBu_on  addBookmarkBtn  =  new  ImageBu_on(...);   layout.addView(addBookmarkBtn,  params);    
42. Zooming  /  Scaling  Text:  sp  over  dp   <TextView            android:layout_width="match_parent"          android:layout_height="wrap_content"          android:textSize="20sp"  />     Read  more:  h_p://developer.android.com/guide/pracIces/screens_support.html   Let  raGo  be  constant,  looking  at  the  following  2  equaIons:     •  dp  =  px  *  raIo   •  sp  =  px  *  raIo  *  scale  or  sp  =  dp  *  scale     Scale  can  be  changed  by  users  under  device  se~ngs    
43. Luminosity  Contrast  RaIo  -­‐  Text   •  Text  that  is  the  same  color  as  the  background  is  hard  to  read.  Text  with  too  much   contrast  can  dazzle  and  also  be  hard  to  read.  This  is  especially  true  of  light-­‐colored   text  against  dark  backgrounds.   •  Text  should  maintain  a  minimum  contrast  raGo  of  at  least  4.5:1  (calculated  based   on  luminance  values)  for  legibility.     •  A  raGo  of  7:1  is  preferred.   Read  more:  h_p://www.google.com/design/spec/style/typography.html#typography-­‐standard-­‐styles  
44. Luminosity  Contrast  RaIo  -­‐  Text  
45. Test  for  Accessibility   U   • Understand  Accessibility   C   • Code  for  Accessibility   D   • Design  for  Accessibility   T   • Test  for  Accessibility  
46. Key  ObjecGves:   •  Set  up  and  use  the  applicaIon  without  sighted  assistance     •  All  task  workflows  in  the  applicaIon  can  be  easily  navigated  using   direcIonal  controls  and  provide  clear  and  appropriate  feedback  
47. Test  Audible  Feedback:  Talkback   Enable  TalkBack:  Se~ngs  >  Accessibility  >  TalkBack     Verify  that  user  interface  controls  that  provide  informaIon  (graphics  or   text)  or  allow  user  acIon  have  clear  and  accurate  audio  descripGons   when  TalkBack  is  enabled  and  controls  are  focused  
48. TesGng  Audible  Feedback:     Explore  by  Touch   Enable  Explore  by  Touch:     Se~ngs  >  Accessibility  >  TalkBack     On  Android  4.0  and  older:     Se~ngs  >  Accessibility  >  Explore  By  Touch       1.  Verify  that  user  interface  controls  that  provide  informaIon   (graphics  or  text)  or  allow  user  acIon  have  clear  and  accurate  audio   descripGons  when  TalkBack  is  enabled  and  controls  are  focused  
49. Test  Focus  NavigaGon   Enable  Talkback:     Se~ngs  >  Accessibility  >  TalkBack     On  Android  4.0  and  older:     Se~ngs  >  Accessibility  >  Explore  By  Touch         1.  Use  direcIonal  controls  to  move  focus  between  applicaIon  layout   elements.  
50. Test  Gesture  NavigaGon   Enable  NavigaIon  Control:     For  D  Pad  :  Use  the  one  provided  in  the  Emulator  in  lieu  of  device       1.  Verify  that  app-­‐specific  gestures,  such  as  zooming  images,  scrolling   lists,  swiping  between  pages  or  navigaIng  carousel  controls   conInue  to  work  when  TalkBack  is  enabled.   2.  If  these  gestures  do  not  funcIon,  then  an  alternaIve  interface  for   these  acIons  must  be  provided.  
51. Top  4  Takeaways:   Think  HolisIc   Design   90%  Most  people  are   not  chronically   disabled   10  %   Always  test   manually   Custom  views:  read   docs  and  play  with   sample  apps   51  
52. o  h^p://www.bbc.co.uk/guidelines/futuremedia/accessibility/ mobile       o  h^p://developer.android.com/guide/topics/ui/accessibility/ index.html             Resources  
53. Thank  You   @suyashcjoshi