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

Mobile Accessibility - Challenges and Best Practices

shyamala prayaga
February 23, 2013

Mobile Accessibility - Challenges and Best Practices

shyamala prayaga

February 23, 2013

Other Decks in Design


  1. REMEMBER  THIS?   •  An  electronic   telecommunicaHons   device

      •  make  and  receive  calls     •  Send  and  receive   messages  
  2. Smaller  screen  size   Poor  light   Glare   Small

     fonts   Poor  image  and  colour  support   Small  keyboards   No  mouse   One  hand   Hence….  
  3. Then   Now   Purpose  is  the  same…  needs  and

     requirements  changed     People  want  more      
  4. Task  based    GeolocaHon    Camera  integraHon      Calendar

     integraHon     Bridges  the  digital  divide    I  can’t  afford  a  computer  but  I  have  a  mobile   Hence….  
  5. Next  big  quesHon,     How  to  make  mobile  

      apps  accessible  with     so  many  challenges?    
  6. 1.  Web  standards  –  HTML,  CSS,  JavaScript  and  XML  

    2.  Web  browser   3.  Plaborm  Accessibility  API  –  iOS,  Android  and  Blackberry   4.  AssisHve  technology   5.  Plaborm  accessibility  features   6. USERS  
  7. Add  descripHve  text  to  user  interface  controls  in    

    your  applicaHon  -­‐  (images,  sound,  video)         1   Why?   User  cannot  perceive  important  informaHon  or     loses  informaHon  due  to  lack  of  alternaHve/descripHve  text.  
  8. 1   •  User  who  is  blind  cannot  perceive  content

     that  include  non-­‐text  objects.   •  User  whose  browser,  assisHve  technology,  other  user  agent  doesn't  support  object.   Func%onal  Disability  Context:     Who  does  it  helps?  
  9. 1   Situa%onal  Disability  Context:     •  User  can

     be  billed  for  download  volume  so  images  might  be  turned  off  to  save  costs.   •  Some  mobile  user  agents  have  limited  support  for  non-­‐text  objects     •  Some  user  agents  also  shrunk  images  in  size  to  fit  the  device's  screen  which  can  make   images  meaningless   Who  does  it  helps?  
  10. 1   Using  Alt  and  Title   HTML   <img

     src=“meta.png”  alt=“This  is  meta  refresh  image”    />   EXAMPLE   <ImageBuoon          android:id=”@+id/add_note_buoon”          android:src=”@drawable/add_note”          android:contentDescripHon=”@string/add_note”/>   EXAMPLE   Using  android:contentDescripHon   ANDROID   How  do  we  achieve  that?  
  11.     Short  word  or  phrase     Describes  the

     object  or  view  i.e.  ‘Play’     Does  not  describe  the  type  i.e.  ‘Play  buoon’       Trait     Describes  the  type  i.e.  link,  buoon,  checkbox,  selected,  adjustable     More  than  one  trait  can  be  used  i.e.  checkbox,  selected       Hint       Use  sparingly     ExplanaHon  not  a  command  i.e.  ‘Plays  video’  not  ‘Play  video’     Label    
  12. Label:  Done,   back  to….   Trait:  Buoon   Label:

     [Program  name,   Episode  number]   Trait:  StaHc  text   Label:  SubHtles   On/Off   Trait:  Buoon   Label:  Enter/ Exit  Full  screen   Trait:  Buoon   Label:  Play  / Pause   Trait:  Buoon   Label:  [  00.07  of  59.37  ]  swipe  up  or   down  to  adjust   Trait:  Adjustable   Label:  Show/ Hide  more   Trait:  Buoon  
  13. 1   DescripHve  text  guidelines       •  Add

     contextual  informaHon  to  images,  such  as  the  image   name,  to  communicate  the  meaning  and  context  of  the  images     •  Don’t  do  keyword  stuffing  for  alternate/descripHve  text  for  SEO   ranking   •  Localize  text  
  14. 2   Do  not  rely  on  color  alone  to  convey

     meaning   User  perceives  color   incorrectly  or  not  at  all,   and  so  misses  or   misunderstands   informaHon  or  makes   mistakes.   Why?  
  15. 2   User  who  are  blind  or  colorblind  perceives  color

     incorrectly  or  not  at  all   FuncHonal  DisabiliHes  Context   Who  does  it  helps?  
  16. 2   Many  screens  have  limited  color  paleoe  and  color

     difference  is  not  presented.       Device  is  used  in  poor  lighHng  (for  example,  outdoors),  so  colors  are  not  clearly   perceived.   Situa%onal  Disability  Context   Who  does  it  helps?  
  17. 2   Compensates  for  the  loss  in  contrast  that  results

     from     •  moderately  low  visual  acuity,     •  congenital  or  acquired  color  deficiencies,     •  the  loss  of  contrast  sensiHvity  that  typically  accompanies  aging.          Why  4.5:1?          Why  7:1?   Compensates  for  the  loss  in  contrast  sensiHvity  usually  experienced  by     •  users  with  vision  loss  equivalent  to  approximately  20/80  vision.   •  users  with  low  vision  who  do  not  use  assisHve  technology.   •  provides  contrast  enhancement  for  color  deficiency.   HOW  TO?  
  18. •  Ensure  that  foreground  and  background  color  combinaHons  provide  

    sufficient  contrast.   •  Ensure  that  informaHon  conveyed  with  color  is  also  available  without   color   2   Color  guidelines    
  19. 3   Minimize  text  input  in  the  interface   Why?

      User  has  difficulty  entering  text  so   text  is  entered  incorrectly  or   mistakes  are  made.  
  20. 3   FuncHonal  DisabiliHes  Context       User  with

     motor  disability  (for   example,  parHal  paralysis,  hand   tremor,  lack  of  sensiHvity,   coordinaHon)  has  difficulty  entering   informaHon.   Who  does  it  helps?  
  21. 3   SituaHonal  Disability   Context       • 

    Device  has  small  keypad   which  has  limited   funcHonality     •  The  context  of  mobile  could   be  unpredictable     Who  does  it  helps?  
  22. •  Avoid  free  text  entry  where  possible.   3  

    •  Provide  pre-­‐selected  default   values  where  possible.   •  Specify  a  default  text  entry  mode,   language  and/or  input  format,  if   the  device  is  known  to  support  it.   •  Provide  alternaHve  means  to  enter     text  if  possible   •  Use  keyboard  shortcuts  if  supported  by   the  device  and  browser   How  do  we  achieve  that?  
  23. 4   Use  SemanHc  Markup   Why?   If  the

     page  markup  is  invalid  this  will  result  in  unpredictable  and   possibly  incomplete  presentaHon  of  the  content.  
  24. 4   FuncHonal  DisabiliHes  Context:       AssisHve  technology

     or  browser  cannot  handle  invalid  markup.      Easier  for  disabled  users  using  screen  readers  to  understand  the  purpose  of   elements  and  quickly  jump  between  different  types  of  elements.   Who  does  it  helps?  
  25. 4   SituaHonal  Disability  Context:      Some  older  mobile

     browsers  do  not  display  content  with  invalid  markup.   Who  does  it  helps?  
  26. EXAMPLE   HTML   4   How  do  we  achieve

     that?   <form  acHon="hop://example.com/donut"  method="post">   <p>      <input  type="checkbox"  name="flavor"  id="choc"   value="chocolate"  />          <label  for="choc">Chocolate</label><br/>      <input  type="checkbox"  name="flavor"  id="cream"  value="cream"/>          <label  for="cream">Cream  Filled</label><br/>      <input  type="checkbox"  name="flavor"  id="honey"  value="honey"/>          <label  for="honey">Honey  Glazed</label><br/>      <input  type="submit"  value="Purchase  Donuts"/>   </p>   </form>  
  27. EXAMPLE     android.view.accessibility.AccessibilityNodeProvider       4   ANDROID

      This  semanHc  structure  allows  accessibility  services  to  present  a  more   useful  interacHon  model  for  users  who  are  visually  impaired.   How  do  we  achieve  that?  
  28. 5   Have  a  concise  page  content  and  page  size

      Why?   User  only  sees  small   areas  at  a  Hme,  is   unable  to  relate   different  areas  of  a   page,  and  so  becomes   disoriented  or  has  to   scroll  excessively.    
  29. 5   FuncHonal  DisabiliHes  Context     User  with  restricted

     field  of  vision  or  using   screen  magnifier  gets  only  small  part  of  page  or   image  at  a  Hme.   Who  does  it  helps?  
  30. SituaHonal  Disability  Context     Mobile  device  has  small  screen,

     so  not  all  inform  can  be  displayed     5   Who  does  it  helps?  
  31. How  do  we  achieve  that?   5   •  Clear

     and  concise  language,  as  mobile  users  are  looking  for  a  quick  access  to   informaHon.     •  Limit  scrolling  to  one  axis  throughout  the  app  (verHcal  or  horizontal  axis)  a   •  Avoid  image  larger  than  the  screen  size   •  Divide  pages  into  usable  but  limited  size  porHons.   •  PosiHon  important  things  higher  up  and  less  important  things  lower  down  in   scrolling  views     •  Create  large  clickable  areas    
  32. Do  not  insert  funcHons  that  can  only  be  managed  

    via  gestures.  Always  add  a  buoon/link     6   Why?   •  Most  gestures  are  not   intuiHve     •  Not  recognized  by  many   users  
  33. FuncHonal  DisabiliHes  Context   •  Blind  users  cannot  use  gestures

     at  all   •  Users  with  temporary  disability  cannot  use  gestures   •  Gestures  are  guess  work  for  most  users   Who  does  it  helps?   6  
  34. SituaHonal  DisabiliHes  Context     Gestures  cannot  be  used  in

     most  of  the   outdoor  or  indoor  context   Who  does  it  helps?   6  
  35. How  do  we  achieve  that?   6   •  Use

     gestures  which  can  be  used  even  with  buoon  or  link   •  Don’t  rely  completely  on  gestures  for  the  interacHon,  have   alternate  interacHve  mechanisms  
  36. Ensure  that  it  is  possible  to  zoom  the  interface  

    7   Why?   Due  to  small  screen,  readability  goes  for  a  toss  
  37. 7   Who  does  it  helps?   Zooming  helps  users

     who   cannot  read  or  see  Hny   leoers  or  have  sight   disability    
  38. HTML   7   How  do  we  achieve  that?  

    <meta  name="viewport"  value="iniHal-­‐scale=1.0,  minimum-­‐scale=1.0,  maximum-­‐ scale=2.0">  
  39. Guidelines  related  to  mobile  accessibility   Web  Content  Accessibility  Guidelines

     (WCAG)   Mobile  Web  Best  PracHces  (MWBP)   RelaHonship  between  WCAG  and  MWBP   Widget  Accessibility  Guidelines   Widget  Usability  Best  PracHces   Mobile  Website  Guidelines  (University  of  AusHn)  
  40. Device  specific  mobile  accessibility   guidelines   Android   Designing

     for  Accessibility   Android  Accessibility     Blackberry  Best  PracHce  Designing  Accessible  ApplicaHons     iOS:  Accessibility  Programming  Guide     Nokia/Symbian:  User  Experience  checklist  for  Touch  and  Keypad  (PDFs)