Accessible Mobile <br />Scott Williams<br />Office of Institutional Equityswims@umich.edu@swimsy<br />
Slideshare<br />This preso is on SlideShare:http://www.slideshare.net/swimsy<br />
stuffthathappens.com by Eric Burke<br />
I heart mobile<br />As an accessibility advocate, mobile is my best friend<br />Efficient mobile design dovetails with acc...
What framework can we use for mobile accessibility?<br />Web Content Accessibility Guidelines (WCAG 2.0):http://umich.edu/...
WCAG 2.0<br />WCAG 2.0 is technology-agnostic, so it applies to mobile apps and to websites<br />WCAG 2.0 is principle-bas...
Barriers to perception<br />Information conveyed solely with color or sound (beeps)<br />Large pages or large images (peep...
Barriers to operation<br />Mouse required for interaction and navigation<br />Scripting required to operate content<br />S...
Barriers to understanding<br />Long words, long and complex sentences, jargon, U-Speak<br />Spawning new windows without w...
Barriers to robustness<br />Invalid or unsupported markup<br />Scripting required to generate content<br />
Best practices for mobile accessibility<br />
Navigation<br />Allow URL hacking (use index.html files) and keep URL entries short, easy to enter<br />Provide navigation...
Page content<br />Mobile users are usually looking for specific pieces of information, rather than browsing<br />Mobile us...
Page content cont’d<br />No frames<br />Avoid background images<br />Use alt attributes and labels<br />Use percentage and...
iPad accessibility<br />VoiceOver screen reader<br />Zoom (cannot be used with VoiceOver) and large font feature<br />Mono...
iOS app development<br />Standard UIKit controls and views accessible by default<br />UI Accessibility programming interfa...
VoiceOver gestures<br />Tap:  Speak item.<br />Flick right or left:  Select the next or previous item.<br />Two-finger tap...
VoiceOver gestures cont’d<br />Double-tap:  Activate selected item.<br />Twist fingers: Activate rotor, select element<br ...
Resources<br />iPad VoiceOver documentation: http://goo.gl/9vQ7c<br />Accessibility Programming Guide for iOS: http://goo....
Upcoming SlideShare
Loading in...5
×

Accessible mobile

934

Published on

Accessibility of mobile apps and websites

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
934
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Accessible mobile

  1. 1. Accessible Mobile <br />Scott Williams<br />Office of Institutional Equityswims@umich.edu@swimsy<br />
  2. 2. Slideshare<br />This preso is on SlideShare:http://www.slideshare.net/swimsy<br />
  3. 3.
  4. 4.
  5. 5. stuffthathappens.com by Eric Burke<br />
  6. 6. I heart mobile<br />As an accessibility advocate, mobile is my best friend<br />Efficient mobile design dovetails with accessible design<br />Don’t make a separate mobile site—the reincarnation of the text-only site<br />Implement Universal Design with progressive enhancement<br />
  7. 7. What framework can we use for mobile accessibility?<br />Web Content Accessibility Guidelines (WCAG 2.0):http://umich.edu/webaccess/best/quickguide.html<br />Mobile Web Best Practices (MWBP): http://www.w3.org/TR/mobile-bp/<br />Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG): http://www.w3.org/TR/mwbp-wcag/<br />
  8. 8. WCAG 2.0<br />WCAG 2.0 is technology-agnostic, so it applies to mobile apps and to websites<br />WCAG 2.0 is principle-based (POUR):<br />Perceivable<br />Operable<br />Understandable <br />Robust<br />
  9. 9. Barriers to perception<br />Information conveyed solely with color or sound (beeps)<br />Large pages or large images (peephole problem)<br />Multimedia with no captions or transcripts<br />Non-text objects (images, sound, video, form elements) with no text alternative<br />Content formatted using tables or CSS, and reading order not correct when linearized (for example when CSS or tables not rendered)<br />
  10. 10. Barriers to operation<br />Mouse required for interaction and navigation<br />Scripting required to operate content<br />Special plugin required<br />Text input<br />Missing or inappropriate page title<br />Inconsistency between focus (tab) order and logical document content sequence<br />Non-descriptive link labels<br />
  11. 11. Barriers to understanding<br />Long words, long and complex sentences, jargon, U-Speak<br />Spawning new windows without warning user<br />Blinking, moving, scrolling or auto-updating content<br />Automatically playing audio<br />
  12. 12. Barriers to robustness<br />Invalid or unsupported markup<br />Scripting required to generate content<br />
  13. 13. Best practices for mobile accessibility<br />
  14. 14. Navigation<br />Allow URL hacking (use index.html files) and keep URL entries short, easy to enter<br />Provide navigation bar, basic links, on a single line and keep placement consistent<br />Keep IA as narrow and deep as possible<br />Make links descriptive<br />Avoid refreshing, redirection and spawned windows <br />
  15. 15. Page content<br />Mobile users are usually looking for specific pieces of information, rather than browsing<br />Mobile users pay for bandwidth; disabled users less likely to have broadband<br />Avoid lateral or secondary scrolling<br />Use strong contrast<br />Use proper mark-up to convey structure<br />Avoid tables, especially nested<br />
  16. 16. Page content cont’d<br />No frames<br />Avoid background images<br />Use alt attributes and labels<br />Use percentage and relative measures such as em, ex, bolder, larger and thick<br />
  17. 17.
  18. 18. iPad accessibility<br />VoiceOver screen reader<br />Zoom (cannot be used with VoiceOver) and large font feature<br />Mono audio<br />Captions<br />Rotor—a way to selectively access page elements<br />Support for over 30 wireless keyboard Braille displays—out of the box<br />Braille tables for 25+ international languages<br />
  19. 19. iOS app development<br />Standard UIKit controls and views accessible by default<br />UI Accessibility programming interface, which defines a streamlined process for making an iPhone application accessible<br />Tools that help you implement accessibility in your code and test the accessibility of your application<br />More info: http://goo.gl/flbJe<br />
  20. 20. VoiceOver gestures<br />Tap:  Speak item.<br />Flick right or left:  Select the next or previous item.<br />Two-finger tap:  Stop speaking the current item.<br />Two-finger flick up:  Read all, from the top of the screen.<br />Two-finger flick down:  Read all, from the current position.<br />
  21. 21. VoiceOver gestures cont’d<br />Double-tap:  Activate selected item.<br />Twist fingers: Activate rotor, select element<br />Flick up or down:  The effect varies depending on the Rotor Control setting. <br />Three-finger flick up or down:  Scroll one page at a time.<br />Three-finger flick right or left:  Go to the next or previous page (for example, on the Home screen or in Safari).<br />
  22. 22.
  23. 23. Resources<br />iPad VoiceOver documentation: http://goo.gl/9vQ7c<br />Accessibility Programming Guide for iOS: http://goo.gl/flbJe<br />Android accessibility: http://goo.gl/FzOmp<br />http://mobileapps.its.umich.edu/dev/resources#accessibility<br />http://www.w3.org/TR/mwbp-wcag/<br />
  1. A particular slide catching your eye?

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

×