HTML and XHTML
This technique relates to Success Criterion 3.2.2: On Input (Sufficient as a way to meet G80: Providing a submit button to initiate a change of context).
The objective of this technique is to allow the user to control when an action is
performed, rather than having the action occur as a side effect of choosing a value
select element. The user may inspect the different values of the
select element, or may accidentally choose the wrong value, without causing the action to
occur. When the user is satisfied with their choice, they select the button to perform
This is particularly important for users who are choosing the value of the
select element via the keyboard, since navigating through the options of the
select element changes the value of the control.
Example 1: A Calendar
A Web page lets the user choose any month of any year and display the calendar for that month. After the user has set the month and year, he displays the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.
<label for="month">Month:</label> <select name="month" id="month"> <option value="1">January</option> <option value="2"> February</option> ... <option value="12">December</option> </select> <label for="year">Year:</label> <input type="text" name="year" id="year"> <input type="button" value="Show" onclick = "...">
Example 2: Choosing an action
select element contains a list of possible actions. The action is not performed until the
user presses the "Do it" button.
<form action="http://somesite.com/action" method="post"> <label for="action">Options:</label> <select name="action" id="action"> <option value="help">Help</option> <option value="reset">Reset</option> <option value="submit">Submit</option> </select> <button type="submit" name="submit" value="submit">Do It </button> </form>
Resources are for information purposes only, no endorsement implied.
select element/button element combination:
- Check that focus (including keyboard focus) on an option in the
selectelement does not result in any actions
- Check that selecting the button performs the action associated with the current
- All checks are true.