Your SlideShare is downloading. ×
0
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Accessible mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accessible mobile

907

Published on

Accessibility of mobile apps and websites

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
907
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Accessible Mobile <br />Scott Williams<br />Office of Institutional Equityswims@umich.edu@swimsy<br />
  • 2. Slideshare<br />This preso is on SlideShare:http://www.slideshare.net/swimsy<br />
  • 3.
  • 4.
  • 5. stuffthathappens.com by Eric Burke<br />
  • 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. 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. 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. 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. 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. 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. Barriers to robustness<br />Invalid or unsupported markup<br />Scripting required to generate content<br />
  • 13. Best practices for mobile accessibility<br />
  • 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. 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. 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.
  • 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. 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. 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. 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.
  • 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 />

×