Time limits that are controlled by client-side scripting.
The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see
A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes.
In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.
On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.
Determine if an option was provided to extend the time limit.
#2 is true and more time is provided to complete the interaction.
HTML and XHTML with scripting support.
The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the and events to change the image when the element receives and loses focus.
The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching , , and event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.
Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: . The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribue based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.
It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.
Changing Image Source in a Device Independent Manner
Mouse over or tab to the links below and see the image change.
W3C Web Accessibility Initiative &
W3C Internationalization
]]>
Load the Web page and test the events using a mouse and via the keyboard.
Check that the "standard" image is displayed as expected when the Web page is loaded.
Using the Mouse
Move the mouse over the element containing the event handlers (in this example it is an anchor element). Check that the image changes to the expected image.
Move the mouse off of the element. Check that the image changes back to the "standard" image.
Using the Keyboard
Use the keyboard to set focus to the element containing the event handlers. Check that the image changes to the expected image.
Use the keyboard to remove focus from the element (generally by moving focus to another element). Check that the image changes to the "standard" image.
Verify that the layout of other elements on the page is not affected when the image is changed.
All of the steps for the above checks are true.
Scripting technologies which use scripting alerts for non-emergency communication.
The objective of this technique is to display a dialog containing a message (alert) to 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-emergency information. Alerts for non-emergency purposes such as displaying a quote of the day, helpful usage tip, or count down to a particular event, are not presented unless the user enables them through an option provided in the Web page.
This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is false. 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 enable 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 disabled and the user must manually enable them. Alternatively, the author could use cookies to store user preferences across sessions.
The script below will display a quote in an alert box every ten seconds, if the user selects the "Turn Alerts On" button. The user can turn the quotes off again by choosing "Turn Alerts Off".
var bDoAlerts = false; // global variable which specifies whether to
// display alerts or not
/* function to enable/disable alerts.
* param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts. Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
if (bDoAlerts) {
alert(aMessage);
}
}
// example usage - a loop to display famous quotes.
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 showQuotes() {
if (++gCounter >= quotes.length) {
gCounter = 0;
}
doAlert(quotes[gCounter]);
setTimeout("showQuotes();", 10000);
}
showQuotes();
]]>
Within the body of the page, include a way to turn the alerts on and off. Below is one example:
Press the button below to enable the display of famous quotes
using an alert box
]]>
Here is a working example of this code:
For a Web page that supports non-emergency interruptions using a JavaScript alert:
Load the Web page and verify that no non-emergency alerts are displayed.
Verify there is a mechanism to activate the non-emergency alerts.
Activate the non-emergency alerts and verify that the alerts are displayed.
For a Web page that supports non-emergency interruptions using a JavaScript alert, checks 1, 2, and 3 above are true.
Time limits exist that are controlled by script.
The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.
This technique involves time limits set with the method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.
A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.
Stock Market Quotes
Stock Market Quotes
...etc...
]]>
On a Web page that has a time limit controlled by a script:
load the page and start a timer that is 20 seconds less than the time limit.
when the timer expires, check that a confirmation dialog is displayed warning of the impending time limit.
#2 is true.
Content that validates user input.
The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.
The following script will check that a valid date has been entered in the form control.
Date:
]]>
For form fields that require specific input:
enter invalid data
determine if an alert describing the error is provided.
#2 is true
HTML and XHTML with support for scripting. This technique uses the try/catch construct of JavaScript 1.4.
This technique has been tested on Windows XP using JAWS 7.0 and WindowEyes 5.5 with both Firefox 1.5 and IE 6. Note that JavaScript must be enabled in the browser.
The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one or more select elements on the Web page, an onchange event on one, can update the options in another select element on the Web page. All of the data required by the select elements is included within the Web page.
It is important to note that the select item which is modified is after the trigger select element in the reading order of the Web page. This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. This technique relies on JavaScript support in the user agent.
This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the Web page.
Overview of the code below
countryLists array variable which contains the list of countries for each continent in the trigger select element.
countryChange() function which is called by the onchange event of the continent select element.
The XHTML code to create the select elements in the body of the Web page.
Dynamic Select Statements
Dynamic Select Statements
]]>
Here is a working example:
Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select.
Navigate to the select element that is updated by the trigger (in this example, the one to select countries).
Check that the matching option values are displayed in the other select element.
Navigate to the trigger select element, navigate through the options but do not change the value.
Check that the matching option values are still displayed in the associated element.
It is recommended that the select elements are tested with an assistive technology to verify that the changes to the associated element are recognized.
Step #3 and #5 are true.
Applies to all content that uses Script to implement functionality.
The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the Success Criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.
In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
The following table suggests keyboard event handlers to pair mouse event handlers.
| Use... | ...with |
|---|---|
|
|
|
|
|
|
|
|
|
|
1 Although is in principle a mouse event handler, most HTML and XHTML user agents process this event when the control is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event. It is included here for completeness since non-HTML user agents do have this issue.
2 Since the event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.
Some mouse-specific functions (such as and ) do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).
In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.
]]>
is duplicated by an appropriate keyboard event . The attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.
]]>
This example uses tabindex on an element. Even though this is currently invalid, it is provided as a transitional technique to make this function work.
Find all interactive functionality
Check that all interactive functionality can be accessed using the keyboard alone
#2 is true
ECMAScript used inside HTML and XHTML
This example was successfully tested on Windows XP with IE 6 and Firefox 1.5.0.1 using both JAWS 7 and WindowEyes 5.5. Note that when adding new content onto a page, the screen readers may not automatically speak the new content. In order to insure that new content is spoken, set focus to the new element or make certain that it is added below the current location and will be encountered as the user continues to traverse the page.
The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using or . The method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the property is not part of the DOM specification and thus should be avoided. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The function can be used to create elements within the DOM. The is used to create text associated with elements. The , , and functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.
When adding focusable elements into the document, do not add attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a attribute.
This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.
For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.
Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server.
Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.
Below are the helper functions to create the error message and to set focus to the associated form field.
0)
objAnchor.setAttribute('id', strID);
objListItem.appendChild(objAnchor);
return objListItem;
}
// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
return true;
// set focus to the form control
var strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm[strFormField].focus();
return false;
}]]>
Here is the HTML for the example form.
ECMAScript Form Validation
Form Validation
]]>
This example is limited to client-side scripting, and should be backed up with server-side validation. The example is limited to the creation of error messages when client-side scripting is available.
Here is a link to a working example:
HTML 4.01
For pages that dynamically create new content:
Examine the source code and check that the new content is not created using document.write(), innerHTML, outerHTML, innerText or outerText.
Check #1 is true.
Technologies that support script-controlled blinking of content.
The objective of this technique is to control blinking with script so it can be set to stop in less than five seconds by the script. Script is used to start the blinking effect of content, control the toggle between visible and hidden states, and also stop the effect at five seconds or less. The function can be used to toggle blinking content between visible and hidden states, and stop when the number of iterations by the time between them adds up to nearly five seconds.
This example uses JavaScript to control blinking of some HTML and XHTML content. JavaScript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within five seconds.
New item!
...
]]>
Here is a working example of this code:
For each instance of blinking content:
Start a timer for 5 seconds at the start of the blink effect.
When the timer expires, determine if the blinking has stopped.
For each instance of blinking content, #2 is true.
HTML 4.01 and XHTML 1.0
The objective of this technique is to avoid confusion that may be caused by
the appearance of new windows that were not requested by the user. Suddenly
opening new windows can disorient or be missed completely by some users.
If the document type does not allow the attribute (it
does not exist in HTML 4.01 Strict or XHTML 1.0 Strict) or if the developer
prefers not to use it, new windows can be opened with ECMAScript. The
example below demonstrates how to open new windows with script: it adds an
event handler to a link ( element) and warns the user that the
content will open in a new window.
Markup:
The script is included in the head of the document, and the link has an id that can be used as a hook by the script.
…
Show Help
Script:
Activate each link in the document to check if it opens a new window.
For each link that opens a new window, check that it uses script to accomplish each of the following:
indicates that the link will open in a new window,
uses device-independent event handlers, and
allows the browser to open the content in the same window if a new window was not opened.
#2 is true.
HTML and XHTML, script
The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.
The reading order in a screen-reader is based on the order of the HTML or XHTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.
Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.
This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an ID for the new menu as a parameter.
Toggle]]>
The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the link. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.
CSS is used to make the div and link look like a menu.
Find all areas of the page that trigger dialogs that are not pop-up windows.
Check that the dialogs are triggered from the click event of a button or a link.
Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.
#2 and #3 are true.
HTML and XHTML, script
The objective of this technique is to provide a mechanism for re-ordering component which is both highly usable and accessible. The two most common mechanisms for reordering are to send users to a set-up page where they can number components, or to allow them to drag and drop components to the desired location. The drag and drop method is much more usable, as it allows the user to arrange the items in place, one at a time, and get a feeling for the results. Unfortunately, drag and drop relies on the use of a mouse. This technique allows users to interact with a menu on the components to reorder them in place in a device independent way. It can be used in place of, or in conjunction with drag and drop reordering functionality.
The menu is a list of links using the device-independent onclick event to trigger scripts which re-order the content. The content is re-ordered in the Document Object Model (DOM), not just visually, so that it is in the correct order for all devices.
This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.
The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.
The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.
Text in the black module
...
]]>
Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.
The CSS for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.
Find all components in the Web Unit which can be reordered via drag and drop.
Check that there is also a mechanism to reorder them using menus build of lists of links.
Check that the menus are contained within the reorderable items in the DOM.
Check that scripts for reordering are triggered only from the onclick event of links.
Check that items are reordered in the DOM, not only visually.
#2 through #5 are true.
Technologies that provide client side scripting.
This technique allows users to skip repeated material by placing that material in a menu that can be expanded or collapsed under user control. The user can skip the repeated material by collapsing the menu. The user invokes a user interface control to hide or remove the elements of the menu. The resources section lists several techniques for menus, toolbars and trees, any of which can be used to provide a mechanism for skipping navigation.
Similiar approaches can be implemented using server-side scripting and reloading a modified version of the Web page.
The navigation links at top of a Web page are all entries in a menu implemented using HTML, CSS, and Javascript. When the navigation bar is expanded, the navigation links are available to the user. When the navigation bar is collapsed, the links are not available.
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
...
Toggle Navigation Bar
...
]]>
Here is a working example of this code:
The table of contents for a set of Web pages is repeated near the beginning of each Web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
...
...
...
]]>
Here is a working example of this code:
Check that some user interface control allows the repeated content to be expanded or collapsed.
Check that when the content is expanded, it is included in the programmatically determined content at a logical place in the reading order.
Check that when the content is collapsed, it is not part of the programmatically determined content.
All checks above are true.
HTML and XHTML, Script
, , , , , , and , and limits its value to the range between 0 and 32767. The use of with other element types and the tabindex value -1 is supported in Internet Explorer 5.01 and higher, and Firefox 1.5 and higher, Opera 9.5 and higher and Camino. Note that modifying focus through script can cause unpredictable behavior in screen readers that use a virtual cursor.
The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as or . This technique ensures that the element is focusable by setting the attribute, and it ensures that the action can be triggered from the keyboard by providing an or handler in addition to an handler.
When the attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using .
Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.
Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.
The element on the page is given a unique attribute and a attribute with value 0. A script uses the Document Object Model (DOM) to find the element by its id and add the handler and the handler. The handler will invoke the action when the Enter key is pressed. Note that the element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the event of the element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event or the event object is in use
if (window.event) {
key = window.event.keyCode;
} else if (event) {
key = event.keyCode;
}
// Was the Enter key pressed?
if (key == 13) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing
// div element. This function must be called after the div element with id="active" has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
// It is important to return false from the onclick handler to prevent the href attribute
// from being followed after the function returns.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
active.onkeyup=doSomethingOnEnter;
}
Here is the link to modify with a javascript action:
Do Something
Hello, world!
...
]]>
Here is a working example of this code:
HTML 4.01
HTML 4.01
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0
WAI-ARIA Primer,
In a user agent that supports Scripting:
Click on the control with the mouse
Check that the scripting action executes properly
Check that it is possible to navigate to and give focus to the control via the keyboard
Set keyboard focus to the control
Check that pressing ENTER invokes the scripting action.
All of the checks are true
Client-side scripting used with HTML and XHTML
The purpose of this technique is to allow users to choose to have additional information added to the text of links so that the links can be understood out of context.
Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.
A link is provided near the beginning of the page that will expand the link text of the links on the page so that no additional context is needed to understand the purpose of any link. It must always be possible to understand the purpose of the expansion link directly from its link text.
This technique expands the links only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.
This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.
var expanded = false;
var linkContext = {
"hist":" version of The History of the Web",
"cook":" version of Cooking for Nerds"
};
function doExpand() {
var links = document.links;
for each (link in links) {
var cn = link.className;
if (linkContext[cn]) {
span = link.appendChild(document.createElement("span"));
span.setAttribute("class", "linkexpansion");
span.appendChild(document.createTextNode(linkContext[cn]));
}
}
objUpdate = document.getElementById('expand');
if (objUpdate)
{
objUpdate.childNodes[0].nodeValue = "Collapse links";
}
expanded = true;
}
function doCollapse() {
objUpdate = document.getElementById('expand');
var spans = document.getElementsByTagName("span");
var span;
// go backwards through the set as removing from the front changes indices
// and messes up the process
for (i = spans.length - 1; i >= 0; i--) {
span = spans[i];
if (span.getAttribute("class") == "linkexpansion")
span.parentNode.removeChild(span);
}
if (objUpdate)
{
objUpdate.childNodes[0].nodeValue = "Expand links";
}
expanded = false;
}
function toggle() {
if (expanded) doCollapse();
else doExpand();
}
...
Books for download
...
]]>
Here is a working example of this code:
Check that there is a link near the beginning of the page to expand links
Check that the link identified in step 1 can be identified from link text alone
Find any links on the page that cannot be identified from link text alone
Activate the control identified in step 1
Check that the purpose of the links identified in step 3 can now be identified from link text alone
Checks #1, #2, and #5 are true
HTML and XHTML, CSS, Script
This technique can be used on user agents that don't support the pseudoclass but do support script, including Microsoft Internet Explorer.
This purpose of this technique is to allow the author to use JavaScript to apply CSS, in order to make the focus indicator more visible than it would ordinarily be. When an element receives focus, the background color or border is changed to make it visually distinct. When the element loses focus, it returns to its normal styling. This technique can be used on any HTML user agent that supports Script and CSS, regardless of whether it supports the :focus pseudoclass.
In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.
function toggleFocus(el)
{
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
...
focus me
...
]]>
Tab to each element in the page
Check that the focus indicator is visible
Step #2 is true
Script used with HTML or XHTML.
The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The
In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors.
This example validates required fields as well as fields where a specific format is required. When an error is identified, the script inserts a list of error messages into the DOM and moves focus to them.
Here is the HTML for the example form:
Form Validation
Form Validation
The following form is validated before being submitted if scripting is available,
otherwise the form is validated on the server. All fields are required, except those
marked optional. If errors are found in the submission, the form is cancelled and
a list of errors is displayed at the top of the form.
Please enter your details below.
Validating Form
Second Form
]]>
Here is the Javascript which performs the validation and inserts the error messages:
0)
{
// If not valid, display error messages
objError = objForm.getElementsByTagName('div');
// Look for existing errors
for (iCounter=0; iCounter 0)
{
objAnchor.id = strErrorID;
}
// Use the label prompt for the error message
objAnchor.appendChild(document.createTextNode(strError));
// Add keyboard and mouse events to set focus to the form control
objAnchor.onclick = function(event){return focusFormField(this, event);};
objAnchor.onkeypress = function(event){return focusFormField(this, event);};
objListItem.appendChild(objAnchor);
objList.appendChild(objListItem);
}
function focusFormField(objAnchor, objEvent)
{
var strFormField, objForm;
// Allow keyboard navigation over links
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
{
return true;
}
}
// set focus to the form control
strFormField = objAnchor.href.match(/[^#]\w*$/);
objForm = getForm(strFormField);
objForm[strFormField].focus();
return false;
}
// Function to return the form element from a given form field name
function getForm(strField)
{
var objElement = document.getElementById(strField);
// Find the appropriate form
do
{
objElement = objElement.parentNode;
} while (!objElement.tagName.match(/form/i) && objElement.parentNode);
return objElement;
}
// Function to log the error in a list
function logError(objField, objLabel, objList, strErrorID)
{
var iCounter, strError;
// Search the label for the error prompt
for (iCounter=0; iCounter
Here is a working example of this technique implemented using PHP, Javascript, CSS and XHTML:
Create error messages using anchor tags and appropriate scripting via the technique above.
Load the page.
Enter a valid value in the field(s) associated with an error message and verify that no error messages are displayed.
Enter an invalid value in the field(s) associated with an error message and verify that the correct error message for the field is displayed.
Verify that the error messages receive focus.
Enter a valid value in the field(s) associated with the displayed error message and verify that the error message is removed.
Repeat for all fields with associated error messages created via anchor tags.
It is recommended that you also run the above procedure using an assistive technology.
Checks #2, #3, #4, and #5 are all true.
Technologies that support script-controlled scrolling of content.
The objective of this technique is to provide a way for users to stop scrolling content when the scrolling is created by a script. Scrolling content can be difficult or impossible to read by users with low vision or with cognitive disabilities. The movement can also be distracting for some people making it difficult for them to concentrate on other parts of the Web page.
In this example CSS and Javascript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement.
This implementation will display the full text and omit the link when Javascript or CSS are unsupported or inactive.
The following code is an amended version of webSemantic's Accessible Scroller (as at July 2008).
The XHTML component:
This text will scroll and a Pause/Scroll link will be present
when Javascript and CSS are supported and active.
...
]]>
The CSS component:
The JavaScript component:
A working example of this code,
Check that a mechanism is provided to pause the scrolling content.
Use the pause mechanism to pause the scrolling content.
Check that the scrolling has stopped and does not restart by itself.
Check that a mechanism is provided to restart the paused content.
Use the restart mechanism provided to restart the scrolling content.
Check that the scrolling has resumed from the point where it was stopped.
Checks #3 and #6 are true.
Client-side scripting.
Calculating size and position can be complex and different browsers can produce different results. This can occur when the CSS styling mixes padding, margins and widths for an object, or when it mixes an offset and plain value, e.g., offsetWidth and width. Some of these behave differently in reaction to zooming. See
The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.
There are four properties in JavaScript that help determine the size and position of elements:
(the height of the element in pixels)
(the width of the element in pixels)
(the distance of the element from the left of its parent (offsetParent) in pixels)
(the distance of the element from the top of its parent (offsetParent) in pixels)
Calculating the height and width using and is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters; (the name of the element in question), and the offset property ( or ):
The Javascript function:
The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left:
Open a page that is designed to adjust container sizes as text size changes.
Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature).
Examine the text to ensure the text container size is adjusted to accommodate the size of the text.
Ensure that no text is "clipped" or has disappeared as a result of the increase in text size.
Checks #3 and #4 are true.
Script used with HTML or XHTML.
The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the
Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Technology.
Even though we do not want to navigate from this link, we must use the href attribute on the
The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
function doStuff()
{
//do stuff
return false;
}
do stuff
]]>
Link that runs script, but navigates to another page when script is not available. This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.htm. Dostuff.htm must provide the same functionality as the script.The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.htm after the script ran.
function doStuff()
{
//do stuff
return false;
}
do stuff
]]>
A working example of this code is available. Refer to
Button that runs a script and falls back to a form post for users without script. This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting.
function doStuff()
{
//do stuff
}
]]>
A working example of this code is available. Refer to
Button that runs a script, implemented with . Note that an alt attribute must be added to the
function doStuff()
{
//do stuff
return false;
}
]]>
Button that runs a script, implemented with , or . This approach should only be used when script is relied upon.
]]>
Button that runs a script, implemented with
Do Stuff
]]>
For all script actions associated with
In a user agent that supports Scripting
Click on the control with the mouse.
Check that the scripting action executes properly.
If the control is an anchor element, check that the URI in the
Check that it is possible to navigate to and give focus to the control via the keyboard.
Set keyboard focus to the control.
Check that pressing ENTER invokes the scripting action.
If the control is an anchor element, check that the URI in the
In a user agent that does not support Scripting
Click on the control with the mouse.
If the control is an anchor element, check that the URI in the
Check that it is possible to navigate to and give focus to the control via the keyboard.
Set keyboard focus to the control.
If the control is an anchor element, check that pressing ENTER invokes the URI of the anchor element's
All of the above checks are true.
Any technology that moves, blinks, or updates text and can create a static block of text.
Some Web pages display scrolling text because there is limited space available. Scrolling the text in a small text window makes the content available for users who can read quickly enough, but causes problems for users who read more slowly or use assistive technology. This technique provides a mechanism to stop the movement and make the entire block of text available statically. The text may be made available in a separate window or in a (larger) section of the page. Users can then read the text at their own speed.
This technique does not apply when the text that is moving can not be displayed all at once on the screen (e.g., a long chat conversation).
This technique can be used in combination with a style switching technique to present a page that is a
A large block of text is scrolled through a small marquee area of the page. A button lets the user stop the scrolling and display the entire block of text.
This code example requires that both CSS and JavaScript be turned on and available.
The CSS component:
]]>
The script and HTML content:
var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
} else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
} else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
.... Text to be scrolled ...
...
]]>
Here is a working example of this code:
HTML and XHTML used with script.
Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a
To be accessible, these dialogs must follow a few simple rules.
Trigger the script that launches the dialog from the event of a link or button.
Place the dialog
Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.
It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.
The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog.
The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM.
In this example, the Submit and Reset buttons inside the dialog simply hide the
Options
Edit Sort Information
...
]]>
The
The script toggles the display of the popup
A working example,
Microsoft Developer Network Whitepaper:
Find all areas of the page that trigger dialogs that are not pop-up windows.
Check that the dialogs can be opened by tabbing to the area and hitting enter.
Check that, once opened, the dialog is next in the tab order.
Check that the dialogs are triggered from the click event of a button or a link.
Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.
Checks #2, #3, #4 and #5 are true.