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.
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Â
Yahoo! Hack University: Accessibility Innovations and Challenges
1. Accessibility Innovations
and Challenges
Ted Drake
Yahoo! Accessibility Lab
Thursday, March 3, 2011
this presentation was created for the Yahoo! Hack U event at the University of Washington,
2011
3. Leveling the playing
ïŹeld
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Donât break the web by creating an application that is not accessible. Avoid âshortcutsâ that
assume the user can see, hear, and/or has full mobility.
5. Universal Design
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
produce buildings, products and environments that are inherently accessible to both the able-bodied and the physically
disabled.
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. Who makes it
accessible?
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
lainey 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. Advocates Refuse Barriers
Creative Commons: image by tigoe on Flickr
Thursday, March 3, 2011
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
Some rights reserved by woodleywonderworks on Flickr
Thursday, March 3, 2011
Champions are people within organizations that understand the problems and are devoted to implementing the changes.
Some people are both advocates and champions.
9. Some rights reserved by ocad123 on Flickr
Thursday, March 3, 2011
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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
The following slides discuss basic accessible web development concepts.
11. Contrast
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Make sure web sites have enough contrast
http://snook.ca/technical/colour_contrast/colour.html
12. Red Green
click on the red button
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Donât use color as the only delimiter.
Finance uses color + arrows.
Yahoo! sites are pretty good at not doing this
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/YahooAccessibility
Thursday, 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. 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/YahooAccessibility
Thursday, March 3, 2011
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 a
description.
15. Lady Gaga stuns the
Grammys Lady Gaga stuns the
Grammys
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
It doesnât help to duplicate the headline in the image.
Try placing them in the same link and use alt=ââ
16. Lady Gaga stuns the
Grammys
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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 the
container background color.
This can cause problems with transparent images using rounded corners.
18. <html dir=ârtlâ>
The mother of all scroll bars
Off-screen Text
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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);
}
http://yaccessibilityblog.com/library/css-clip-hidden-content.html
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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. <bu$on>Sign
 In</bu$on>
Â
<a>Cancel</a>
Â
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Donâ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. <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/YahooAccessibility
Thursday, March 3, 2011
add scope=ârow | colâ to your th cells
screen readers will announce the header before the appropriate cell.
th[scope=ârowâ] allows you to style row headers
22. Command +
Is not testing for text size ïŹexibility
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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 for=âfnameâ>First Name</label>
<input id=âfnameâ name=âfnameâ type=âtextâ>
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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
Some rights reserved by paul goyette on Flickr
Thursday, March 3, 2011
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â
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Visit the accessibility labâs aria library for more information: http://yaccessibilityblog.com/
library/tag/aria
27. Traumatic Brain Injury
âą Iraq Veterans
âą Football Injuries
âą Crashes
Some rights reserved by CorCor Beware on Flickr
Thursday, March 3, 2011
short term memory loss
require repetitive instructions
avoid confusion
28. PEAT
âą Schedule for daily tasks
âą Reinforce remembered
tasks
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
application that restores basic personal knowledge
applications that storyboard workspace tasks, such as replacing toner, creating spreadsheets
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/YahooAccessibility
Thursday, March 3, 2011
Can we generate a simpliïŹed version of an article for those with a lower reading level?
32. Readability.com
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Readability is a browser plugin that simpliïŹes a page
it removes images, navigation, etc
user can personalize font size, background color, and optional resource link list
33. Readability.com
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Readability is a browser plugin that simpliïŹes a page
it removes images, navigation, etc
user can personalize font size, background color, and optional resource link list
34. Readability.com
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Readability is a browser plugin that simpliïŹes a page
it removes images, navigation, etc
user can personalize font size, background color, and optional resource link list
35. Photo Dialer
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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.
36. Memory Loss
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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 alzheimers
38. In Plain English?
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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 to watch the data requests
39. Directions
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
How can a blind user navigate the city when they cannot see the map/street names
40. Phone Wand
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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.
41. Games
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Audio-based games:
Tap Beats
using stereo audio for role playing game
scrabble?
42. Deaf
Hacks
Some rights reserved by izahorsky on Flickr
Thursday, March 3, 2011
43. Sound Detector
Some rights reserved by Thomas Hawk on Flickr
Thursday, March 3, 2011
detect sirens, alarms, and other audio signals
44. Twitter Deaf Twitter
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
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
45. Physical Challenges
Some rights reserved by Christiana Care on Flickr
Thursday, March 3, 2011
paralysis, cerebral palsy, muscular distrophy, stroke, age related, parkinsons
46. Site Scanner
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Site scanner was developed by the Yahoo! prototype team to address the difficulties of using a
scanning keyboard to navigate a web page.
allows navigation with a single button press
http://nexpace.com/sandbox/scanner/bookmarklet/
47. Communication
Communication Tools
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Pic to Speech is an assisted communication device for the android. It allows customization of
the icons and translations.
DDweb provides an online environment http://ddweb.developingmindssoftware.com/site/
Prologue2go is a popular ipad app
48. Support Social Network
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
social networks for the individuals and their support network.
journal for daily activities, moods, health
communications amongst support network
49. If it ainât broke...
Fix it anyway!
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
Not all accessibility applications were built to solve an accessibility problem
color detector used by blind for imaging colors of environment
real time video chat used for sign language chat rooms
google goggles for determining money values
50. Some rights reserved by Oha-Lau 2 on Flickr
Thursday, March 3, 2011
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
51. You are the Champion!
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011
52. Visit the Yahoo
Accessibility Labâs Blog
Accessibility.Yahoo.Com
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Thursday, March 3, 2011