Your SlideShare is downloading. ×

Accessible mobile


Published on

Accessibility of mobile apps and websites

Accessibility of mobile apps and websites

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Accessible Mobile
    Scott Williams
    Office of Institutional
  • 2. Slideshare
    This preso is on SlideShare:
  • 3.
  • 4.
  • 5. 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):
    Mobile Web Best Practices (MWBP):
    Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (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):
  • 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
    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:
  • 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:
    Accessibility Programming Guide for iOS:
    Android accessibility: