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 6 Next »

Visual Example


Acceptance Criteria

As a screen reader user, keyboard only user and anyone with a learning disability I should be provided with a default label.

As a screen reader user I should be provided with a form label for every form control.

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

As a screen reader and keyboard only user I should be able to use the up/down ↑/↓ arrows on the keyboard to navigate between menu options.

As a screen reader and keyboard only user I should be able to use the Spacebar on the keyboard to expand the drop down menu.


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>
</select>

View HTML markup on github

  • No labels