Inclusive and accessible mobile

3,364 views

Published on

An introduction to mobile accessibility for Mobile Monday, June 11, 2012

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,364
On SlideShare
0
From Embeds
0
Number of Embeds
1,727
Actions
Shares
0
Downloads
19
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Inclusive and accessible mobile

  1. 1. Inclusive  and  Accessible  Mobile   #MobA11y  Henny  Swan  Senior  Usability  and  Accessibility  Specialist,  BBC  henny@iheni.com  
  2. 2. Mobile  and   Diverse  user  model,  age,  technology,  accessibility   temporary   Mobile  is  by  defini9on  disabling   Mobile  is  by  defini9on  enabling   USA  21st  Century  Communica9ons  and   Video  Act  ‘There  are  62  million  poten9ally  disabled  users  in  the  UK’    Gareth  Ford  Williams,  BBC  
  3. 3. Mobile  Accessibility  Guidelines  &   techniques   Coming  soon  
  4. 4. 1.  Support  device  capabiliEes   Content   must  not  break  device  accessibility   Web  and  plaKorm  specific  controls   should  be  used  as  intended   Accessibility  features  must  be   implemented  in  a  way  that  is  not   mutually  exclusive   Device  specific  guidelines  should  be   followed   Device  capability  
  5. 5. 2.  AlternaEves   Provide  alterna9ves  for  content  and   func9onality:   HTML:  alt=“Description”! iOS:  labels,  hints and  traits! Android:  android:contentDescription! Hide  non  content  and  func9onality   objects:   HTML:  alt=“”! iOS  do  not  ‘Enable  Accessibility’     Android  do  not  make  focusable  via   android:focusable ! Provide  appropriate  editorial   Alterna9ves  
  6. 6. 3.  NavigaEon   Provide  consistent,  recognisable   naviga9on   Group  related  links:     Tabindex=“-1”not  supported   a  single  link  ahref  is  supported   Remove  skip  links  on  touch  and  mobile   Links  
  7. 7. Provide  a   logical  focus  order  and  content  order  4.  Structure     Use  headings  (H1  to  H6),  WAI  ARIA   Landmarks,  HTML5  sec9oning  elements   ‘Accordion’  structure  from  desktop  to   mobile   Structure  
  8. 8. Desktop   www.smashingmagazine.com   Structure  
  9. 9. Main  naviga9on  packed  away   Mobile   Banner,  naviga9on   landmarks  can  be   removed  Heading  structure  collapsed   Structure  
  10. 10. 5.  Touch   Visual  cues  to  help  users  navigate  BBC  iPhone  app  for  iPlayer   Audible  cues  for  voice  output  users   ‘BBC  Two   No9fy  screen  readers  of  changes  to   layout   Provide  enough  ‘read-­‐tap  symmetry’   Touch  targets  should  be  large  enough   Touch  
  11. 11. Talk  is  cheap  Screen  reader  tes9ng  on  mobile  
  12. 12. There  is  no  subs9tute  for  tes9ng  with  users  with  disabili9es  on  mobile  
  13. 13. Thank  you  henny@iheni.com  

×