Your SlideShare is downloading. ×
0
Accessibility Innovations                              and Challenges                                      Ted Drake      ...
Accessibility is...                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.co...
Leveling the playing                                     field                          Yahoo! Accessibility Lab Accessibil...
Removing Barriers                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/...
Universal Design                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Y...
Who makes it                                         accessible?                          Yahoo! Accessibility Lab Accessi...
Advocates Refuse Barriers                          Creative Commons: image by tigoe on FlickrThursday, March 3, 2011Advoca...
Champions make it happen                          Some rights reserved by woodleywonderworks on FlickrThursday, March 3, 2...
Some rights reserved by ocad123 on FlickrThursday, March 3, 2011It’s our job to avoid upsetting advocates in the first plac...
Make it Accessible                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com...
Contrast                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAcce...
Red                                                                        Green                                          ...
Lady Gaga performs “Born                      Lady Gaga stuns the                                      This Way” while    ...
http://ts2.mm.bing.net/                      Lady Gaga stuns the                                   images/thumbnail.aspx? ...
Lady Gaga stuns the                           Grammys                                           Lady Gaga stuns the       ...
Lady Gaga stuns the                           Grammys                          Yahoo! Accessibility Lab Accessibility.Yaho...
Images Disabled                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Ya...
<html dir=”rtl”>                                                      The mother of all scroll bars                       ...
Use Clip                .obscure, a.bg span {                   position: absolute !important;                   clip:    ...
<bu$on>Sign	  In</bu$on>	                  <a>Cancel</a>	                            Yahoo! Accessibility Lab Accessibilit...
<th scope=”col”>                           Name                                Color                                 Taste...
Command +                                      Is not testing for text size flexibility                          Yahoo! Acc...
Label Your Input                <label for=”fname”>First Name</label>                <input id=”fname” name=”fname” type=”...
ARIA                          Accessible Rich Internet Applications                          Some rights reserved by paul ...
Use ARIA Today                    • Landmarks: role=”search”, role=”main”                    • Function: role=”button”    ...
Innovative Solutions                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.c...
Traumatic Brain Injury                    • Iraq Veterans                    • Football Injuries                    • Cras...
PEAT       • Schedule for daily tasks       • Reinforce remembered              tasks                          Yahoo! Acce...
Short Term Memory                               Loss Hacks                    • Re-Education                    • Workforc...
Cognitive Disabilities                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook...
“Four score and seven years ago our fathers brought     forth on this continent a new nation, conceived in     liberty, an...
Readability.com                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Ya...
Readability.com                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Ya...
Readability.com                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Ya...
Photo Dialer                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Yahoo...
Memory Loss                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooA...
Non-Visual Innovations                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook...
In Plain English?                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/...
Directions                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAc...
Phone Wand                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAc...
Games                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessi...
Deaf                                                         Hacks                          Some rights reserved by izahor...
Sound Detector                          Some rights reserved by Thomas Hawk on FlickrThursday, March 3, 2011detect sirens,...
Twitter                 Deaf Twitter                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooacc...
Physical Challenges                          Some rights reserved by Christiana Care on FlickrThursday, March 3, 2011paral...
Site Scanner                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Yahoo...
Communication                                                Communication Tools                          Yahoo! Accessibi...
Support Social Network                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook...
If it ain’t broke...                                                         Fix it anyway!                          Yahoo...
Some rights reserved by Oha-Lau 2 on FlickrThursday, March 3, 2011Ask yourself what if:you couldn’t see the difference bet...
You are the Champion!                          Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook....
Visit the Yahoo                    Accessibility Lab’s Blog                                                Accessibility.Y...
Upcoming SlideShare
Loading in...5
×

Yahoo! Hack University: Accessibility Innovations and Challenges

4,100

Published on

Are you an accessibility advocate or champion? This presentation introduces steps to make your applications and web sites accessible. It also challenges us to create the future accessibility solutions.

It was created for the Yahoo! Hack University event at the University of Washington by Ted Drake, from the Yahoo! Accessibility Lab.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,100
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
66
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Yahoo! Hack University: Accessibility Innovations and Challenges"

  1. 1. Accessibility Innovations and Challenges Ted Drake Yahoo! Accessibility LabThursday, March 3, 2011this presentation was created for the Yahoo! Hack U event at the University of Washington,2011
  2. 2. Accessibility is... Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011
  3. 3. Leveling the playing field Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Our goal is to give everyone equal access to information, tools, jobs, and activities. Weacknowledge there may be different methods to achieve tasks, but they are possible.
  4. 4. Removing Barriers Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Don’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. 5. Universal Design Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011produce buildings, products and environments that are inherently accessible to both the able-bodied and the physicallydisabled.Apple products do a great job at this.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. 6. Who makes it accessible? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011lainey feingold, 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. 7. Advocates Refuse Barriers Creative Commons: image by tigoe on FlickrThursday, March 3, 2011Advocates, 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 devicesthat allow a visually impaired shopper to use a credit card at a store’s cash register.
  8. 8. Champions make it happen Some rights reserved by woodleywonderworks on FlickrThursday, March 3, 2011Champions are people within organizations that understand the problems and are devoted to implementing the changes.Some people are both advocates and champions.
  9. 9. Some rights reserved by ocad123 on FlickrThursday, March 3, 2011It’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. 10. Make it Accessible Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011The following slides discuss basic accessible web development concepts.
  11. 11. Contrast Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Make sure web sites have enough contrasthttp://snook.ca/technical/colour_contrast/colour.html
  12. 12. Red Green click on the red button Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Don’t use color as the only delimiter.Finance uses color + arrows.Yahoo! sites are pretty good at not doing this
  13. 13. Lady Gaga performs “Born Lady Gaga stuns the This Way” while Grammys suspended from 15 golden elephants with swans resting on their heads This is good alt text Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011“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. 14. http://ts2.mm.bing.net/ Lady Gaga stuns the images/thumbnail.aspx? Grammys q=590377916357&id=99b 50262230077d041a48c43 e717cf39 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011don’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. 15. Lady Gaga stuns the Grammys Lady Gaga stuns the Grammys Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011It doesn’t help to duplicate the headline in the image.Try placing them in the same link and use alt=””
  16. 16. Lady Gaga stuns the Grammys Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011alt=”” is ignored by screen reader.Good for decorative imagesGood for images within a link that has descriptive textNot good for content images by themselvesrole=”presentation” will tell screen readers to ignore the image
  17. 17. Images Disabled Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011This 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. 18. <html dir=”rtl”> The mother of all scroll bars Off-screen Text Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011off-screen text generates huge scroll bars when switched to rtl text directionthis is caused by using text-indent:-999em or left:-999em;top:-999em; will cause the screen to jump if item is focused.
  19. 19. Use Clip .obscure, a.bg span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, 7 */ clip: rect(1px, 1px, 1px, 1px); } http://yaccessibilityblog.com/library/css-clip-hidden-content.html Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011This rule tells us to position the element absolutelythen only show the top left pixel.Visit the blog entry for complete information on using this css pattern.
  20. 20. <bu$on>Sign  In</bu$on>   <a>Cancel</a>   Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Don’t use a link for a button.at least add role=”button”you can style a button to look like a link for UED
  21. 21. <th scope=”col”> Name Color Taste </th> Gala Red Sweet Granny Smith Green Tart <th scope=”row”> Pink Lady Pink Sweet </th> Rome Red Sweet Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011add scope=”row | col” to your th cellsscreen readers will announce the header before the appropriate cell.th[scope=”row”] allows you to style row headers
  22. 22. Command + Is not testing for text size flexibility Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011In 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. 23. Label Your Input <label for=”fname”>First Name</label> <input id=”fname” name=”fname” type=”text”> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Use 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 IE6replace label with aria-label=””, aria-labelledby=””, or possibly alt=”” on input.
  24. 24. ARIA Accessible Rich Internet Applications Some rights reserved by paul goyette on FlickrThursday, March 3, 2011ARIA allows us to define the application like interactions for web pages.
  25. 25. Use ARIA Today • Landmarks: role=”search”, role=”main” • Function: role=”button” • Labels: aria-label=”Search Term” • State: aria-invalid=”true” Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Visit the accessibility lab’s aria library for more information: http://yaccessibilityblog.com/library/tag/aria
  26. 26. Innovative Solutions Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011
  27. 27. Traumatic Brain Injury • Iraq Veterans • Football Injuries • Crashes Some rights reserved by CorCor Beware on FlickrThursday, March 3, 2011short term memory lossrequire repetitive instructionsavoid confusion
  28. 28. PEAT • Schedule for daily tasks • Reinforce remembered tasks Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011PEAT 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 promptingPalo Alto V.A. is working on this
  29. 29. Short Term Memory Loss Hacks • Re-Education • Workforce transition • Resources aggregator Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011application that restores basic personal knowledgeapplications that storyboard workspace tasks, such as replacing toner, creating spreadsheets
  30. 30. Cognitive Disabilities Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Autism, intellectual disabilities, developmentally disabled, brain injuries, mental diseases
  31. 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. Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Can we generate a simplified version of an article for those with a lower reading level?
  32. 32. Readability.com Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Readability is a browser plugin that simplifies a pageit removes images, navigation, etcuser can personalize font size, background color, and optional resource link list
  33. 33. Readability.com Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Readability is a browser plugin that simplifies a pageit removes images, navigation, etcuser can personalize font size, background color, and optional resource link list
  34. 34. Readability.com Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Readability is a browser plugin that simplifies a pageit removes images, navigation, etcuser can personalize font size, background color, and optional resource link list
  35. 35. Photo Dialer Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011this is a fairly easy application that lets user make phone calls via the images in their contactsrather than names and phone numbersThis can integrate with phone’s contact list for very easy dialing.
  36. 36. Memory Loss Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011slide shows to feature family and friends with namesmental gamesjournals for keeping track of what has been done during the day.Growing population with dementia and alzheimers
  37. 37. Non-Visual Innovations Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011
  38. 38. In Plain English? Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011create 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 sourcehttp://download.finance.yahoo.com/d/quotes.csv?s=YHOO&f=sl1d1t1c1ohgv&e=.csvuse firebug to watch the data requests
  39. 39. Directions Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011How can a blind user navigate the city when they cannot see the map/street names
  40. 40. Phone Wand Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Phone Wand: waving the phone to get hot/cold feedback to find the correct directionAlso being developed: read street signs, find nearby stores and friends.Yahoo: bubbles for sharing local photos, info. Sketch a search navigationGeo project to get local information, bus routes, and more for location.
  41. 41. Games Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Audio-based games:Tap Beatsusing stereo audio for role playing gamescrabble?
  42. 42. Deaf Hacks Some rights reserved by izahorsky on FlickrThursday, March 3, 2011
  43. 43. Sound Detector Some rights reserved by Thomas Hawk on FlickrThursday, March 3, 2011detect sirens, alarms, and other audio signals
  44. 44. Twitter Deaf Twitter Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011user creates short video, uploads to flickr/post to twitter. Interface also tracks replies,retweets, etc.plays video inline on phone/computerthis could also work for blind users: audio instead of video
  45. 45. Physical Challenges Some rights reserved by Christiana Care on FlickrThursday, March 3, 2011paralysis, cerebral palsy, muscular distrophy, stroke, age related, parkinsons
  46. 46. Site Scanner Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Site 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 presshttp://nexpace.com/sandbox/scanner/bookmarklet/
  47. 47. Communication Communication Tools Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Pic to Speech is an assisted communication device for the android. It allows customization ofthe icons and translations.DDweb provides an online environment http://ddweb.developingmindssoftware.com/site/Prologue2go is a popular ipad app
  48. 48. Support Social Network Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011social networks for the individuals and their support network.journal for daily activities, moods, healthcommunications amongst support network
  49. 49. If it ain’t broke... Fix it anyway! Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011Not all accessibility applications were built to solve an accessibility problemcolor detector used by blind for imaging colors of environmentreal time video chat used for sign language chat roomsgoogle goggles for determining money values
  50. 50. Some rights reserved by Oha-Lau 2 on FlickrThursday, March 3, 2011Ask yourself what if:you couldn’t see the difference between red, green, yellowyou couldn’t click on a linkthere was no hoveryou can’t remember the beginning of an articleyou know what to say but can’t speak
  51. 51. You are the Champion! Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011
  52. 52. Visit the Yahoo Accessibility Lab’s Blog Accessibility.Yahoo.Com Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityThursday, March 3, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×