Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Visual Example

...

Example 1

...

Example 2

...

Acceptance Criteria

As a screen reader user, and keyboard only user and anyone with a learning disability I should:

  • be provided with a

...

  • form label

...

...

  • be provided with a

...

As a screen reader user I should be able to explicitly associate text labels with their respective form control.

...

  • 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 and keyboard only user I should:

  • be able to

...

  • explicitly associate the form label with the form control

When the form control has keyboard focus: 

  •  the screen reader should announce the form label

...

Markup and Code

Example 1

Code Block
languagehtml
<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>

Example 2

Code Block
<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="select">
<option selected="selected">Select a city</option>
<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>
</select>

View HTML markup on github