Page Comparison

Visual Example

Image Removed

Image Added

Acceptance Criteria

As a screen reader and keyboard only user I should:

• be provided with a form label

• be provided with a default label in the drop down menu

• be able to use the Spacebar or ENTER key on the keyboard to expand the drop down menu

• be able to use the up/down ↑/↓ arrows on the keyboard to navigate between menu options

• be able to use the ENTER key on the keyboard to make a selection

As a screen reader user I should:

• be able to explicitly associate the form label with the form control

When the form field has keyboard focus: 

•  The screen reader should announce the form label.

Markup and Code

<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">São Paulo</option>
<option value="11">Tokyo</option>
<option value="11">None</option>
</select>

View HTML markup on github