For cats without mice: Does your site work without a mouse?

Please test your website to make sure it works for keyboard navigation.

What kind of cat avoids mice?

You might be surprised by how many people roll up to your site with no intention of using a mouse. There are people who can't use mice, of course. People with Parkinson's Disease, for example, may have trouble keeping the mouse pointer in the same place for long enough to be able to click on a link, or navigate through your dropdown-on-hover menu. Ditto for some elderly visitors with essential tremors.

For such individuals the best solution for website navigation may be to ditch their computer mice and trackpads in favor of simple keyboard navigation using, essentially, the keyboard tab, enter, and arrow keys.

Others, without such acute difficulties, or even with no physical difficulties at all, may opt to neglect their mice as well. People suffering from carpal-tunnel syndrome may find using a computer mouse or trackpad more aggravating than their keyboards' tab and enter keys.

On the other hand, some power users (the kind who know the right keystroke for everything) may unplug their mice or disable their trackpads entirely. To each their own, and they'll thank you to respect that!

Mouse-free setup and testing

It is a good idea to check the suitability of your site for keyboard navigation, but you first may need to set up your computer for it. You can check to see if your computer's already set up for it by refreshing this page to put it into a fresh state, and then hitting the tab key.

If your computer's already set up for keyboard navigation (Windows should be by default), you'll see our skip-link, reading, "Skip to Main Content" appear at the top of the page. This means you're ready to try some keyboard navigation. If you don't see the skip link come down, you may be on a Mac and need to follow the steps indicated in the accordion below.

Activation

Once you're certain your computer and browser are set up for keyboard navigation, return to your website and check on the things I bring up throughout the rest of this post.

Focus Style

A focus indicator, or sometimes called a "focus ring" is a style applied to the interactive element you've tabbed to, to set it apart from the rest of the page so that people using keyboard navigation know where they are on the page. It lets them know what links they could follow, what buttons they could push by hitting the Enter key, what dropdowns they could trigger with the space key, or what fields they could type into.

The focus style is most usually an outline around the element you're about to interact with. It needn't be an outline, though: some focus styles change the background color of the element, the weight or color of its text, make it subtly larger, or change other styles. As long as the focus style is significantly different from the unfocussed style, the possibilities are almost endless.

Focus styles are helpful, or should be helpful, because without them people using keyboard navigation wouldn't know what on the page they're in a position to interact with. I say the styles should be helpful because there are several things that could negate their usefulness. Most importantly, the appearance of the focussed state may be so similar to the unfocused state that it might not even be noticeable.

Sadly, I find this to be the case with some of the default browser styles for focussed elements. Check out this illustration of browser-default focus styles, and make sure to cycle through various backgrounds to see how well they work in different situations:

Notice how light the Safari default style is. It's fine against some of the darker backgrounds, but against some of the lighter ones it's not so great. Against white, for example, Safari's blue focus indicator has a contrast ratio of 2.03:1. Remember that for regular text, the required contrast ratio is 4.5:1, as we elaborated on in Bulls Can't See Red, Can Sharks?.

While we think you can't go wrong by following that standard for your focus style, too, officially you only need to meet the same 3:1 contrast ratio standard as for large text or graphical components. Safari's default style, though, fails both standards with a shrug.

All the other browser defaults blow past the 4.5:1 standard, with Edge hitting a perfect 21:1 since it opts for a black border with a surrounding outline in white. Adding the white outline is a trick we encourage you to steal, because then no matter whether the background is light or dark, your focus style will always have a white outline to contrast with whatever color you pick for your focus ring.

A caveat is that you might not be able to pick your brand color for your focus ring, much as you'd like to, if your brand color is light. Do that, and you'd run afoul of the same problems Safari's default does. Not to worry, though. We've worked out a way for you to have your catnip and eat it too.

*:focus {
    box-shadow: 
        0 0 0 2px #fff, 
        0 0 0 4px #000, 
        0 0 4px 8px #YOURHEX;
}
*:focus:not(:focus-visible) {
    box-shadow: none;
}
            

Rather than go with a solid color border and a white outline, have instead a triple-color box shadow: white closest to your text, black next to contrast perfectly with the white, and then your brand color, be it fuchsia, olive, or lemon.

The color may draw some people's eyes to it if they have good color sensitivity, but if they don't, the perfect contrast of the inner colors will do it anyhow. Feel free to copy our box-shadow-based style, and fill it with your brand color to make it your own!

Focus order

If you're happy with your current focus style, you needn't change it so long as it meets contrast ratio standards, and back on your home page you'll get to see your style plenty as you set about tabbing through your page to make sure you do everything you need to on the site.

As you begin tabbing around the site, the hope is that none of the hops is so far from the last tab stop that you lose where you are, or really have to search for the next place you've tabbed to. Ideally, your links and buttons will be clearly styled up so that you can guess where your next tab stop is going to be, but hopefully even so there are no really big jumps.

Of even greater concern than there being no big leaps, is that you want to make sure that the leaps that do exist should all generally follow the natural reading order of the page. What's not ideal are jumps forward, then back, then to the right-bottom of the page, then to the top-left, then to the center, and back again.

If you do have sporadic leaps like these, you might consider with your web agency if there are ways to eliminate them.

