12

Are there any standard keyboard shortcuts for making drop down lists appear? (in any kind of software, not just web based.)

I'm going to write some JavaScript to make the drop down lists (select and option tags) in a web app accessible via the keyboard.

I'm aware that Up Arrow and Down Arrow can change the selection, and pressing a letter key will cycle through the items starting with that letter (or typing a pattern will jump to the item starting with that sequence). But as selecting options in the list may change the form in this app I'd like to have a way to open the drop down so you can see the entire list and pick one of the options whilst viewing the entire list (or as much as will fit on screen).

Update:

AHA! Found something that works for some browsers.

When pressing Up Arrow or Down Arrow drop downs stay closed in web pages on Chrome, Firefox and IE9, and in those browsers settings dialogs.

However, in Firefox and IE pressing Alt+Up Arrow or Alt+Down Arrow opens the drop down for web pages and settings dialogs. It doesn't work in Chrome but there is a workaround. There is also a bug for chrome: Not able to open view/open drop-down list using keyboard

Also, the ribbon UI and settings dialogs in Excel 2010 do open the drop down when pressing just the up/down arrow keys.

Are the Alt+Up Arrow / Alt+Down Arrow shortcuts widely know/used? I'm debating whether to just add a polyfill for Chrome or write something to mimic the Office Ribbon behaviour in all browsers.

Improve this question
4
  • 1
    Just found that pressing space will open the menu in Chrome on Ubuntu.
    – you786
    Commented Sep 5, 2012 at 20:14
  • 1
    I didn't know about ALT+Up / ALT+Down.
    – Sauce McBoss
    Commented Sep 11, 2012 at 13:34
  • As of Chrome 70, the Alt-Up/Down approach seems to work.
    – Anomaly
    Commented Nov 26, 2018 at 20:42
  • 1
    Although it doesn't discuss dropdown functionality, the W3C's WAI-ARIA Authoring Guide gives a lot of information about making a ListBox accessible. They also link to an example of a collapsible dropdown, which could serve as something to model after.
    – The DIMM Reaper
    Commented Jul 29, 2019 at 16:05

3 Answers 3

Reset to default
2

As far as I know there aren't any special keys, and I can't find any information as to whether there should be one either.

In a some applications*, primarily desktop applications, the drop down opens when you start using the arrow keys or start typing to match one of the existing entries (this assumes the drop down has focus of course).

If you think about it this is to be expected, as any alphanumeric key could be an entry in the list.

If you want the list to open without changing the selection you could use a modifier key Ctrl, Shift or Alt with the arrow keys.

* I thought it was all applications but apparently it's not the case.

Improve this answer
6
  • all the drop downs I've tried do not open when using the arrow keys, they just move the selection without showing the list. Can you give a specific example of an app or system that behaves in this way?
    – Sam Hasler
    Commented Sep 3, 2012 at 9:33
  • @SamHasler - ah. I'll have to double check that.
    – ChrisF
    Commented Sep 3, 2012 at 9:36
  • Drop downs stay closed in web pages on Chrome, Firefox and IE9, and in those browsers settings dialogs. The ribbon UI and settings dialogs in Excel 2010 do open the drop down when pressing the up/down arrow keys.
    – Sam Hasler
    Commented Sep 3, 2012 at 10:11
  • @SamHasler - thanks for the research. It does look like there's no standard.
    – ChrisF
    Commented Sep 3, 2012 at 10:14
  • 1
    I just wanted to add, in Safari 6 the space bar opens the dropdown options when focused. Hadn't seen any mention of the space bar just modifier keys.
    – dannydev
    Commented Sep 5, 2012 at 16:05
0

I would do something similar to how auto-complete for a text box works in most browsers:

When selected, pressing down will a) display all options b) if all options are already displayed, then move along the selections.

Nothing shown at first

Nothing shown at first

On first Down-Arrow, you can start moving between selections. On first Down-Arrow, you can start moving between selections.

Improve this answer
0

If the keyboard focus the dropdown (with the TAB). The user see the whole list of the dropdown and he can go through the list with the TAB, item by item. The advantage is that the dropdown reacts similarly on the mouse and keyboard.

In my opinion focus for keyboardusers equals mouseclick for mouseusers.

Improve this answer
2
  • this is standard behaviour of windows apps (wpf,silverlight) as well
    – FrankL
    Commented Sep 11, 2012 at 7:35
  • forcing a keyboard user to open/interact with each element as they tab thru a page does nor sound good not intuitive. they should be able to navigate via tab, and if they choose to, interact with a currently selected item.
    – zonabi
    Commented Apr 11, 2016 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.