Shyamala	  Prayaga	  
Do	  we	  really	    need	  to	    bother	       about	  	   MOBILE?	  
Yes,	  it	  has	  become	  integral	  	  part	  of	  our	  life!	  
So	  has	  it,	  for	  them	  
Are	  we	  not	  being	  biased	  when	  developing	                          mobile	  apps?	  
BUT	  
mobile	  is	  by	  definiHon	  DISABLING	  
REMEMBER	  THIS?	                          •  An	  electronic	                             telecommunicaHons	             ...
Hence….	  Smaller	  screen	  size	  Poor	  light	  Glare	  Small	  fonts	  Poor	  image	  and	  colour	  support	  Small	 ...
At	  the	  same	  TIME	  
mobile	  is	  by	  definiHon	  ENABLING	  
Now	               Then	  Purpose	  is	  the	  same…	  needs	  and	  requirements	  changed	  	  People	  want	  more	  	 ...
Hence….	  Task	  based	       	  GeolocaHon	       	  Camera	  integraHon	  	       	  Calendar	  integraHon	  	  Bridges	...
NEXT	  big	  quesHon?	  
WHAT	  ARE	  DIFFERENT	  MOBILE	  APPLICATIONS	                        TYPES?	  
Mobile	  Web	  NaHve	  Apps	                        Apps	  
Hybrid	  Apps	  
Responsive	  	  
So	  many	  mobile	  devices,	  So	  any	  applicaHon	  types!	     How	  to	  make	  them	     accessible?	  
Accessibility…	  What	  is	  that?	  
 when	  your	  mobile	  applicaHon	  is	  	  ready	  for…	  
