Menus That Only Open on Hover

The menu that only opens for a mouse

On a computer with a mouse, the menu works. Move the pointer over Programs and a list drops down: full-time, part-time, evening courses.

Without a mouse, it is another story. A keyboard user tabs straight past the list or into links they cannot see. A tablet user taps Programs and lands on a page instead of the list.

Someone whose hand shakes reaches for the list and watches it vanish as the pointer slips off the edge.

The links are all there. For a good share of visitors, they are simply out of reach.

Who cannot open it

• Keyboard users, who move through links with the Tab key.
• Tablet and touch screen users, who have no hover at all.
• People with tremors, who cannot hold a pointer still.
• Screen reader users, who may never learn the list exists.
• People on small trackpads, who overshoot the list.
• Visitors zoomed in, for whom the list opens off screen.

The second is the group most owners never think of, though they often belong to it. Plenty of people browse on an iPad in the evening, and a touch screen has no way to hover.

What touch screens do with hover

Touch browsers try to imitate hover, and they do it inconsistently.

On some, the first tap on a menu item opens the list and a second tap follows the link.

On others, the first tap follows the link at once, and the list flashes for a moment before the next page loads.

Touch screen laptops running Windows behave differently again, depending on the browser.

A menu that depends on hover is relying on each browser's guess about what the visitor meant. Some of those guesses will be wrong.

Keyboard users and invisible links

WCAG 2.0, the usual yardstick for accessibility, asks that everything a mouse can do can also be done from the keyboard.

Hover menus usually fail this in one of two ways. The hidden links may be skipped entirely, so the pages beneath cannot be reached.

Or the Tab key moves into links that stay hidden, and the visitor loses track of where they are.

Neither shows up for someone testing with a mouse, which is why both survive for years.

Menus that close too soon

Many hover menus close the instant the pointer leaves them. Moving diagonally from a menu item to its list can cross a neighbouring item, which closes the first list and opens another.

For someone with a tremor, arthritis or an unreliable trackpad, that turns the menu into a test of steadiness.

Fly-out lists that open sideways from a drop-down, a third level, are the hardest of all. They demand a precise path through two moving targets.

A worked example

A massage therapy school with a full-time program, a part-time program and a student clinic open to the public had a menu of five items, each opening a list on hover.

The clinic's list held the page the public needed most, the one for booking a treatment.

On iPads, tapping Student Clinic opened the clinic's overview page, which did not link to the booking page. Keyboard users skipped the lists altogether. Every week the front desk took calls from people who could not find where to book.

The school's developer turned each top item into a button that opens its list on a click, a tap or the Enter key, and closes it only when the visitor moves elsewhere or presses Escape.

The booking page also got its own button in the header, and every overview page now links to the pages beneath it.

Open on click, and say so

The fix is a menu that opens on purpose. A click, a tap or the Enter key opens it; the same action, the Escape key or a click elsewhere closes it.

The control that opens it should be a real button, so screen readers announce it as one, with a setting in the code that tells them whether the list is open or closed.

Hover can still open the menu for mouse users who expect it, as an extra rather than the only way in.

The parent item problem

Many menus make the top item both a link to a page and the trigger for the list. On a touch screen that cannot work reliably, since one tap cannot mean two things.

Choose one. Either the top item opens the list and the list includes a link to the overview page, or the top item is a link and a small arrow beside it opens the list.

The first is simpler for most visitors. The second suits sites where the overview page matters most.

Overview pages as a backstop

Every page at the top of a section should link to every page beneath it, in the body of the page, in words.

That way a visitor who cannot open the menu, or who lands on the overview page from a search, can still reach everything in the section.

It also gives search engines a second, plainer route to every page.

Testing it without a mouse

Unplug the mouse and work through the home page using only the Tab key. Note where the highlight lands, whether you can see it at all, and whether each list opens and closes from the keyboard.

Then try the menu on a tablet, one tap at a time, and on a laptop trackpad, moving slowly and diagonally.

Ten minutes of this shows more than any report.

The counter-case

Small sites rarely need drop-downs at all. A menu of five or six plain links, each to a page that lists what sits beneath it, avoids the whole problem.

Many sites already show phones a menu button that opens on a tap, which works well. The trouble is usually at tablet and computer widths, so that is where to test.

Hover itself is not the problem when it is one way of opening a menu among several. The rule stands: menus must open on a click, a tap or the keyboard, and stay open until the visitor is done.

The fix, in order

1. Tab through your menu without a mouse.
2. Tap each top item on a tablet.
3. Make each top item a real button.
4. Open lists on click and the Enter key.
5. Close them only on purpose.
6. Link every subpage from its overview page.
7. Drop third-level fly-outs entirely.

Step six is the one that protects visitors whatever else fails. Even a broken menu cannot hide a page that is linked plainly from the page above it.

Hover standing in for a proper control is the same mistake as in carousels that move before anyone can read them.

Frequently asked questions

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.