Accessibillity Challenges and Innovations for Open Hack EU 2011

Accessibility is...

Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
Saturday, May 14, 2011


Aaron "Wheelz" Fotheringham landed the world's first double backflip on a wheelchair on
August 26, 2010.
Filmed: Dave Metty Brandon Schmidt, Edited: Joshua Zucker
http://aaronfotheringham.com http://campwoodward.com

Leveling the playing
ﬁeld


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

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.

Champions make it happen

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.

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.

Make it Accessible


The following slides discuss basic accessible web development concepts.

Lady Gaga stuns the Grammys


Image from Getty Images

Lady Gaga stuns the Lady Gaga performs “Born
Grammys This Way” while emerging
from a large egg-shaped
pod


This is appropriate alt text


This video shows what it sounds like when the alt attribute is missing.
This bug has been ﬁxed.

<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

<th scope=”col”>
Name Type Taste
</th>

Vişinată Liqueur Sour Cherry

Turtă dulce Dessert Ginger Bread

<th scope=”row”>
mămăligă Vegetable Corn
</th>

tobă Meat Pork Sausage


add scope=”row | col” to your th cells
screen readers will announce the header before the appropriate cell.
th[scope=”row”] {color:pink} allows you to style row headers

Label Your Input

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


Use a label for each form input.
Explicit binding via for+id will work in all browsers.
Hidden label with aria-label=””, aria-labelledby=””, or possibly alt=”” on input.

ARIA
Accessible Rich Internet Applications

Some rights reserved by paul goyette on Flickr

ARIA allows us to deﬁne the application like interactions for web pages.

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

Search with ARIA


Mobile


iphones and ipads have great accessibility features.
They are rapidly becoming the preferred technology for many disabilities, i.e. blind, autism,
cerebral palsy...
http://www.youtube.com/watch?v=StI0iIufJzk
This video shows how the Southwest Airlines app sounds. They use custom buttons without
labels.

Innovative Solutions


Traumatic Brain Injury

• Soldiers
• Sports Injuries
• Crashes

Some rights reserved by CorCor Beware on Flickr

short term memory loss
require repetitive instructions
avoid confusion

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


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

Readability.com

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

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 numbers
This can integrate with phone’s contact list for very easy dialing.

Memory Loss


slide shows to feature family and friends with names
mental games, Daily event journals
Growing population with dementia and Alzheimer's

Non-Visual Innovations


In Plain Text?


translate 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, politics, and any other data source

Audio Description Tool


Text to Speech +
Flipboard


build an app that expands the links from your friends twitter, facebook feeds, as well as your
favorite rss feed and then uses built in text to speech engines to provide audio for your car.

Directions


How can a blind user navigate the city when they cannot see the map/street names
Location saver - ﬁnd way back to parking/bus spot

Deaf
Hacks

Some rights reserved by izahorsky on Flickr


Sound Detector

Some rights reserved by Thomas Hawk on Flickr


detect sirens, alarms, and other audio signals
closed captioning
sign language interpreting and video repository/translations

Twitter Deaf Twitter


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

Physical Challenges

Some rights reserved by Christiana Care on Flickr


paralysis, cerebral palsy, muscular dystrophy, stroke, age related, Parkinson's

Site Scanner


Site scanner by the Yahoo! prototype team: ﬁx the difficulties of using a scanning keyboard to
navigate a web page.
allows navigation with a single button press
use space bar to start and navigate a page. demo with: http://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

Support Social Network

social networks for the individuals and their support network.
journal for daily activities, moods, health
communications amongst teachers, parents, doctors, etc

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 imagining colors of environment
real time video chat used for sign language chat rooms
google 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, yellow
there was no hover
you can’t remember the beginning of an article
you know what to say but can’t speak

You are the Champion!


Visit the Yahoo
Accessibility Lab’s Blog
Accessibility.Yahoo.Com


Accessibility Innovations
and Challenges
Ted Drake
Bucharest, May 2011

this presentation was created for the Yahoo! Open Hack EU

Accessibillity Challenges and Innovations for Open Hack EU 2011

Recommended

Recommended

More Related Content

Similar to Accessibillity Challenges and Innovations for Open Hack EU 2011

Similar to Accessibillity Challenges and Innovations for Open Hack EU 2011 (17)

More from Ted Drake

More from Ted Drake (20)

Recently uploaded

Recently uploaded (20)

Accessibillity Challenges and Innovations for Open Hack EU 2011