Yahoo! Hack University: Accessibility Innovations and Challenges

This post originally appeared on the Yahoo! Accessibility Blog.

University of Washington Hack DayYahoo's HackU events allow Yahoo! engineers to hang out with college students for a week as they explore the latest technologies and spend 24 hours in a caffeine powered hack-a-thon. The University of Washington features several accessibility related research programs. So it was great to visit the campus last year and deliver this presentation on the existing accessibility challenges and future innovations.

This HackU event featured some amazing hacks. The Accessible Hack award winning team attempted to translate data charts into readable text.

You can skip the slide movie and go straight to the presentation transcript with notes.

Presentation Transcript

Accessibility lecture at the University of Washington

  1. Accessibility Innovations and Challenges
    • Ted Drake
    • Yahoo! Accessibility Lab
    • Thursday, March 3, 2011

    Notes: This presentation was created for the Yahoo! Hack U event at the University of Washington, 2011

  2. Accessibility is...
  3. Leveling the playing ?eld
    Notes: Our goal is to give everyone equal access to information, tools, jobs, and activities.
    We acknowledge there may be different methods to achieve tasks, but they are possible.
  4. Removing Barriers
    Notes: Don’t break the web by creating an application that is not accessible.
    Avoid “shortcuts” thatassume the user can see, hear, and/or has full mobility.
  5. Universal Design
    Notes: Produce buildings, products and environments that are inherently accessible to both the able-bodied and the physicallydisabled.
    Apple products do a great job at this.d
    Don’t think a,b,c, i.e. high contrast or low contrast. Think about how you can provide a range of contrast.
    Provide functionality for hover, active, focus.
  6. Who makes it accessible?
    Notes: Lainey Feingold is an attorney that works with companies to improve their products accessibility.
    for instance, braille credit card machines at Target and other stores.
    She says advocates and champions are needed for accessibility changes
  7. Advocates Refuse Barriers
    Notes: photo:
    Creative Commons: image by tigoe on Flickr

    Advocates, she explained, are people with disabilities that are not satisfied with having to work around barriers to entry.
    They demand equal access, whether that is an accessible web form, ATMs with audio feedback, or tactile point of sale devices that allow a visually impaired shopper to use a credit card at a store’s cash register.
  8. Champions make it happen
    Notes: photo: Some rights reserved by woodleywonderworks on Flickr

    Champions are people within organizations that understand the problems and are devoted to implementing the changes.
    Some people are both advocates and champions.
  9. We are the Champions (record by Queen)
    Notes: photo: Some rights reserved by ocad123 on Flickr
    It’s our job to avoid upsetting advocates in the ?rst place.
    We are also the champions that listen to the advocates and ?x the problems.
  10. Make it Accessible
    Notes: The following slides discuss basic accessible web development concepts.
  11. Contrast
    Notes: Make sure web sites have enough contrast
    Color Contrast Checker
  12. Red button - Green button - click on the red button
    Notes: Don’t use color as the only delimiter.
    Yahoo!
    Finance uses color + arrows.
    Yahoo! sites are pretty good at not doing this
  13. Headline: Lady Gaga stuns the Grammys
    Image alt text:
    Lady Gaga performs “Born This Way” while suspended from 15 golden elephants with swans resting on their heads
    This is good alt text
    Notes: “lady gaga stuns the Grammys” is a headline, followed by an image.
    the image has a great alt text.
    The text describes what is in the image.
  14. Headline: Lady Gaga stuns the Grammys
    Image alt:
    http://ts2.mm.bing.net/ images/thumbnail.aspx?q=590377916357&id=99b 50262230077d041a48c43e717cf39
    Notes: Don’t forget to add the alt attribute to every image.
    The screen reader user will be presented with the source of the image instead of adescription.
  15. Headline: Lady Gaga stuns the Grammys
    Image alt: Lady Gaga stuns the Grammys
    Notes: It doesn’t help to duplicate the headline in the image.
    Try placing them in the same link and use alt=””
  16. Headline: Lady Gaga stuns the Grammys
    Image alt: (blank)

    Notes: alt=”” is ignored by screen reader.
    Good for decorative images
    Good for images within a link that has descriptive text
    Not good for content images by themselves
    Role=”presentation” will tell screen readers to ignore the image
  17. Images Disabled
    (image of toolbar with missing information)

    Notes: This toolbar had a twitter badge with white text on top.
    add a background color to your background CSS when the link text is the same color as thecontainer background color.
    This can cause problems with transparent images using rounded corners.
  18. <html dir=”rtl”>
    The mother of all scroll bars
    Notes: Off-screen Text off-screen text generates huge scroll bars when switched to rtl text direction
    This is caused by using text-indent:-999em or left:-999em;
    top:-999em; will cause the screen to jump if item is focused.
  19. Use Clip

    .obscure, a.bg span {
    position: absolute !important;

    clip: rect(1px 1px 1px 1px); /* IE6, 7 */

    clip: rect(1px, 1px, 1px, 1px);

    }

    Clip your hidden content for better accessibility
    Notes: This rule tells us to position the element absolutely
    then only show the top left pixel.
    Visit the blog entry for complete information on using this css pattern.


  20. <button>Sign In</button>
    <a>Cancel</a>


    Don’t use a link for a button.
    Notes: At least add role=”button” to the link
    You can style a button to look like a link for UED
  21. (Data table with apple information)
    Name Color Taste
    Pink Lady Pink Sweet
    Notes: add scope=”row | col” to your th cells
    screen readers will announce the header before the appropriate cell.
    th[scope=”row”] is a CSS rule that allows you to target row vs. col headers
  22. Command +
    Is not testing for text size ?exibility
    Notes: In ?refox and safari choose view->zoom text only, then use command +
    simply zooming the page causes scroll bars.
    your page should allow user to increase font without breaking layout.
    use YUI CSS for fonts,grids,base,reset to instantly solve this
  23. Label Your Input
    <label>First Name</label>
    <input>
    Notes: Use a label for each form input.
    Explicit binding via for+id will work in all browsers.
    Implicit binding, wrapping the input in a label tag, will not work in IE6
    replace label with aria-label=””, aria-labelledby=””, or possibly alt=”” on input.
  24. ARIA
    Accessible Rich Internet Applications
    photo: Some rights reserved by paul goyette on Flickr

    Notes: ARIA allows us to de?ne the application like interactions for web pages.
  25. Use ARIA Today
    • Landmarks: role=”search”, role=”main”
    • Function: role=”button”
    • Labels: aria-label=”Search Term”
    • State: aria-invalid=”true”

    Visit the accessibility lab’s ARIA code library for more information

  26. Innovative Solutions
  27. Traumatic Brain Injury
    • Iraq Veterans
    • Football Injuries
    • Crashes

    photo: Some rights reserved by CorCor Beware on Flickr

    Notes: short term memory loss
    require repetitive instructions
    avoid confusion

  28. PEAT
    • Schedule for daily tasks
    • Reinforce remembered tasks

    Notes: PEAT was originally designed for NASA astronauts.
    scheduled reminders require user to interact when a task is completed.
    how can we reinforce good behavior when the task is completed without prompting
    Palo Alto V.A. is working on this

  29. Short Term Memory Loss Hacks
    • Re-Education
    • Workforce transition
    • Resources aggregator

    Notes: Application that restores basic personal knowledge
    Applications that storyboard workspace tasks, such as replacing toner, creating spreadsheets

  30. Cognitive Disabilities
    Notes: Autism, intellectual disabilities, developmentally disabled, brain injuries, mental diseases
  31. “Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.”
    87 years ago our country was created with the belief that all men are equal and deserve freedom.
    Notes: Can we generate a simpli?ed version of an article for those with a lower reading level?
  32. Readability.com
    (screenshot of normal page that changes to simplified version)

    Notes: Readability is a browser plugin that simpli?es a pageit removes images, navigation, etc
    user can personalize font size, background color, and optional resource link list
  33. Photo Dialer
    Notes: This is a fairly easy application that lets user make phone calls via the images in their contacts rather than names and phone numbers
    This can integrate with phone’s contact list for very easy dialing.
  34. Memory Loss
    Notes: slide shows to feature family and friends with names
    mental games
    journals for keeping track of what has been done during the day.
    Growing population with dementia and Alzheimer's
  35. Non-Visual Innovations
  36. (screenshot of complicated financial chart)
    In Plain English?
    Notes: Create a function that translates signi?cant value changes into a sentence.
    What did it start/end at?
    Charts give instant recognition of history, how can this be in text?
    Finance, science, math, poliditcs, and any other data source

    http://download.?nance.yahoo.com/d/quotes.csv?s=YHOO&f=sl1d1t1c1ohgv&e=.csv

    Use ?rebug on Yahoo! Finance chart page to watch the data requests

  37. Directions
    Notes: How can a blind user navigate the city when they cannot see the map/street names
  38. Phone Wand
    Notes: Phone Wand: waving the phone to get hot/cold feedback to ?nd the correct direction
    Also being developed: read street signs, ?nd nearby stores and friends.
    Yahoo: bubbles for sharing local photos, info.
    Sketch a search navigation
    Geo project to get local information, bus routes, and more for location.
  39. Games
    Notes: Audio-based games:
    Tap Beats
    using stereo audio for role playing game
    scrabble?
  40. Deaf Hacks
    photo of deaf school children in India:
    Some rights reserved by izahorsky on Flickr
  41. Sound Detector
    photo of police siren:
    Some rights reserved by Thomas Hawk on Flickr

    Notes: detect sirens, alarms, and other audio signals
  42. Deaf Twitter
    Notes: user creates short video, uploads to ?ickr/post to twitter.
    Interface also tracks replies,retweets, etc.
    plays video inline on phone/computer
    this could also work for blind users: audio instead of video
  43. Physical Challenges
    photo of child with CP:
    Some rights reserved by Christiana Care on Flickr

    Notes: Paralysis, cerebral palsy, muscular distrophy, stroke, age related, Parkinson's
  44. Site Scanner
    Notes: Site scanner was developed by the Yahoo! prototype team to address the difficulties of using ascanning keyboard to navigate a web page.
    allows navigation with a single button press
  45. Communication Tools
    Notes: Pic to Speech is an assisted communication device for the android.
    It allows customization ofthe icons and translations.
    DDweb provides an online environment
    Prologue2go is a popular ipad app
  46. Support Social Network
    Notes: social networks for the individuals and their support network.
    journal for daily activities, moods, health
    communications amongst support network
  47. If it ain’t broke... Fix it anyway!
    Notes: Not all accessibility applications were built to solve an accessibility problem
    color detector used by blind for imagining colors of environment
    real time video chat used for sign language chat rooms
    google goggles for determining money values
  48. photo of text "What if?" on window: Some rights reserved by Oha-Lau 2 on Flickr

    Notes: Ask yourself what if:
    you couldn’t see the difference between red, green, yellow
    you couldn’t click on a link
    there was no hover
    you can’t remember the beginning of an article
    you know what to say but can’t speak
  49. You are the Champion!
  50. Visit the Yahoo Accessibility Lab’s Blog
    Accessibility.Yahoo.Com