Accessible mobile
Upcoming SlideShare
Loading in...5

Accessible mobile



Accessibility of mobile apps and websites

Accessibility of mobile apps and websites



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Accessible mobile Accessible mobile Presentation Transcript

    • Accessible Mobile
      Scott Williams
      Office of Institutional
    • Slideshare
      This preso is on SlideShare:
    • by Eric Burke
    • 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
    • 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):
    • 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):
    • 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)
    • 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
    • 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
    • Barriers to robustness
      Invalid or unsupported markup
      Scripting required to generate content
    • Best practices for mobile accessibility
    • 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
    • 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
    • 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
    • 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
    • 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:
    • 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.
    • 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).
    • Resources
      iPad VoiceOver documentation:
      Accessibility Programming Guide for iOS:
      Android accessibility: