Ted Drake of Yahoo Accessibility Lab

On Thursday, Yahoo's Ted Drake gave a presentation of CSE students about accessible design to kick off the coming week's HackU event (http://developer.yahoo.com/hacku/uw.html). Below are slightly cryptic notes of all the things Ted talked about

Accessibility Innovations and Challenges

Ted Drake, Yahoo Accessibility Lab
Facebook: YahooAccessibility
Yahoo Accessibility Lab Blog: http://yaccessibilityblog.com/
Drake's Blog: http://developer.yahoo.com/blogs/ydn/posts/author/tdrake/
Presentation: http://www.slideshare.net/7mary4/yahoo-hack-university-accessiblie-innovations-and-challenges

• Yahoo
  • Has history of front end engineers working with back end engineers
  • Front end team has task of making it accessible
    • Web developers do most of the accessibility work

• Accessibility HackU competitions (http://developer.yahoo.com/hacku/uw.html).
  • Students build tools that make things more accessible
  • Team with the best hack gets a prize

• What is accessibility?
  • Addressing the needs of people with disabilities and their friends and families
  • About leveling the playing field
  • A major goal is to remove barriers - if your UI requires a mouse, you are already excluding people
  • Thinking about universal design, from the start, all the way through
    • You want designs that work for people whether they are abled or disabled
• Who makes it accessible?
  • Lawsuit against Target for the inaccessibility of their
    commercial site design emphasizes the importance of accessible
    design
  • Accessibility is built by advocates and champions
    • Advocate refuses to go around things that are inadequate
    • Champions make accessible design happen
• Make it accessible
  • Contrast - There are several good contrast evaluation tools
    out there, just search for "contrast checker"
  • Do not rely solely on color to convey meaning ("click on the red button")
  • Alt text for graphics needs to be explanatory, do not just repeat the headline
    • alt="" appropriate if image is decorative
    • ARIA has a role="presentation"
  • Title attribute - does not replace the Alt attribute
  • Images may be disabled
    • If using background images in CSS and you have text on that background,
      check for contrast of text on background without image. White lettering
      that no longer has a dark background is hard to read.
  • Off-screen text
    • A method sometimes used to make text available to people
      using screen readers but not visible to others by placing it
      way off screen
    • A problem in countries with text flow from right to left
  • Using wrong element type in HTML can confuse things. Use the most
    semantically correct element type
    • Example: using button for sign-in, then using anchor for cancel
      because you want cancel to look like a link
      • Confusing because cancel is an action, not a link to somewhere
      • Instead, make the cancel a button and style it as a link
    • ARIA role role="button" can be used to clarify things for the screen reader
  • Use th in tables for row and column headings
  • Command + allows you to zoom the page
    • Web designers are getting lazy about accessibility implications
    • A person who zooms in ends up with scroll bars
    • On Firefox, go to zoom text only (View -> Zoom - Zoom Text Only
    • Use YUI CSS packages
      • Example: YUI Grids CSS (http://developer.yahoo.com/yui/grids/) takes care of all the basics for you
      • All based on standards
    • Proportional sizing is nice, but your situation may require fixed widths
  • Forms need labeling - every form field should have a text associated
    with it and the label attribute should be used to associate the field and
    the text.
  • ARIA
    • Can be used today
    • Works in almost all browsers
    • How to do it
      • Landmarks role="search"
      • Function role="button"
      • Labels aria-label="Search Term"
      • State aria-invalid="true"
  • HTML5
    • Firefox 4 will have the ability to use HTML5 roles, but most other browsers are not there yet

• Innovative Solutions - Things student developers can work on
  • Traumatic brain injuries
    • Be careful about grayed out parts of your UI
    • Planning and execution assistant and trainer (PEAT)
      (http://www.brainaid.com/) manages timeline events, notifying
      patient of what needs to be done when
  • Short term memory loss hacks
    • Re-education tools
  • Cognitive disabilities
    • Syntax simplifiers
  • Presentation transformation
    • Readability.com
      • Simplifies presentation of Web pages
  • Icon identification of options
    • Enables visual based search, such as for phone numbers
      for people who have difficulty reading
  • Memory loss
    • What will help a person remember?
    • Mental games, seems to help short term memory loss
    • Journals
  • Non-visual people
    • Texture recognition
    • Converting visual to plain text
      • Photograph a street sign and it tells you want the sign says
    • Directions
      • Phone Wand tells you are going in the right directions
    • Games
      • Game for the blind that uses stereo sound
  • Deaf hacks
    • Sound detector, warns of sirens, etc.
    • Deaf twitter - take video, send it to twitter
  • Physical challenges
    • Web site scanner, moves through Web page section by section,
      bringing up sections that contain actions
      • Designed for someone who navigates with a single finger
    • Picture based communication devices
      • Buttons for specific messages (no, yes, help, etc.)
      • Need a service on the cloud that remembers your settings
  • Support social network
    • Giving feedback to support people
  • If it ain't broke, fix it anyway
    • Cool little apps can really enhance people's lives even
      if initially people are not sure they need them