Friday, June 01, 2012

Accessibility of Mobile Devices and Accessible Mobile Web Site Design

AccessibleWeb@U Meeting Notes

Thursday, May 24, 2012

  • VoiceOver Basics - Rick Ells (rells@uw.edu)
    • The VoiceOver voice browser is on Apple iPhones, iPads, and OSX laptop and desktop computers
      • On iPhones and iPads, go to Settings -> General -> Accessibility -> VoiceOver
      • On OSX laptops and desktops, go to Finder -> Go -> Applications -> Utilities -> VoiceOver Utility
    • VoiceOver is highly respected by people with disabilities and is a mature, polished product. It is also free (or at least it comes at no extra cost with many Apple products, which are not free).
    • Using VoiceOver to interact with your site will give you an understanding of how usable your site is to a person using assistive technology.
      • Exploring your pages with VoiceOver can give you a basic evaluation of how useful it will be to people who use assistive technologies.
      • Many developers only think visually as they design the user interface (UI) and user interaction. A sighted person can see and use any part of the display directly. A person using assistive technology probably has to explore the interface linearly, item by item, one item at a time.
      • Good UI design can provide both a good visual experience and a good linear (audio) experience.
    • Turning on / turning off VoiceOver on iPhones and iPads
      • Turning on VoiceOver
        • Go to Settings -> General -> Accessibility -> VoiceOver
        • Once VoiceOver is on you are in a different interaction mode: First you find an item, then you double-tap anywhere on the screen to evoke it.
        • You move to items by sliding your finger around on the screen. As your finger goes over items, VoiceOver will speak their name or description.
        • You can also navigate among items with left, right, up, and down flicks.
      • Turning off VoiceOver
        • Double-tap the Settings icon on your homepage.
        • Use three fingers to scroll down to the General menu, and double-click on it. Click for image.
        • Use three fingers to scroll down to the Accessibility menu, and double-click on it. Click for image.
        • Double-tap on the VoiceOver menu item. Click for image.
        • Turn VoiceOver off
      • Mute and un-mute
        • Three finger double-tap mutes or unmutes the sound
    • Using a bluetooth keyboard
      • Entering text or numbers can be tedious. For each character to find the character then double tap.
      • If you have a bluetooth keyboard, you can directly enter characters as you normally would
    • Apple manual on VoiceOver for OSX devices is at http://www.apple.com/accessibility/voiceover/downloads.html
    • Getting Started with VoiceOver on iOS devices is at http://support.apple.com/kb/HT3598
  • Mobile Design Examples - Terrill Thompson (tft@uw.edu)
    • Test site with four annotated example mobile page designs - http://terrillthompson.com/tests/mobile
    • These are tests, you are welcome to visit them, but they will change
    • The examples are in HTML5
      • How well is HTML5 supported by assistive technology?
        • JAWS 13 supports HTML5 elements as landmarks
          • You can skip among landmarks
          • Do not need to use "skip to content"
        • VoiceOver does not recognize HTML5 elements as landmarks
          • VoiceOver does support ARIA landmarks
          • You can use ARIA to mark up areas of page with "roles" (banner, main, navigation, etc.) (http://www.w3.org/WAI/aria/faq)
    • Use your smartphone to try out these examples. To better understand how they work, view them with a laptop/desktop browser and view their source code.
    • Example 1
      • Demonstrates width and font-size change when you double tap on a block of text.
      • The recommendation is to set column widths between 30-60% to get a reasonable enlargement effect
    • Example 2
      • Demonstrates the effect of constraining width with absolute units.
      • The recommendation is to use relative widths ( percents or ems)
    • Example 3
      • Demonstrates supplementing HTML5 with ARIA roles
      • Each element that has an ARIA landmark role also needs an aria-label attribute
    • Example 4
      • Demonstrates problems with dropdown items evoked by image icons in the header
        • "search image" "menu image" - a visitor might not recognize that they are clickable
          • In this example, they are simple images with javascript
          • Could add "role=button" ARIA
      • Pop-ups can be given an ARIA role of alert, will be announced by screenreaders
        • Focus stays where the pop-up was evoked
        • Text is read
        • role="alert"
      • Go to more accessible version at bottom of page
        • Uses the ARIA button role; announces as "show search"
        • When the user evokes search, button becomes "hide search"
        • Better to use ARIA button instead of link, which people might assume goes to a different page
  • Android Assistive Technologies - Dan Comden (danc@uw.edu)
Posted by at

1 comment:

Author said...

Thanks for the post

mobile website design

4:15 AM

Post a Comment

Subscribe to: Post Comments (Atom)