Never let a drop-down list load a new page by itself. Add a Go button the visitor presses after choosing, or replace the list with ordinary links, so looking through the options never moves anyone.

A list that moves you

Many older sites have a drop-down list near the top of a page: choose a location, select a service, jump to a section. Pick an option and the browser loads that page straight away.

With a mouse it feels quick. Click the list, click an option, arrive.

With a keyboard it fails. The visitor moves to the list with the Tab key and presses the down arrow to look through the options. The first press loads a page.

They never see the rest of the list, and pressing Back brings them to the same trap.

Who uses the keyboard

The first group is bigger than owners tend to assume, and it grows with the age of your customers. A business serving older people should expect some of them to avoid the mouse entirely.

Why the arrow key sets it off

The list runs a small script that waits for the selection to change and then loads the chosen page.

In several common browsers, pressing an arrow key on a closed list changes the selection at once, without opening it. To the script, that looks exactly like a final choice.

There is a way round it: on Windows, Alt and the down arrow open the list first, so the visitor can move through it and press Enter. Very few people know that, and they should not have to.

What WCAG 2.0 says

The accessibility guidelines most sites are judged against, WCAG 2.0, include a success criterion called On Input. It is a Level A requirement: the minimum of the three levels, and the one every site is expected to meet.

It says that changing the setting of a control, such as the selection in a list, should not by itself cause a change of context, like loading a new page, unless the visitor has been told beforehand.

A warning next to the list technically meets it. A button the visitor presses when ready meets it better, because it removes the problem instead of describing it.

Add a Go button

Keep the list, remove the automatic jump, and add a button beside it. Label the button with what it does: "Go", or better, "Show classes".

The visitor chooses with the mouse or the arrow keys, then presses the button or Enter. Nothing happens until they decide.

Give the list a visible label as well, connected to it in the page's code, so a screen reader announces what the list is for before reading the options.

Mouse users benefit too. A slip of the scroll wheel no longer sends them somewhere they did not mean to go.

Or replace it with links

For a short list, ordinary links beat any drop-down. All the choices are visible at once, nothing needs opening, and each one works with a keyboard, a mouse or a finger.

Search engines follow ordinary links far more reliably than options inside a list, so pages reached only through a jump menu can be harder for them to find.

On a phone, a drop-down shows nothing until it is tapped, then opens the phone's own picker. Visible links are quicker to scan and to tap.

Under ten or so options, links are usually the right answer. A long list of countries or product models can stay a drop-down, with a button.

A worked example

A senior fitness instructor teaches chair exercise, balance and gentle strength classes at five community halls and seniors' centres, and sees a few clients at home.

Her site, built in 2010, has a drop-down list at the top of the classes page: choose your location. Choosing one loads that hall's schedule.

A participant whose arthritis makes a mouse painful told her after class that the site only ever showed the first hall on the list.

The down arrow had loaded the first location every time, and Back returned her to the list with the same result. She had assumed the other halls had no classes listed online.

The list was replaced with five plain links, each giving the hall's name, its neighbourhood and the class days. On a phone they are easier to tap than the list was.

The instructor now checks every change to the site with the mouse unplugged, which takes a few minutes.

Other controls that move people

The same fault turns up elsewhere: radio buttons that submit a form when clicked, a sort order that reloads results the moment it changes, a language selector that switches the page as soon as it is touched.

Each needs the same fix. Let the visitor make a choice, then act on it only when they press a button.

Testing it yourself

Leave the mouse on the desk and work the page with the keyboard alone. Tab to each list, press the arrow keys, and watch whether anything happens before you press Enter.

Try a screen reader too if you can. Apple computers and iPhones include one, and there are free ones for Windows.

A few minutes per page is enough to find every list that jumps, and the same session usually turns up other things the keyboard cannot reach.

The counter-case

A list that only filters what is already on the page, without loading anything new or moving the visitor, causes far less trouble. Even so, content changing silently can confuse screen reader users, and a button is still clearer.

A site due for a complete rebuild this year might fold the fix into that work. But this is a small change that removes a barrier today, and it rarely needs to wait.

Whatever the site, the rule holds: changing a selection should never move the visitor until they ask it to.

The fix

  1. Find every drop-down that loads a page.
  2. Try each one using only the keyboard.
  3. Remove the automatic jump from the script.
  4. Add a Go button with a clear label.
  5. Label each list so screen readers announce it.
  6. Replace short lists with plain links.
  7. Test again with the mouse put away.

Step two takes a minute per list and settles the question. Owners who use a mouse never trip the problem, which is why it can survive on a site for years.

Another control that works by mouse and fails without one is covered in navigation built from an image map.

Frequently asked questions

Why do jump menus fail keyboard users?

Pressing an arrow key on a closed list changes the selection at once in several browsers, and the script loads that page before the visitor can see any other option.

Who is affected by this?

Anyone for whom a mouse is impractical because of a tremor, arthritis or injury, plus screen reader users, people with low vision and anyone with an awkward trackpad.

What does WCAG 2.0 say about it?

Its On Input criterion, at Level A, says changing a setting such as a list selection should not by itself load a new page unless visitors were told beforehand.

What is the simplest fix?

Remove the automatic jump and add a button beside the list, labelled with what it does. Nothing happens until the visitor presses it or presses Enter.

When should I use links instead?

For short lists of about ten options or fewer. Links show every choice at once, work with any keyboard, mouse or finger, and are easier for search engines to follow.

How do I test my own site?

Unplug the mouse, tab to each drop-down and press the arrow keys. If a page loads before you press Enter or a button, the list needs fixing.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Drop-down menus that load pages instantly?

Ask us for a keyboard check. We will try every list on your site and tell you which ones jump.

Start a Conversation