georgia tech hacking accessibility

Accessibility

Hacking

Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org

Georgia, Atlanta, US, Hack-U Georgia Tech, March 2009

What is accessibility?

To find this out, let’s start with an expert.

Sir Isaac Newton

Portrait of Isaac Newton

Picture of an apple

Right now, we have quite a big mass of people who care and talk about accessibility.

we♥

access

The problem is that a mass is not a force without any

movement or acceleration.

we♥

access

F = ma“the net force on an object is equal to the mass of

the object multiplied by its acceleration.”

This means that if we give this mass a push, it becomes a

force.

we♥

access

The more we push, the larger the force will get, and the bigger its impact will be.

we♥

access

However, this only works, when we all push in the same

direction.

we♥

access

Otherwise, all we do is exert our strength pushing against

each other.

We do move the mass, but only randomly, and

eventually it might get motion sick.

This is where web accessibility is right now.

A lot of people are simply getting sick of the inertia.

Accessibility supporters are getting sick of things not

moving forward.

People seem to be more interested in checking boxes

than removing barriers.

Developers get sick of having accessibility as a show

stopper.

Developers are getting sick of being told off for not

following guidelines that don’t seem to make sense.

However, we all are ready for action.

Accessibility supporters are happy to tell people about

the impact of bad usability or technical assumptions.

Developers are happy to spend hours on solving

problems...

...right now mostly problems they came up with

themselves.

So what we are really facing here is a breakdown of

communication.

Accessibility is about removing barriers.

The web is there for everybody, regardless of

physical condition, location, or technical setup.

When building web products people keep forgetting this.

And if they consider it, then we add extras to make things

accessible and look, err, interesting.

http://www.shopmobilityuk.org/

Put down Frontpage and step away from the internets, sir.

Accessibility is not about building extra solutions for

users with disabilities.

It is about seeing disabilities as an hard core test case for

our products.

Making our products free of barriers improves the

experience for all users.

Sometimes this is as easy as rethinking a solution and

getting back to basics.

http://uk.tv.yahoo.com/

http://uk.tv.yahoo.com/

http://finance.yahoo.com/currency-converter?u#from=USD;to=EUR;amt=1

http://developer.yahoo.net/blog/archives/2009/01/accessible_converter.html

Three things make a really accessible solution:

Knowledge about the barriers.

A drive to make it a great experience for everyone.

Being open to find consensus.

Let’s take a tough nut to crack.

A friend of mine works for a charity of people with learning disabilities.

She tried in vain to find a video player that works for

the people she cares for.

Until she found me and I found the YouTube API:

http://code.google.com/apis/youtube/overview.html

Easy YouTube.

Screenshot of Easy YouTube

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=vkdZmi85gxk

★ Easy controls

★ Option to search for videos

★ Copy and paste video URL to share

★ Select video size

★ Easy Volume Control

★ Option to show a playlist created with del.icio.us

★ Option to search YouTube

★ API to automatically open videos in Easy YouTube

★ Documentation how to host it yourself

★ Open Source

That’ll never make it to the mainstream, though...

Or will it?

Screenshots of uk.video.yahoo.com with and without JavaScript

http://uk.video.yahoo.com/

I earlier used the YouTube API to build easy captioning

interfaces.

I also used the YouTube API earlier to build easy

captioning interfaces.

http://icant.co.uk/sandbox/youtube-captioning.html

Which inspired others to hack their annotations API:

http://www.nihilogic.dk/labs/youtubeannotations/

And again others to build a whole web app about it:

http://www.tubecaption.com/watch?v=jpCPvHJ6p90&vcId=137

and maybe, just maybe YouTube to now offer it aswell... (yeah, I don’t believe it myself either)

The main trick is to make Flash and JavaScript talk via

APIs.

Flash accessibility is much harder than just making the movie keyboard accessible.

The big issue is that especially in Firefox you cannot focus

the Flash movie with the keyboard.

