Friday, March 04, 2011

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 ( 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:
Drake's Blog:
  • 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
  • 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
    • 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
      • 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)
        ( 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
        • 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