Select menus (or combo boxes or drop-down menus) are, for accessibility, similar to text entry fields, and all the techniques discussed previously apply to them -- with one notable exception.
The one difference between text entry fields and select menus is that the technique of placing the prompt in the select menu has less of a disadvantage for select menus. If the prompt is placed in the select menu as the selected (default) item with, say, a null value (value=""), then the users will encounter the prompt as they Tab to the select menu the first time.
The code for this select menu looks something like this:
<select name="ship_to_state" size="1"> <option selecedD value="">State/Province </option> <option value="AL">Alabama </option> <option value="AK">Alaska </option> <option value="AB">Alberta </option> ...
The disadvantage of using a default option in the menu itself for the prompt in this way is that when you make a selection, move away and come back, the prompt is no longer there. In this example when one tabs away from the menu and comes back and hears "Select menu Alaska", it is pretty obvious where you are; but if you heard "Select menu 28", then you would have to ask, which of the numeric fields was that - age or date? So it is much better to handle the labeling as in all the cases above. Use the label element with the for and id attributes to programmatically connect the prompting information with the select menu. In part because of the default selected value technique and in part because of positioning, it is often the case for select menus, more than other controls, that there is no prompting text around to capture with the label element. We deal with that common situation with the title attribute.
This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.