Flash, however, can talk to JavaScript and get

parameters.

If you build your Flash component to call outside JavaScripts notifying them

about the happenings, sky is the limit.

If you write out your Flash using SWFObject, you can send any parameter you

want.

But what if you don’t have a Flash developer or you don’t

have time and money to build your own player?

This is where geeks come in.

Geeks like Scott Schiller

Photo of Scott Schiller

Scott works for Flickr, so naturally he’d spend his free

time on...

...writing an MP3 player for JavaScript.

Using his Soundmanager2, you can create a player for a

list of MP3s you link to in HTML.

http://www.schillmania.com/projects/soundmanager2/

http://www.schillmania.com/projects/soundmanager2/

http://www.schillmania.com/projects/soundmanager2/

Other geeks found this, and started to mix it with

transcripts of music to create a Karaoke machine..

http://dt.in.th/2008–05–18.javascript-karaoke-lyric-scroller.html

Seemingly pointless bells and whistles...

... but using this you could build a podcast and transcript

viewer that works...

... for sensory impaired visitors and everybody else

alike!

For video, there’s Jeroen Wijering who built the JW FLV

Media Player.

Screenshot of the JW Video Player

http://www.jeroenwijering.com/?item=JW_FLV_Player

Using this, you can embed FLV videos easily into web sites and have an API to control

them.

Using the right meta data, you can also add audio

descriptions and captions.

Screenshot of the JW player with captioning and audio description

showing a scene from Coronation Street.

http://www.jeroenwijering.com/?item=JW_FLV_Player

Another area we are seeing some tweaking in is browser

and software extensions.

AxsJax or Access-enabling Ajax is a JavaScript library that injects ARIA attributes

into web sites.

http://code.google.com/p/google-axsjax/

WebVisum is a Firefox 3 extension that crowdsources fixes for web sites – including allowing screenreader users to fix issues themselves and

work around CAPTCHAs.

http://webvisum.com/

IBM’s social accessibility project works in a similar

fashion, except it is a screen reader extension that reports barriers to volunteers to fix.

http://services.alphaworks.ibm.com/socialaccessibility/

http://webvisum.com/

The final proof for me that we can work together on

removing barriers was throwing the idea out at

BBC’s Mashed08 hack day.

Photo of me and screenshot of the “Easy BBC Audio Archive”

http://www.flickr.com/photos/arron-woods/2605302289/

I won a prize – funding for my own hack event.

On the 19th and 20th of September 2008, around a

100 people listened to 6 speakers...

... speakers with different barriers to the web or

researchers that spoke for people with barriers.

On the second day about 30 hackers took these insights

and built solutions that work around these barriers.

We now have presentations on the barriers faced by the

blind, dyslexic, learning disabled, the impacts of MS

and and and...http://scriptingenabled.org/presentations/

The videos of these talks are now being transcribed and

will be online soon.

We have hacks working around these issues.

Easy Google Maps

Reduce to the max

Easy Audio Books

Stylesheet Selector

Accessible Editing

...http://scriptingenabed.pbwiki.com/

The energy at the event was amazing.

For *nearly 10 hours* we presented and discussed in Q&A sessions on day one.

Hackers didn’t bother with presenting and competing

with their hacks from 4–5pm as intended...

... but instead stayed till 7.30pm and kept hacking until we had to leave the

building!

But the best thing of all is seeing what your hack enables people to do.

http://www.youtube.com/watch?v=CwsDKaalgq8&

http://www.youtube.com/watch?v=QiuT0y0KR6I

http://www.youtube.com/watch?v=dHBvqwRAduw

So instead of building the next “photos on a map with search results and videos on

top” hack...

Have a look at what keeps people from enjoying the

web because of their physical condition.

And remove that barrier!

Keep in touch:

Christian Heilmann

http://wait-till-i.com

http://scriptingenabled.org

http://twitter.com/codepo8

T H A N K S !