A keyboard trap is any part of a page that keyboard users can enter but not leave. Test your site with Tab, Shift+Tab, Enter and Escape, and fix pop-ups, chat windows and embeds that hold the focus.

Stuck inside the pop-up

Tomorrow is Global Accessibility Awareness Day, and one of the simplest things a business can do for it is put the mouse in a drawer and try its own website with the keyboard.

The Tab key moves from one link, button or form field to the next. Shift and Tab together move back. Enter follows a link or presses a button, and Escape usually closes whatever has opened.

On many small business sites, that works until something pops up. A newsletter box appears, the keyboard cannot reach its close button, and the page behind it can no longer be used.

That is a keyboard trap. For somebody who cannot use a mouse, it is the end of the visit.

Who uses a keyboard

More people than most owners imagine, and many not by choice.

People with tremors, arthritis or repetitive strain often find a mouse slow or painful. Blind visitors using screen readers move through pages with keyboard commands. Some people use switches or other devices that act like a keyboard.

Plenty of others simply prefer it, or are on a laptop whose trackpad has given up.

WCAG 2.1, the current accessibility standard, treats this as basic. Its No Keyboard Trap criterion, at level A, says that if the keyboard can move into part of a page, it must be able to move out again.

The usual traps

The second is the most disorienting. A visitor halfway through your contact form can suddenly find themselves typing into a chat box they never opened, with no obvious way back to the field they were in.

Why traps happen

Almost nobody builds a trap on purpose. Traps come from parts that were designed and tested with a mouse, then never tried any other way.

The most common cause is a close button that is not really a button: an X built as an image or text that responds only to a click, so the Tab key passes it by.

The second is focus left behind. The pop-up appears on screen, but the keyboard is still moving through the page underneath, out of sight. Strictly that is not a trap, but the visitor is just as stuck.

The third is code from other companies: chat, booking and map services arrive inside a frame, with keyboard behaviour your site does not control.

What a well-built pop-up does

The fix is well understood, and it is the same for every kind of overlay.

When the box opens, the keyboard moves into it. While it is open, Tab cycles through its own controls. Escape closes it, and so does a real close button with a label a screen reader can announce.

When it closes, the keyboard returns to where the visitor was, not to the top of the page.

Keeping the keyboard inside an open box is not a trap, provided there is a keyboard way out. The trap is a box you can enter and cannot leave.

A worked example

A two-lawyer family law practice added a chat window last year so that people could ask questions in the evening, after the office had closed.

The chat opened by itself a few seconds into every visit. When it did, it pulled the keyboard focus into its own frame, and its minimise button responded only to a mouse.

A visitor who uses a screen reader started the contact form, was pulled into the chat, and found that every press of Tab cycled through the chat's three controls and nothing else.

She phoned the office the next morning to say so. Not every visitor would have.

The practice switched off the automatic opening first, so the chat now appears only when somebody asks for it.

Tested with the keyboard alone, the chat still could not be closed, so the practice replaced it with one whose window closes with Escape.

The rest of the site was checked the same way that week. The contact form now works from start to finish without a mouse.

Maps and other embeds

An embedded map is a small application from another company, sitting in a frame on your page. Tab into it and you may move through zoom controls, pins and links before getting out, if you get out at all.

For most small business sites, the map's job is to show where you are. An image of the location, the address as text and a link to directions do that job without the risk.

They load faster too.

Test booking widgets and review feeds the same way, and where they fail, link to them instead of embedding them.

Seeing where you are

While you test, watch for the outline that shows which link or button the keyboard is on. Browsers draw one by default.

Many themes remove it, because a designer found it untidy when clicking with a mouse. Without it, a keyboard user cannot see where they are at all.

WCAG asks for a visible focus indicator at level AA. It can be restyled to suit the brand; it should not be removed.

The counter-case

A site with no pop-ups, no chat and no embeds has far fewer places for a trap to hide, and its test will take ten minutes rather than thirty.

Some tools from other companies cannot be fixed from your side, only configured, replaced or removed, which is a decision about the tool rather than a quick repair.

And passing the keyboard test is not the whole of accessibility. A site can be free of traps and still hard to use with a screen reader, or for someone with low vision.

It is, though, the most basic test there is. Try it, and fix every trap it finds.

Tomorrow

  1. Put the mouse away before you start.
  2. Tab through the home page from the top.
  3. Close every pop-up with the keyboard alone.
  4. Open the chat and try to leave it.
  5. Tab into the map and back out.
  6. Complete the contact form from start to finish.
  7. Send the list to whoever maintains the site.

Step three matters most because of where pop-ups sit. One that appears on arrival stops keyboard users before they have seen anything else, on every page it appears.

Another way a page can work against some of its visitors is covered in motion on a page and the visitors it bothers.

Frequently asked questions

What is a keyboard trap?

Any part of a page that keyboard users can move into but not out of, such as a pop-up whose close button the Tab key cannot reach.

Who uses a website with only a keyboard?

People with tremors, arthritis or repetitive strain, blind visitors using screen readers, people using switch devices, and anybody whose trackpad or mouse has stopped working.

Why do pop-ups trap the keyboard?

Usually because the close button is an image or text that only responds to a click, or because focus stays on the page behind the pop-up.

What should a well-built pop-up do?

Move the keyboard into the box when it opens, keep Tab within it, close with Escape or a real button, and return focus to where the visitor was.

What about chat windows and embedded maps?

Stop chat opening by itself, and test that it closes from the keyboard. Replace an embedded map with an image, the address as text and a directions link.

How long does a keyboard test take?

About twenty to thirty minutes for a typical small business site: tab through the home page, close every pop-up, try the chat and map, and complete the contact form.

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.

Pop-ups you cannot close without a mouse?

We will test your site with the keyboard alone, then fix or replace every trap we find, including the ones in plugins.

Start a Conversation