Back to home

Select menus and keyboard use

Operation

Windows

• TAB to focus on select menu
• Focus appears on select menu
• DOWN ARROW move to next option, UP ARROW to move to previous option
• SPACEBAR to expand (make all optons visible)
• ESC to expand options (make all optons visible) - Windows only
• option chosen using ARROW only

OSX

• TAB to focus on select menu
• Focus appears on select menu
• DOWN ARROW move to next option, UP ARROW to move to previous option
• DOWN ARROW and UP ARROW automatically expand options
• Option chosen using ENTER or SPACE BAR.

Example

Code sample

<form class="example" action="#">
	<div>
		<label for="fruit">Favourite fruit</label>
		<select id="fruit" name="fruit">
			<option>Apple</option>
			<option>Apricot</option>
			<option>Avocado</option>
			<option>Banana</option>
			<option>Breadfruit</option>
			<option>Bilberry</option>
			<option>Blackberry</option>
			<option>Blackcurrant</option>
			<option>Blueberry</option>
			<option>Boysenberry</option>
			<option>Cantaloupe</option>
			<option>Currant</option>
			<option>Cherry</option>
			<option>Cherimoya</option>
			<option>Cloudberry</option>
		</select>
	</div>
</form>

Bottom of page - Back to home