Using scripts in an accessible web site

In this lesson

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.

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.

The following example is taken from the W3Schools website (http://www.w3schools.com/jsref/jsref_onmouseover.asp) . The original version only worked for users with a mouse. We have added the onFocus and onBlur events (shown in bold) so that keyboard users can see the changing colours of the ball as well.

<html>
<head>
<script type="text/javascript">
function mouseOver()
{document.b1.src ="images/b_blue.gif";}
function mouseOut()
{document.b1.src ="images/b_pink.gif";}
</script>
</head>
<body>
<a href="http://www.w3schools.com"
onmouseover="mouseOver()"
onFocus="mouseOver()"
onmouseout="mouseOut()"
onBlur="mouseOut()">
<img border="0" alt="Visit W3Schools!" title="Visit W3Schools!"
src="images/b_pink.gif" name="b1" /></a>
</body>
</html>

The ball above has been scripted with only the mouse activated code. If you use the tab key to navigate this page you may see a feint dotted line appear around the image, but it will not change colour

The ball above has been correctly scripted to be device independant. It has both the mouse and keyboard elements. As you tab over the ball it will change colour. (Hint use the Shift + Tab keys to go back)

Note that the events call scripts that have been written in the <head> section of the page. If the user cannot use scripts then this will not work. A preferable solution would therefor be to perform this action using the CSS a:hover and a:active pseudoclasses.

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

Accessible scripting

In this lesson

Using scripts to animate your web-page

Aim

JAVA APPLICATIONS

DEVICE INDEPENDENT EVENTS OF HTML

Go to - >