Yahoo! Accessibility

Yahoo’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 and deliver this presentation on the existing accessibility challenges and future innovations.

This year’s 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

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 field
   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 first place.
   We are also the champions that listen to the advocates and fix 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)
    
    <th scope=”col”> Name Color Taste </th>
    <th scope=”row”> Pink Lady Pink Sweet </th>

    
    
    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 flexibility
    
    Notes: In firefox 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 for=”fname”>First Name</label>
    <input id=”fname” name=”fname” type=”text”>

    
    
    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 define 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 simplified 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 simplifies 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 significant 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.finance.yahoo.com/d/quotes.csv?s=YHOO&f=sl1d1t1c1ohgv&e=.csv
    
    Use firebug 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 find the correct direction
    
    Also being developed: read street signs, find 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 flickr/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

Tags: ARIA, CSS, hack, hacku, images, Seattle, University of Washington, Washington, Yahoo!

This entry was posted on Tuesday, March 8th, 2011 at 10:46 am and is filed under Presentations, Slideshow. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.