Click to Animate

Another thing you might do to make your focus jumps more easy to follow for your keyboard-navigating visitors, is adding something like Floating Focus by the Dutch tech agency Q42. This beautifully animates a focus outline from element to element making it especially easy for your keyboard navigators to follow any focus jumps.

Skip to my lou

As you go about tabbing through your site, particularly as you go from page to page, you'll likely very quickly pick up on one feature you'll definitely want your site to have and handle well. I say you'll pick up on it very quickly, because if your site has it, it'll be the first thing you land on when you start tabbing through the new page. This is the skip link, which offers to let you jump right past your top menu.

If your site is missing the skip link, and you've been going from page to page on your site, you'll have doubtless already experienced the annoyance at having to tab through your menu each time you land on a new page.

A skip link isn't particularly hard to set up, and most sites include it by default, but if yours doesn't, all it will take is to add one element (a link), some styles (to hide it visually until someone tabs into it), and an id attribute set on the main part of the page, past the navigation. Unroll the accordion below to get the basic code for a skip-link, if your site is missing it.

<a href="#main-content" class="skip-link">Skip to Main Content</a>

    [navigation/element to skip]

<div id="main-content">

    [webpage here]

</div>
            

.skip-link {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    text-decoration: none;
}
.skip-link:focus {
    transform: translate(-50%, 10%);
    transition: transform 0.3s;
    z-index: 10;
}
            

While skip links are required by the Web Content Accessibility Guidelines for instances of repeated navigation, I recommend you consider other aspects of your content as well that could benefit from a skip-link. My general standard is that anything that takes an annoying number of tabs to get through should get its own skip link.

For example, some sites may have sections with clickable logo links for their partners, or carousels that that are the exception to the eliminate-at-all-costs rule I advise in Slippy Sliders: the best place to hide things from your visitors.

Some carousels have controls that allow you to jump past them in a few taps of your tab key, while others make you painstakingly tab through each slide to get past it. That's a particularly cruel punishment to inflict on your keyboard navigators, as you let your visual mouse visitors take the only sane response to a slider: ignore it completely.

You can afford your keyboard navigating visitors the same dignity by putting a skip link right before the slider, and including an element for it to target right after.

Another great place for a skip link would be in your shopping cart drawer or page if you add a bunch of upsell offers between the list of items in the cart and the checkout button. Upsells are a great way to increase your revenue, and I wouldn't advise you to get rid of them.

If each upsell item has several tab stops, however, and you have several such items between the top of the cart and the checkout button, you might consider adding a skip link.

Upsells are good for your bottom line, and often trigger moments of "aha! I would like that" in your visitors, but on the other hand, if too much effort is needed to get through them, they could prove a discouragement to your visitors to actually check out.

You want as few discouragements to checkout as possible, and throwing in a skip link to reduce the tab stops for an uninterested person from ten or twelve to one or two would tend to reduce those discouragements.

Ecommerce cart with one item in it and three below it in a 'You May Also Like section. There are outlines around the elements that are tab stops, and they're numbered. There are ten in all.

Zoka Coffee would have ten tab stops between the top of the cart and the checkout button if they didn't include a skip link.

A skip to checkout link towards the top of the cart has an arrow pointing from it past the You May Also Like section straight to the checkout button.

Zoka Coffee lets their visitors use the skip link to go straight to the checkout button, saving them nine tab stops.

Entrapment

The last things I want you to watch out for as you move through your site are called focus traps. A focus trap is an element that keeps your focus inside of itself until you close it or get past it. Some things should trap focus, like, for example, a popup.

It wouldn't be good for you to be tabbing around the webpage underneath an open popup. Instead, you should tab around the various interactive elements of the popup while it's open, and only return to the rest of the page under it, when it closes.

Click on the button below to see how dialog popups are supposed to trap focus. Notice how you could tab around it forever without interacting with the page underneath it until you closed it with the close button or escape key.

It happens sometimes, though, that you'll be tabbing around a page and find yourself trapped in an element with no way to move past it. Sometimes you can shift-tab your way back out of it, but sometimes you can't, and even if you can, there may be parts of the page beyond that element that you'll have no way to get to. If you find elements that entrap but shouldn't, just make a note of it for your web developers, and ask them to fix it.

They may be able to put in a trigger for the escape key that will push your keyboard navigating visitors to the next focusable element after the trap. The escape key is a standard way of closing a popup, so a keyboard navigator might reasonably be expected to try that if they run into a focus trap in the wild.

The whole ball of yarn

You want all your visitors to tumble around your site with glee like a cat chasing a ball of yarn. One way to do this is to make sure they can get around it using their preferred navigation method. This means that you need to make sure that keyboard navigation is possible for your visitors.

When you take some time to enable keyboard navigation on your own computer and tab around your site to make sure that it's easy to get around through keyboard navigation, you're gaining a little experience with how keyboard navigators get around your site. Then you will be better prepared to make sure your site works for them.

By doing this exercise, you'll get a sense of whether your focus style is easy to see, but you should check the contrast directly, too. Round out your review by making sure that you have appropriate skip links set up, and that you don't trap visitors anywhere that you shouldn't, but do where you should. All this will help you make sure the cats without mice will tumble around your website with glee!