Diverse	  user	  model	  	  Sight,	  hearing,	  mobility,	  learning	  and	  cogniHon	  
AssisHve	  technology	  users	  	  Screen	  readers,	  screen	  magnificaHon,	  voice	  input	  	  
Hidden	  disability	  	  Chronic	  faHgue,	  depression,	  ME,	  fibromyalgia,	  verHgo,	  nausea,	  photo	  sensiHvity	  	  
Aging	  	  	  DeterioraHon,	  first	  Hme	  users	  
Temporary	  	  RSI,	  broken	  wrists,	  back	  pain,	  short-­‐term	  illness	  	  
Cultural	  	  Language,	  color,	  iconography	  
Technology	  and	  changes	  	  hardware,	  soYware,	  access	  
MOBILE	  ACCESSIBILITY	  CHALLENGES	  
Small	  devices	  
Different	  shapes	  and	  sizes	  
Touch	  screens	  
Lack	  of	  standardized	  UIs	  
Lack	  of	  device	  expandability	  
Using	  devices	  out	  “in	  the	  wild”	  
Next	  big	  quesHon,	  	  How	  to	  make	  mobile	  	  apps	  accessible	  with	  	  so	  many	  challenges?	  	  
First	  build	  accessibility	  into	  your	  decision	  	  making	  process	  
ESSENTIAL	  INGREDIENTS	  	  OF	  ACCESSIBILITY	  
1.  Web	  standards	  –	  HTML,	  CSS,	  JavaScript	  and	  XML	  2.  Web	  browser	  3.  Plaborm	  Accessibility	  API	  ...
Mobile	  Accessibility	  Principles,	  	    Guidelines	  &	  Techniques	  
Add	  descripHve	  text	  to	  user	  interface	  controls	  in	  	     1	        your	  applicaHon	  -­‐	  (images,	  sou...
1	                                                                                            Who	  does	  it	  helps?	   ...
1	                                                                                               Who	  does	  it	  helps?	...
How	  do	  we	  achieve	  that?	      1	  Using	  Alt	  and	  Title	                                                      ...
1	  Using	  label,	  hints	  and	  traits	  	     iOS	    EXAMPLE	  
      Label	  	  	  Short	  word	  or	  phrase	  	  Describes	  the	  object	  or	  view	  i.e.	  ‘Play’	  	  Does	  not	 ...
Label:	  Done,	     Label:	  [Program	  name,	                  Label:	  SubHtles	     Label:	  Enter/back	  to….	        ...
1	        DescripHve	  text	  guidelines	  	  	  •       Add	  contextual	  informaHon	  to	  images,	  such	  as	  the	  ...
2	     Do	  not	  rely	  on	  color	  alone	  to	  convey	  meaning	                                                      ...
2	                                                                                      Who	  does	  it	  helps?	  FuncHon...
2	                                                                            Who	  does	  it	  helps?	  Situa%onal	  Disa...
2	                    How	  do	  we	  achieve	  that?	  Use	  blocks	  of	  color	  rather	  than	  vague	  outlines/shade...
2	  •  Contrast	  between	  foreground	  and	  background	      AA	  (minimum):	  4.5:1	      AAA	  (enhanced):	  7:1	  
2	                                          HOW	  TO?	                               	  	  	  	  Why	  4.5:1?	     Compens...
2	           Color	  guidelines	  	  •  Ensure	  that	  foreground	  and	  background	  color	  combinaHons	  provide	    ...
3	     Minimize	  text	  input	  in	  the	  interface	                                                            Why?	   ...
3	                                                    Who	  does	  it	  helps?	  FuncHonal	  DisabiliHes	  Context	  	  	 ...
3	                                       Who	  does	  it	  helps?	  SituaHonal	  Disability	  Context	  	  	  •  Device	  ...
3	                          How	  do	  we	  achieve	  that?	  •  Provide	  alternaHve	  means	  to	  enter	  	     text	  ...
4	         Use	  SemanHc	  Markup	                                                                                        ...
4	                                                                                          Who	  does	  it	  helps?	  Fun...
4	                                                                                       Who	  does	  it	  helps?	  SituaH...
4	                    How	  do	  we	  achieve	  that?	                                                                    ...
4	                        How	  do	  we	  achieve	  that?	                                                                ...
5	         Have	  a	  concise	  page	  content	  and	  page	  size	  User	  only	  sees	  small	                          ...
5	                                                                                Who	  does	  it	  helps?	  FuncHonal	  D...
5	                                                                                       Who	  does	  it	  helps?	  SituaH...
5	                           How	  do	  we	  achieve	  that?	  •  Clear	  and	  concise	  language,	  as	  mobile	  users	...
Do	  not	  insert	  funcHons	  that	  can	  only	  be	  managed	  6	     via	  gestures.	  Always	  add	  a	  buoon/link	 ...
6	                                                                    Who	  does	  it	  helps?	  FuncHonal	  DisabiliHes	 ...
6	                                                                    Who	  does	  it	  helps?	  SituaHonal	  DisabiliHes	...
6	                      How	  do	  we	  achieve	  that?	  •  Use	  gestures	  which	  can	  be	  used	  even	  with	  buoo...
7	        Ensure	  that	  it	  is	  possible	  to	  zoom	  the	  interface	                                               ...
7	                                           Who	  does	  it	  helps?	  Zooming	  helps	  users	  who	  cannot	  read	  or...
7	                    How	  do	  we	  achieve	  that?	                                                                    ...
CONCLUSION	  
Mobile	  is	  for	  every	  .	  Think	  about	  it	  in	  your	  next	  applicaHon!	  
Guidelines	  related	  to	  mobile	  accessibility	  Web	  Content	  Accessibility	  Guidelines	  (WCAG)	  Mobile	  Web	  ...
Device	  specific	  mobile	  accessibility	  guidelines	   Android	   Designing	  for	  Accessibility	   Android	  Accessib...
Shyamala	  Prayaga	  @pshyama	  
Mobile accessibility   challenges and best practices v2
Mobile accessibility   challenges and best practices v2
Upcoming SlideShare
Loading in …5
×

Mobile accessibility challenges and best practices v2

1,781
-1

Published on

3 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,781
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
3
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile accessibility challenges and best practices v2

  1. 1. Shyamala  Prayaga  
  2. 2. Do  we  really   need  to   bother   about     MOBILE?  
  3. 3. Yes,  it  has  become  integral    part  of  our  life!  
  4. 4. So  has  it,  for  them  
  5. 5. Are  we  not  being  biased  when  developing   mobile  apps?  
  6. 6. BUT  
  7. 7. mobile  is  by  definiHon  DISABLING  
  8. 8. REMEMBER  THIS?   •  An  electronic   telecommunicaHons   device   •  make  and  receive  calls     •  Send  and  receive   messages  
  9. 9. Hence….  Smaller  screen  size  Poor  light  Glare  Small  fonts  Poor  image  and  colour  support  Small  keyboards  No  mouse  One  hand  
  10. 10. At  the  same  TIME  
  11. 11. mobile  is  by  definiHon  ENABLING  
  12. 12. Now   Then  Purpose  is  the  same…  needs  and  requirements  changed    People  want  more      
  13. 13. Hence….  Task  based    GeolocaHon    Camera  integraHon      Calendar  integraHon    Bridges  the  digital  divide    I  can’t  afford  a  computer  but  I  have  a  mobile  
  14. 14. NEXT  big  quesHon?  
  15. 15. WHAT  ARE  DIFFERENT  MOBILE  APPLICATIONS   TYPES?  
  16. 16. Mobile  Web  NaHve  Apps   Apps  
  17. 17. Hybrid  Apps  
  18. 18. Responsive    
  19. 19. So  many  mobile  devices,  So  any  applicaHon  types!   How  to  make  them   accessible?  
  20. 20. Accessibility…  What  is  that?  
  21. 21.  when  your  mobile  applicaHon  is    ready  for…  
  22. 22. Diverse  user  model    Sight,  hearing,  mobility,  learning  and  cogniHon  
  23. 23. AssisHve  technology  users    Screen  readers,  screen  magnificaHon,  voice  input    
  24. 24. Hidden  disability    Chronic  faHgue,  depression,  ME,  fibromyalgia,  verHgo,  nausea,  photo  sensiHvity    
  25. 25. Aging      DeterioraHon,  first  Hme  users  
  26. 26. Temporary    RSI,  broken  wrists,  back  pain,  short-­‐term  illness    
  27. 27. Cultural    Language,  color,  iconography  
  28. 28. Technology  and  changes    hardware,  soYware,  access  
  29. 29. MOBILE  ACCESSIBILITY  CHALLENGES  
  30. 30. Small  devices  
  31. 31. Different  shapes  and  sizes  
  32. 32. Touch  screens  
  33. 33. Lack  of  standardized  UIs  
  34. 34. Lack  of  device  expandability  
  35. 35. Using  devices  out  “in  the  wild”  
  36. 36. Next  big  quesHon,    How  to  make  mobile    apps  accessible  with    so  many  challenges?    
  37. 37. First  build  accessibility  into  your  decision    making  process  
  38. 38. ESSENTIAL  INGREDIENTS    OF  ACCESSIBILITY  
  39. 39. 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  
  40. 40. Mobile  Accessibility  Principles,     Guidelines  &  Techniques  
  41. 41. Add  descripHve  text  to  user  interface  controls  in     1   your  applicaHon  -­‐  (images,  sound,  video)         Why?  User  cannot  perceive  important  informaHon  or    loses  informaHon  due  to  lack  of  alternaHve/descripHve  text.  
  42. 42. 1   Who  does  it  helps?   Func%onal  Disability  Context:    •  User  who  is  blind  cannot  perceive  content  that  include  non-­‐text  objects.  •  User  whose  browser,  assisHve  technology,  other  user  agent  doesnt  support  object.  
  43. 43. 1   Who  does  it  helps?   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  devices  screen  which  can  make   images  meaningless  
  44. 44. How  do  we  achieve  that?   1  Using  Alt  and  Title   HTML   EXAMPLE   <img  src=“meta.png”  alt=“This  is  meta  refresh  image”    />  Using  android:contentDescripHon   ANDROID   EXAMPLE   <ImageBuoon          android:id=”@+id/add_note_buoon”          android:src=”@drawable/add_note”          android:contentDescripHon=”@string/add_note”/>  
  45. 45. 1  Using  label,  hints  and  traits     iOS   EXAMPLE  
  46. 46.   Label      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’    
  47. 47. Label:  Done,   Label:  [Program  name,   Label:  SubHtles   Label:  Enter/back  to….   Episode  number]   On/Off   Exit  Full  screen  Trait:  Buoon   Trait:  StaHc  text   Trait:  Buoon   Trait:  Buoon  Label:  Play  / Label:  [  00.07  of  59.37  ]  swipe  up  or   Label:  Show/Pause   down  to  adjust   Hide  more  Trait:  Buoon   Trait:  Adjustable   Trait:  Buoon  
  48. 48. 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  
  49. 49. 2   Do  not  rely  on  color  alone  to  convey  meaning   Why?   User  perceives  color   incorrectly  or  not  at  all,   and  so  misses  or   misunderstands   informaHon  or  makes   mistakes.  
  50. 50. 2   Who  does  it  helps?  FuncHonal  DisabiliHes  Context  User  who  are  blind  or  colorblind  perceives  color  incorrectly  or  not  at  all  
  51. 51. 2   Who  does  it  helps?  Situa%onal  Disability  Context  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.  
  52. 52. 2   How  do  we  achieve  that?  Use  blocks  of  color  rather  than  vague  outlines/shades    
  53. 53. 2  •  Contrast  between  foreground  and  background   AA  (minimum):  4.5:1   AAA  (enhanced):  7:1  
  54. 54. 2   HOW  TO?          Why  4.5:1?   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  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.  
  55. 55. 2   Color  guidelines    •  Ensure  that  foreground  and  background  color  combinaHons  provide   sufficient  contrast.  •  Ensure  that  informaHon  conveyed  with  color  is  also  available  without   color  
  56. 56. 3   Minimize  text  input  in  the  interface   Why?   User  has  difficulty  entering  text  so   text  is  entered  incorrectly  or   mistakes  are  made.  
  57. 57. 3   Who  does  it  helps?  FuncHonal  DisabiliHes  Context      User  with  motor  disability  (for  example,  parHal  paralysis,  hand  tremor,  lack  of  sensiHvity,  coordinaHon)  has  difficulty  entering  informaHon.  
  58. 58. 3   Who  does  it  helps?  SituaHonal  Disability  Context      •  Device  has  small  keypad   which  has  limited   funcHonality    •  The  context  of  mobile  could   be  unpredictable    
  59. 59. 3   How  do  we  achieve  that?  •  Provide  alternaHve  means  to  enter     text  if  possible  •  Avoid  free  text  entry  where  possible.  •  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.  •  Use  keyboard  shortcuts  if  supported  by   the  device  and  browser  
  60. 60. 4   Use  SemanHc  Markup   Why?   If  the  page  markup  is  invalid  this  will  result  in  unpredictable  and   possibly  incomplete  presentaHon  of  the  content.  
  61. 61. 4   Who  does  it  helps?  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.  
  62. 62. 4   Who  does  it  helps?  SituaHonal  Disability  Context:      Some  older  mobile  browsers  do  not  display  content  with  invalid  markup.  
  63. 63. 4   How  do  we  achieve  that?   HTML  EXAMPLE   <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>  
  64. 64. 4   How  do  we  achieve  that?   ANDROID   EXAMPLE     android.view.accessibility.AccessibilityNodeProvider      This  semanHc  structure  allows  accessibility  services  to  present  a  more  useful  interacHon  model  for  users  who  are  visually  impaired.  
  65. 65. 5   Have  a  concise  page  content  and  page  size  User  only  sees  small   Why?  areas  at  a  Hme,  is  unable  to  relate  different  areas  of  a  page,  and  so  becomes  disoriented  or  has  to  scroll  excessively.    
  66. 66. 5   Who  does  it  helps?  FuncHonal  DisabiliHes  Context    User  with  restricted  field  of  vision  or  using  screen  magnifier  gets  only  small  part  of  page  or  image  at  a  Hme.  
  67. 67. 5   Who  does  it  helps?  SituaHonal  Disability  Context    Mobile  device  has  small  screen,  so  not  all  inform  can  be  displayed    
  68. 68. 5   How  do  we  achieve  that?  •  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    
  69. 69. Do  not  insert  funcHons  that  can  only  be  managed  6   via  gestures.  Always  add  a  buoon/link     Why?   •  Most  gestures  are  not   intuiHve     •  Not  recognized  by  many   users  
  70. 70. 6   Who  does  it  helps?  FuncHonal  DisabiliHes  Context  •  Blind  users  cannot  use  gestures  at  all  •  Users  with  temporary  disability  cannot  use  gestures  •  Gestures  are  guess  work  for  most  users  
  71. 71. 6   Who  does  it  helps?  SituaHonal  DisabiliHes  Context    Gestures  cannot  be  used  in  most  of  the  outdoor  or  indoor  context  
  72. 72. 6   How  do  we  achieve  that?  •  Use  gestures  which  can  be  used  even  with  buoon  or  link  •  Don’t  rely  completely  on  gestures  for  the  interacHon,  have   alternate  interacHve  mechanisms  
  73. 73. 7   Ensure  that  it  is  possible  to  zoom  the  interface   Why?  Due  to  small  screen,  readability  goes  for  a  toss  
  74. 74. 7   Who  does  it  helps?  Zooming  helps  users  who  cannot  read  or  see  Hny  leoers  or  have  sight  disability    
  75. 75. 7   How  do  we  achieve  that?   HTML  <meta  name="viewport"  value="iniHal-­‐scale=1.0,  minimum-­‐scale=1.0,  maximum-­‐scale=2.0">  
  76. 76. CONCLUSION  
  77. 77. Mobile  is  for  every  .  Think  about  it  in  your  next  applicaHon!  
  78. 78. 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)  
  79. 79. 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)      
  80. 80. Shyamala  Prayaga  @pshyama  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×