Mobile Accessibility - Challenges and Best Practices

Transcript

1. Shyamala  Prayaga  
3. Do  we  really   need  to   bother   about     MOBILE?  
4. Yes,  it  has  become  integral     part  of  our  life!  
5. So  has  it,  for  them  
6. Are  we  not  being  biased  when  developing   mobile  apps?  
7. BUT  
8. mobile  is  by  definiHon  DISABLING  
9. REMEMBER  THIS?   •  An  electronic   telecommunicaHons   device   •  make  and  receive  calls     •  Send  and  receive   messages  
10. Smaller  screen  size   Poor  light   Glare   Small  fonts   Poor  image  and  colour  support   Small  keyboards   No  mouse   One  hand   Hence….  
11. At  the  same  TIME  
12. mobile  is  by  definiHon   ENABLING  
13. Then   Now   Purpose  is  the  same…  needs  and  requirements  changed     People  want  more      
14. Task  based    GeolocaHon    Camera  integraHon      Calendar  integraHon     Bridges  the  digital  divide    I  can’t  afford  a  computer  but  I  have  a  mobile   Hence….  
15. NEXT  big  quesHon?  
16. WHAT  ARE  DIFFERENT  MOBILE  APPLICATIONS   TYPES?  
17. NaHve  Apps   Mobile  Web   Apps  
18. Hybrid  Apps  
19. Responsive    
20. So  many  mobile  devices,   So  any  applicaHon  types!   How  to  make  them   accessible?  
21. Accessibility…  What  is  that?  
22.   when  your  mobile  applicaHon  is     ready  for…  
23. Diverse  user  model     Sight,  hearing,  mobility,   learning  and  cogniHon  
24. AssisHve  technology  users     Screen  readers,  screen  magnificaHon,  voice  input    
25. Hidden  disability     Chronic  faHgue,  depression,  ME,  fibromyalgia,  verHgo,   nausea,  photo  sensiHvity    
26. Aging       DeterioraHon,  first   Hme  users  
27. Temporary     RSI,  broken  wrists,  back  pain,  short-­‐term  illness    
28. Cultural     Language,  color,   iconography  
29. Technology  and  changes    hardware,  soYware,  access  
30. MOBILE   ACCESSIBILITY   CHALLENGES  
31. Small  devices  
32. Different  shapes  and  sizes  
33. Touch  screens  
34. Lack  of  standardized  UIs  
35. Lack  of  device  expandability  
36. Using  devices  out  “in  the  wild”  
37. Next  big  quesHon,     How  to  make  mobile     apps  accessible  with     so  many  challenges?    
38. First  build  accessibility  into  your  decision     making  process  
39. ESSENTIAL   INGREDIENTS     OF  ACCESSIBILITY  
40. 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  
41. Mobile  Accessibility  Principles,     Guidelines  &  Techniques  
42. 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.  
43. 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?  
44. 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?  
45. 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?  
46. 1   EXAMPLE   Using  label,  hints  and  traits     iOS  
47.     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    
48. 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  
49. 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  
50. 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?  
51. 2   User  who  are  blind  or  colorblind  perceives  color  incorrectly  or  not  at  all   FuncHonal  DisabiliHes  Context   Who  does  it  helps?  
52. 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?  
53. Use  blocks  of  color  rather  than  vague  outlines/shades     2   How  do  we  achieve  that?  
54. •  Contrast  between  foreground  and  background   AA  (minimum):  4.5:1   AAA  (enhanced):  7:1   2  
55. 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?  
56. •  Ensure  that  foreground  and  background  color  combinaHons  provide   sufficient  contrast.   •  Ensure  that  informaHon  conveyed  with  color  is  also  available  without   color   2   Color  guidelines    
57. 3   Minimize  text  input  in  the  interface   Why?   User  has  difficulty  entering  text  so   text  is  entered  incorrectly  or   mistakes  are  made.  
58. 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?  
59. 3   SituaHonal  Disability   Context       •  Device  has  small  keypad   which  has  limited   funcHonality     •  The  context  of  mobile  could   be  unpredictable     Who  does  it  helps?  
60. •  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?  
61. 4   Use  SemanHc  Markup   Why?   If  the  page  markup  is  invalid  this  will  result  in  unpredictable  and   possibly  incomplete  presentaHon  of  the  content.  
62. 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?  
63. 4   SituaHonal  Disability  Context:      Some  older  mobile  browsers  do  not  display  content  with  invalid  markup.   Who  does  it  helps?  
64. 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>  
65. 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?  
66. 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.    
67. 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?  
68. SituaHonal  Disability  Context     Mobile  device  has  small  screen,  so  not  all  inform  can  be  displayed     5   Who  does  it  helps?  
69. 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    
70. 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  
71. 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  
72. SituaHonal  DisabiliHes  Context     Gestures  cannot  be  used  in  most  of  the   outdoor  or  indoor  context   Who  does  it  helps?   6  
73. 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  
74. Ensure  that  it  is  possible  to  zoom  the  interface   7   Why?   Due  to  small  screen,  readability  goes  for  a  toss  
75. 7   Who  does  it  helps?   Zooming  helps  users  who   cannot  read  or  see  Hny   leoers  or  have  sight   disability    
76. HTML   7   How  do  we  achieve  that?   <meta  name="viewport"  value="iniHal-­‐scale=1.0,  minimum-­‐scale=1.0,  maximum-­‐ scale=2.0">  
77. CONCLUSION  
78. Mobile  is  for  every  .  Think  about  it  in  your  next  applicaHon!  
79. 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)  
80. 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)      
82. Shyamala  Prayaga   @pshyama