scripting enabled - how to make the web more accessible with javascript and flash
DESCRIPTION
My talk at @mediaAjax 2008 about Scripting Enabled, what lead to it, what we can use now and where we are going with this. NowTRANSCRIPT
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?
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.
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