How-Tos and Demos

Accessible Forms

Example: Labeling Pulldown Menus

Choose event month January February March April --- December
Choose event date 01 02 03 --- 25 ---
Choose event year 2003 2004 2005

In this example the <label> element and its for attribute are used to associate onscreen text with each pulldown menu (<select> element).

 

How to do it

Code Example for Labeling Pulldown Menus

 

Rationale

The key to accessible forms is that all users have access to the instructions necessary to complete and submit the form. The purpose of the <label> element is to make sure that assistive technology can identify the labels and instructions on the form.

 

How it sounds with the JAWS screen reader

Listen to JAWS read this form

 

JAWS transcript

[Enter. Forms mode on. (User presses the ENTER key)
Choose event month combo box. January.
February. (User presses the DOWN arrow)
March.
Tab. choose event date combo box. Zero one.
Zero two.
Zero three.
Tab. Choose event year combo box. twenty zero three.
Tab. Schedule event button.
enter. Forms mode off.] (User submits the form)

 

Applicable Accessibility Standards and Guidelines

• 508 Requirements and WCAG Checkpoints for pulldown menus