I was recently given a design that included a customised select. Since that’s currently only available in the most recent version of Chrome, I went looking for libraries and instructions on how to create your own select. And I came across a problem: none of them talked about the keyboard controls in a way that matched with how select works for me with the keyboard. Until I considered that I was using Firefox and most people use Chrome. Turns out they don’t work identically. So I went through the main browsers and documented what did what.
Same for all browsers
Most keyboard controls are the same in all browsers.
When select is closed:
Enter: does nothing
Space: opens select
Tab: goes to next tabbable element
Shift + tab: goes to previous tabbable element
Down arrow: opens select
Up arrow: opens select
Any letter key: selects first/next option that starts with that letter
When select is open:
Enter: selects focused option and closes select
Escape: closes select
Down arrow: focuses next option
Up arrow: focuses previous option
Home: focuses option at top of list
End: focuses option at bottom of list
Any letter key: selects first/next option that starts with that letter
Different in different browsers
I tested in Firefox, Chrome, Safari and Opera, all on a Mac. Although a Mac has different keyboard shortcuts to Windows and Linux, navigating a website doesn’t seem to be any different on a Mac.
When select is closed
Escape
Firefox: goes to next tabbable element
The rest: does nothing
Page down
Firefox: selects option one page down
The rest: does nothing
Page up
Firefox: selects option one page up
The rest: does nothing
Home
Firefox: selects option at top of list
The rest: does nothing
End
Firefox: selects option at bottom of list
The rest: does nothing
When select is open
Space
Firefox: does nothing
The rest: selects focused option and closes select
Tab
Firefox: selects focused option and closes select
The rest: selects random option
Shift + tab
Firefox: selects focused option and closes select
The rest: selects random option
Page down
Firefox: focuses option one page down
The rest: focuses option at bottom of list
Page up
Firefox: focuses option one page up
The rest: focuses option at top of list
