Graceful Transformations and Unobtrusive JavaScripts

This a follow-up post to our views on accessibility and speech-enabling services for all. Note that some code examples may be deprecated but the underlying principles that are illustrated still apply. Browsers are in their nature both forward compatible and backward compatible. The forward compatibility comes from the built-in design that attributes and elements not understood by the browser are skipped and page rendering continues with the rest of the content. This makes it possible to provide fall-back content inside elements and have this content rendered only if the surrounding content is not renderable by the current browser. Similarly, extra information can be put in attributes and that information can be used only by dedicated software. An image can have both an ALT attribute and a TITLE attribute and if they exists simultaneously, different softwares can use whichever they want. Also, audio can be embedded in a web page using the OBJECT element, and inside that element the non-standard EMBED element can provide the same audio. In the accompanying NOEMBED element, a direct link to the audio can be provided. This means that the same code will work in all browsers, except the ones that misbehave and try to render both at once. This is one example of graceful transformation. Every visitor will be able to listen to the audio but some might need to click on the link and the different players used to play the audio might vary for different computers, but still there will always be audio. Another principle that comes naturally with graceful transformation is the use of JavaScripts in an unobtrusive way so that non-javascript environments are not interfered. Still, JavaScript environments can benefit from the extra functionality. This means that we honor techniques like HiJax where Ajax is used to speed up the user interface but if the corresponding links are clicked, the page reloads and displays the intended information. ReadSpeaker services will always provide basic functionality without requiring scripts. Every component in a web page can as we see it be divided into basic functionality and extended functionality. Basic functionality can for example be a search function where you can search and after clicking a button browse results. Improved functionality with scripts could eliminate the extra button click and incrementally show suggestions, or even hit counts, while still typing the query. Another example is a drop-down for selecting languages, and updating the view on-the-fly, where a NOSCRIPT alternative providing a “Change” button is the small but important step needed to make a service fully usable instead of unusable for certain users in certain technical environments under certain conditions. If the code we provide is integrated appropriately, the behaviour is that users with JavaScript might see a player showing up in the page while the audio is played. Users without JavaScripts will get the audio played by their standard media player. Instead of providing code like <a href=”” onclick=”playAudio(‘sound.mp3’); return false;”>Listen</a> or even <a href=”javascript:playAudio(‘sound.mp3’)”>Listen</a> it is much better in all aspects to write <a href=”sound.mp3″ onclick=”return playAudio(this.href);”>Listen</a> The script and the link share information so no inconsistencies can occur. In fact, the forward compatibility of browsers even makes a NOSCRIPT alternative unnecessary. Later we indicate how this can be rewritten to validate if decided. Another example is to differentiate settings that requires JavaScript from those that don’t. If the user wants to change the font of the text that is currently read as well as the speed of reading, it is accepted that the setting that changes the font requires Javascript since the functionality to change fonts on the fly will require it, but it would be against accessibility guidelines to also require JavaScript for changing the value of the reading speed since producing audio in different speeds is not done by the JavaScript.