Aim: To design a web site that it is accessible for users with varying degrees of visual disability. It is the aim of the project to show how a site can be designed to use adaptive technologies in an engaging way.
Multimedia is often correctly criticised for producing sites that are inaccessible to users with disabilities. The problem, I hope to demonstrate, is not a matter of the multimedia technology itself but its application. Thoughtful use of Multimedia tools such as Flash may even aid accessibility.
Content: The narrated site was called Word Up [American Rap colloquialism meaning exactly]. Word Up is a satire site based on my own writing it is hoped that users of the site will find the content engaging and humorous.
It complies with XHTML 1.0 transitional standards. The site uses Cascading Style Sheets (CSS2) for page layout; Aural Cascading Style Sheets (ACSS) for aural rendering and has audio narration using Flash MX.
While the audio is still loading.
"p" to start the narration.
"s" to stop.
When the audio is fully loaded greater control is given to the user.
"p" to start the narration.
"s" to stop/pause.
"f" fast forward.
"r" rewind.
"b" back to the beginning.
Keystrokes where also added to aid in navigation.
"n" = next page.
"h" go to home page.
I found the navigation keystrokes a little buggy across different browsers so I will be eliminating this feature. Using Access Keys is a more reliable method to aid navigation.
The big issue for accessibility is escaping the movie. Once focus is drawn to a Flash movie there is no way to exit the movie with the tab key, you’re trapped inside [if you can't use a mouse]. The only way to escape would be to force the browser to refresh, or go back to the previous page.
The solution is to add a javascript link to a button in flash that draws focus to an element outside the Flash movie. From there uses can tab to the next link. This is the solution that Greg Giannis from Victoria University helped me come up with. On a flash button use the handler getURL to direct the page an HTML element.
In this case the "exit" button calls the quitConsole() function. The audio stops and the focus is pulled to a button under the flash movie.
function quitConsole () {
mySound.stop();
playing = false;
getURL("javascript:document.form1.skip.focus()");
}
The button is called "skip" and it sits inside a form called
"form1". So the full DOM address is "document.form1.skip";
focus() is what you want the browser to do. Literally draw focus.
Flash has the ability to "stream" or more accurately progressively download an mp3 audio file. However while the audio is downloading it is only possible to stop and restart the sound file from start. Once the file is fully downloaded it is then possible to build an audio controller that can fast forward, rewind, pause and resume.
The following code tracks the progressive of the mp3 file. When it is fully loaded a more functional audio console is made available for the user. An audio cue [a ding sound] was added to alert visually impaired users that the file was fully loaded.
_root.onEnterFrame = function() {
total_bytes = mySound.getBytesTotal(); // size of audio file
loaded_bytes = mySound.getBytesLoaded(); // how much loaded so far
if ( total_bytes > 100) {
// displays percentage loaded
display = Math.Floor(loaded_bytes/total_bytes*100);
// when fully loaded "ding" sounds and goes to full console
if (display== 100) {
playing = false;
myQue.start(0);// play que or "ding" sound now
gotoAndPlay(4);// go to full console
}
}
}