Using scripts to animate your web-page

Aim

This lesson explains how to introduce scripts and multimedia in a way that is accessible. First you should make the script or application as accessible as possible, but you will also need to provide an alternative for those who still cannot use the application for whatever reason.

JAVA APPLICATIONS

Java can add functionality and excitement to a web page. Unfortunately most assistive software does not handle Java well, and some people prefer not to allow Java to work on their computer for security reasons. This does not mean that you should not use Java to make your page more interesting – but it does mean that you need to take care to use accessible options where these are available and to always provide an HTML alternative in order to make the page universally accessible.

For all Java applications that deliver content, or provide a user function on the page you need to provide a <noscript> alternative that either presents the same information (such as a set of navigation links) or provides a link to a page that delivers the same content without using Java.

<script src="/javascript" language="JavaScript">
<-- some scripted application
// -->
</script>
<noscript>
Display this text only if JavaScript is not available
</noscript>

Note that the <noscript> alternative follows on immediately after the closing </script> tag.

If you employ a script that does not affect the page – such as the GoogleAnalytics script for monitoring web usage – there is technically no need to provide a <noscript> alternative. However, in instances where automated testing services flag this as an error it is possible to add a <noscript> alternative that does nothing (except satisfy the stupid robot). This needs to have some content to avoid being scored down for an empty alternative, we have found that <noscript><!- - stupid robot --></noscript> works well!

DEVICE INDEPENDENT EVENTS OF HTML

Since the development of HTML 4.0 is has been possible to let HTML events trigger actions in the browser, such as starting a JavaScript procedure when a user clicks on an HTML element. For a list of the attributes that can be inserted into HTML tags to define event actions visit http://www.w3schools.com/jsref/jsref_events.asp

Two commonly used HTML events are the OnMouseOver and OnMouseOut events that can change the visual effect of a link or display a message when the user passes the mouse cursor over the target. In practice this effect is best created using the stylesheet with the pseudoclasses as explained in lesson 10 (Navigation). However, for demonstration purposes only, we shall look at how javascripts can be used to acheive the same "rollover" effect.

In order for these events to work for keyboard users (those not using a mouse) it is important to add the OnFocus and OnBlur events to perform the same task when the Tab key is used for navigation.

Some functions do not yet have keyboard alternatives (for example OnMouseDown, OnMouseMove and OnClick) so are best avoided.