Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 20 Next »

Visual Example

Example 1

Example 2

ADD EXAMPLE TWO WITH THE WORDS “Select a City” AS THE DEFAULT LABEL AND THE MATCHING CODE EXAMPLE

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 control 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

  • No labels