A common use of scripting is for navigation, as well as form validation and submission. Though these two topics are not necessarily related, sometimes they are combined, such that a form is used for navigation. JavaScript used in both of these situations can still be made accessible, so long as the developer does not assume the client side will support scripts. In general, it is a bad idea to use the script to submit the form; this is demonstrated below. Form submission should always be done using a submit button. Cascading style sheets (CSS) can be used to give buttons their attributes.
In general, form validation does not present accessibility obstacles. It is a good idea to include an alert box that informs the user exactly where an error occurred. An alternative solution is to have server-side scripting process the forms, and then dynamically generate a page informing the user of the errors.
Go! Submitting your choice to www.bob.com
<FORM name="NavForm" action="http://www.bob.com">
<label for="menu">Select a Search Engine:</label>
<SELECT name="menu" id="menu" size="2" tabindex="1">
<OPTION value="http://www.google.com">Google</OPTION>
<OPTION value="http://www.yahoo.com">Yahoo!</OPTION>
<OPTION value="http://www.hotbot.com">Hotbot</OPTION>
</SELECT>
</FORM>
<A href="javascript:document.NavForm.submit();">Go!</A> Submitting
your choice to www.bob.com <BR>
The problem with using links as the submission method is that you are relying on a script to do the actual submission. A script should never be called from the href attribute. Instead, the accessible solution is to use a traditional submit button through the INPUT tag.
A form that has drop downs or pull downs may be used in a website for navigational purposes.
<FORM name="NavForm2">
<label for="menu">Select a Search Engine:</label>
<SELECT name="menu" id="menu" size="2" tabindex="1">
onChange="location=document.NavForm2.menu.options [document.NavForm2.menu.selectedIndex].value"
<OPTION value="http://www.google.com">Google</OPTION>
<OPTION value="http://www.yahoo.com">Yahoo!</OPTION>
<OPTION value="http://www.hotbot.com">Hotbot</OPTION>
</SELECT>
</FORM>
The accessibility problem of this code is caused by the use of the onChange method with the SELECT tag. People who use a mouse have the ability to drop the menu down and choose their answer by selecting the item. For users who rely on the keyboard, this is difficult if not impossible. Try it yourself, tabbing through this page until you get to the drop down menu above. Then, try selecting the Hotbot search engine. If you successfully did this, you had Internet Explorer, and were extremely keyboard savvy (knowing that ALT-DOWN_ARROW is used to drop the menu down).
The solution to making drop-downs accessible is to use a submit button, and as needed, cascading style sheets for the button style. Also, the form can be made accessible, provided that it is not submitted using the script. Another alternative is to not use drop downs for navigation at all, but rather use links. Or, you could have the drop down be dynamically generated by the script, and in the NOSCRIPT section, provide a series of links.
Accessibility issues arise when developers create expanding menus for navigation. These menus may be visually appealing, but present accessibility nightmares. Expanding menus present two major problems:
When laying out a form, keep in mind that the order in which
you do so is important. Typically, screen readers read from top-to-bottom, left-to-right.
With improper design, all the labels could be read, followed by the input types.
It would be a good idea to install a screen reader to see how your form will
sound before launching it. A good beginner level tutorial for forms can be found at Accessible HTML/XHTML Forms: Beginner Level
.
The next page will discuss testing your script for accessibility.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Scripts/Java
Forms & Navigation
Previous Page
