FORMS: Accessible Select Menu – Get the Code

Posted on by Mary Gillen

Select box - website elements - web design UI

Select menus with more than 11 options should be coded with option groups and labels in order to be accessible.

Here’s the code:

<form>
<label for=”favfood”>Choose your favorite food</label>
<select name=”favfood”>
<optgroup label=”Fruit”>
<option value=”1″>Apples</option>
<option value=”2″>Oranges</option>
<option value=”3″>Pears</option>
<option value=”4″>Bananas</option>
</optgroup>
<optgroup label=”Bread”>
<option value=”5″>Sourdough</option>
<option value=”6″>Wheat</option>
<option value=”7″>Rye</option>
<option value=”8″>White</option>
</optgroup>
<optgroup label=”Entree”>
<option value=”9″>Beef</option>
<option value=”10″>Chicken</option>
<option value=”11″>Fish</option>
</optgroup>
<optgroup label=”Cheese”>
<option value=”12″>American</option>
<option value=”13″>Swiss</option>
</optgroup>
</select>
</form>

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===