Are "QuickLinks" dropdown lists for Web forms accessible?

A large number of websites use a "QuickLinks" form field, a single drop down list of links that takes the user immediately to a selected link without requiring that the user press a submit button. These form fields are not accessible. A standard HTML list box allows users to navigate up and down through the list using the arrow keys on the keyboard. People who can't use a mouse due to a visual impairment or physical disability depend on this keyboard functionality. "QuickLinks" fields automatically select the first field that a user arrows to, and activate that link. Therefore, the user is unable to scroll down any further in the list. it is possible for users to navigate the list using Alt+down arrow; however, few users are aware of this since it is not standard navigation for an HTML form.

Also, "QuickLinks" form fields work by executing a small Javascript function, triggered by the onSelect event (when a user "selects" an item from the list). They are therefore dependent on Javascript. If the user has scripts disabled, the dropdown list will be displayed, but none of the links will work.

The solution is to always provide a Submit button, and to avoid using onSelect or onChange events in dropdown lists. The resultant "QuickLinks" form will require one extra click or keystroke for users, but that is a small price to pay for assuring that all users have access.

Example of an Inaccessible Form: Quick Links

Originally presented by Shadi Abou-Zahra at the W3C Web Accessibility Best Practices Training in Paris on July 6, 2004. Copyright ® W3C (MIT, ERCIM, Keio), http://www.w3.org/WAI/EO/2004/07/forms

Warning: to demonstrate an example of some accessibility issues in HTML Forms, the following content intentionally has accessibility errors.

Quick Links: Incorrect Code

<script type="text/javascript">
function doSubmit() {
...
if(document.quick.link.value == 'WAI') {
document.location.href = "http://www.w3.org/WAI/"
...
</script>
<form name="quick" action="#">
<select name="link" onchange="doSubmit();">
...
<option value="WAI">Web Accessibility Initiative (WAI)</option>
...

Quick Links: Accessibility Issues

  • 9.2 Ensure that any element that has its own interface can be operated in a device-independent manner.
  • 9.4 Create a logical tab order through links, form controls, and objects.

Quick Links: Corrected Code

<script type="text/javascript">
function doSubmit() {
...
document.quick.submit();
...
</script>
<form name="quick" action="script.cgi" method="post">
<select name="link">
...
<option value="WAI" onclick="doSubmit();">Web Accessibility Initiative (WAI)</option>
...

Example of an Accessible Form: Quick Links

For additional information, see the article: How do scripting languages affect accessibility? and How can I develop accessible web-based forms?