Yahoo! Hack University: Accessibility Innovations and Challenges

Accessibility Innovations and Challenges

Ted DrakeYahoo! Accessibility Lab

Thursday, March 3, 2011

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

Accessibility is...

Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility


Leveling the playing field



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.

Removing Barriers



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.

Universal Design



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.

Who makes it accessible?



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

Advocates Refuse Barriers

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.

http://creativecommons.org/licenses/by-nc-sa/2.0/


http://www.flickr.com/photos/tigoe/

http://www.flickr.com/photos/tigoe/

Champions make it happen

Some rights reserved by woodleywonderworks on FlickrThursday, 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.

http://creativecommons.org/licenses/by/2.0/

http://creativecommons.org/licenses/by/2.0/

http://www.flickr.com/photos/wwworks/

http://www.flickr.com/photos/wwworks/

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.

http://creativecommons.org/licenses/by-nc-nd/2.0/


http://www.flickr.com/photos/ocad123/

http://www.flickr.com/photos/ocad123/

Make it Accessible



The following slides discuss basic accessible web development concepts.

Contrast



Make sure web sites have enough contrast http://snook.ca/technical/colour_contrast/colour.html

Red


Green

click on the red button


Don’t use color as the only delimiter. Finance uses color + arrows.Yahoo! sites are pretty good at not doing this

Lady Gaga performs “Born This Way” while

suspended from 15 golden elephants with swans resting on their heads


Lady Gaga stuns the Grammys

This is good alt text


“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.

http://ts2.mm.bing.net/images/thumbnail.aspx?

q=590377916357&id=99b50262230077d041a48c43

e717cf39




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.

http://ts2.mm.bing.net/images/thumbnail.aspx?q=590377916357&id=99b50262230077d041a48c43e717cf39














It doesn’t help to duplicate the headline in the image.Try placing them in the same link and use alt=””




alt=”” 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

Images DisabledYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility


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.

Off-screen TextYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

The mother of all scroll bars

<html dir=”rtl”>


off-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.

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



This 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.



<bu$on>Sign In</bu$on>

<a>Cancel</a>



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


Name Color Taste

Gala Red Sweet

Granny Smith Green Tart

Pink Lady Pink Sweet

Rome Red Sweet

<th scope=”col”>

</th>

<th scope=”row”>

</th>


add 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

Command +Is not testing for text size flexibility



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

<label for=”fname”>First Name</label><input id=”fname” name=”fname” type=”text”>

Label Your Input



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 IE6replace label with aria-label=””, aria-labelledby=””, or possibly alt=”” on input.

ARIAAccessible Rich Internet Applications

Some rights reserved by paul goyette on FlickrThursday, March 3, 2011

ARIA allows us to define the application like interactions for web pages.



http://www.flickr.com/photos/pgoyette/

http://www.flickr.com/photos/pgoyette/

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 library for more information: http://yaccessibilityblog.com/library/tag/aria

Innovative Solutions



Traumatic Brain Injury

• Iraq Veterans

• Football Injuries

• Crashes

Some rights reserved by CorCor Beware on FlickrThursday, March 3, 2011

short term memory lossrequire repetitive instructionsavoid confusion



http://www.flickr.com/photos/pushbuttonpulllever/

http://www.flickr.com/photos/pushbuttonpulllever/


PEAT

• Schedule for daily tasks

• Reinforce remembered tasks


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 promptingPalo Alto V.A. is working on this

Short Term Memory Loss Hacks

• Re-Education

• Workforce transition

• Resources aggregator



application that restores basic personal knowledgeapplications that storyboard workspace tasks, such as replacing toner, creating spreadsheets

Cognitive Disabilities



Autism, intellectual disabilities, developmentally disabled, brain injuries, mental diseases

“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.



Can we generate a simplified version of an article for those with a lower reading level?

Readability.comYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility


Readability is a browser plugin that simplifies a pageit removes images, navigation, etcuser can personalize font size, background color, and optional resource link list

http://www.readability.com













Photo Dialer


this is a fairly easy application that lets user make phone calls via the images in their contacts rather than names and phone numbersThis can integrate with phone’s contact list for very easy dialing.

Memory Loss



slide shows to feature family and friends with namesmental games journals for keeping track of what has been done during the day.Growing population with dementia and alzheimers

Non-Visual Innovations



In Plain English?



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 sourcehttp://download.finance.yahoo.com/d/quotes.csv?s=YHOO&f=sl1d1t1c1ohgv&e=.csvuse firebug to watch the data requests

Directions



How can a blind user navigate the city when they cannot see the map/street names

Phone Wand



Phone 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.


Games


Audio-based games: Tap Beatsusing stereo audio for role playing gamescrabble?

DeafHacks

Some rights reserved by izahorsky on Flickr




http://www.flickr.com/photos/ingmar/

http://www.flickr.com/photos/ingmar/

Sound Detector

Some rights reserved by Thomas Hawk on Flickr


detect sirens, alarms, and other audio signals

http://creativecommons.org/licenses/by-nc/2.0/

http://creativecommons.org/licenses/by-nc/2.0/

http://www.flickr.com/photos/thomashawk/

http://www.flickr.com/photos/thomashawk/

TwitterDeaf Twitter



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

Physical Challenges

Some rights reserved by Christiana Care on Flickr


paralysis, cerebral palsy, muscular distrophy, stroke, age related, parkinsons



http://www.flickr.com/photos/christianacare/

http://www.flickr.com/photos/christianacare/

Site Scanner



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 presshttp://nexpace.com/sandbox/scanner/bookmarklet/

Communication


Communication Tools


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

http://ddweb.developingmindssoftware.com/site/

http://ddweb.developingmindssoftware.com/site/

Support Social NetworkYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility


social networks for the individuals and their support network.journal for daily activities, moods, healthcommunications amongst support network

If it ain’t broke...Fix it anyway!



Not all accessibility applications were built to solve an accessibility problem

color detector used by blind for imaging colors of environmentreal time video chat used for sign language chat roomsgoogle goggles for determining money values

Some rights reserved by Oha-Lau 2 on Flickr


Ask 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



http://www.flickr.com/photos/oha_lau2/

http://www.flickr.com/photos/oha_lau2/

You are the Champion!



Visit the Yahoo Accessibility Lab’s Blog

Accessibility.Yahoo.Com



Technology

Yahoo! Hack University: Accessibility Innovations and Challenges