scripting enabled - how to make the web more accessible with javascript and flash

Scripting

Enabled

Christian Heilmann

@mediaAjax 2008, London, UK

Hello there, I’m Chris.

Today I will talk about Scripting Enabled or

“accessibility hacking”.

So why not start with the obvious example:

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.

Geeks and Non-Geeks do not talk much...

...if they do it is very likely to be in parallel.

What we need is a solution that works for everybody.

Computers love things structured and logical.

The multipass is to use the urge to fiddle with and

enhance and mash things up and steer it towards real

problems.

This needs a few things – first we need real information of

barriers that exist.

Most of all however it needs a few good men people.

My view on accessibility changed when I met this

man:

Picture of

Artur Ortega

http://www.flickr.com/photos/redux/2474124685/

He is blind and a class-A geek and hacker.

One of the first things I’ve seen him do was get

GreaseMonkey to fix sites for himself.

In an internal hack day he used GM to inject lang

attributes into the search result pages of Yahoo.

This has two effects:

Artur doesn’t have to suffer French or German

pronounced in English any longer.

And there is a higher search relevancy – if I know the

language I can distinguish between stop words and key

words.

I pestered one of the search engineers with the hack and

the idea...

...and now Yahoo has natural language support in the

search result pages.

I took the hack further by injecting lang attributes into twitter feeds, looping them

through the Google translation API:

http://icanhaz.com/twitterwithlang

Now mix someone like Artur with great developers, and

we are experiencing movement that can become a

force.

We have an internal group called “accessibility

stakeholders” which took on a lot of small problems and

hack around them.

Good presentation about them:

http://www.slideshare.net/cheilmann/mike-davies-ajax-and-accessibility

Here are some of the solutions:

Image of the search box in yahoo tv

Screenshot of the same search withoutjavascript - radio buttons and a search

box.•

Screenshot of a currency converter with and without JavaScript. With JavaScript you

get autosuggestions.

Another thing that gave me a boost is to realize that

accessibility is much bigger than technology.

Flash is evil, especially when you don’t do it right, right?

http://live.yahoo.com/

Who defines accessibility?

Using yahoo live a group of deaf people wereable to chat online for the first time.

Yahoo live showing hard of hearing people chatting with

another in sign language.

http://blog.deafread.com/abcohende/2008/02/15/yahoos-live-deaf-chat-room/

Another person to challenge me was Antonia Hyde:

(who hates being photographed)

http://www.slideshare.net/hi.antonia/rich-media-and-web-apps-for-people-with-learning-

disabilities

Shortly before YouTube announced their API to build

your own YouTube Player.

I took the API and Antonia’s findings and built

EasyYouTube.

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

So, first steps are taken to make geek inventiveness and

non-geek’s knowledge of issues to fix go together.

And there is a main market interest.

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/

There was a lot of positive feedback from hackers, and I

got funding to organise an “accessibility hack day”.

So here it is!

September 19th and 20th (aye, this week)

Saturday – Hack Day (practice what we heard

on day one)

Friday: – Fact finding (presentations)

Gamelab offices in 35 Kingsland Rd, London, E2 8AA

Henry Thomas Room of the Metropolitan University of London at 166–220 Holloway Road, London N7 8DB

http://scriptingenabled.org

It is just a start, you and others can take this on the

road.

Fancy having a go?

Thanks!Chris Heilmann

http://scriptingenabled.org

http://wait-till-i.com