Accessible mobile
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,054
On Slideshare
1,054
From Embeds
0
Number of Embeds
0

Actions

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