Preventing Non-Essential Interruptions

This technique relates to the following sections of the guidelines:

Task:

Provide User Option to prevent Scripting Alerts

Baseline Implications:

  • If your baseline includes JavaScript, this technique is sufficient to satisy 2.2 L3 SC2
  • If your baseline does not include JavaScript, this technique is optional.

The JavaScript alert() function allows the web author to display a dialog containing a message for the user. When the alert is displayed, it receives focus and the user must activate the ok button on the dialog to dismiss it. Since these alerts cause focus to change they may distract the user, especially when used for non-essential information. If a web page uses alerts for a non-essential purpose such as displaying a quote of the day, helpful usage tip, or count down to a particular event, the user should be given the option to stop the alerts.

This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is true. A wrapper function is created to check the value of this variable before displaying an alert. All calls to display an alert are made to this wrapper function rather than calling the alert() function directly. Early in the page, a button is provided for the user to disable the display of alerts on the page. This technique works on a visit by visit basis, each time the page is loaded, alerts will be enabled and the user must manually disable them. See technique @@link that describes using cookies to store user preferences across sessions.

The web author should consider making the display of the non-essential alerts optional when the page first loads. Rather than defaulting the display of alerts to on when the page is loaded, consider making the default off and providing a mechanism for the user to turn them on. This is especially important if the display of alerts is triggered by some sort of timing mechanism where the user might have difficulty navigating to the button to turn off the alerts before another alert was displayed. While not desirable, this looping technique was used here in order to provide a simple, self contained example.

User Agent Notes:

This technique was tested successfully with JAWS 6.2, WindowEyes 5.0(beta), and Home Page Reader 3.04

Example:

<script type="text/javascript">
var bDoAlerts = true;  // global variable which specifies whether to display alerts or not

/* function to disable alerts.  Called from onclick event on button element in the page */
function disableAlerts() {
	bDoAlerts = false;

}

/* wrapper function for displaying alerts.  Checks the value of bDoAlerts
 *and only calls the alert() function when bDoAlerts is true.
 */
function {
function doAlert(aMessage) {
	if (bDoAlerts) {
		alert(aMessage);
	}
}


// example usage
var gCounter = -1;  // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showAlert() {
	if (++gCounter >= quotes.length) {
		gCounter = 0;
	}
	doAlert(quotes[gCounter]);
	setTimeout("showAlert();", 50000);
}
</script>

For this example the alerts are started when the page is loaded:

<body onload="showAlert();">

Within the body of the page, include a way to turn off the alerts. Below is one example.

<p>This page uses alerts, if you do not want any alerts displayed, press this button <button id="disableBtn" type="button" onclick="disableAlerts();">Turn Alerts Off</button> </p>

Testing Procedures: