Let’s try an exercise.

Close your eyes with your hands on your keyboard. Now try to use this website.

Not easy, right?

That wasn’t entirely fair because you probably don’t have screen reading software installed to help you navigate. But it did help you imagine the web browsing experience of a blind computer user.

Most people interact with the web with a mouse. They point to links, click on inputs, then type away. Life is great! But for some users – millions of users – that is not an option.

It may sound strange to browse the web by keyboard alone, but in the shoes of a disadvantaged individual, it isn’t strange at all. Whether blindness or a motor skills impairment, using a keyboard is sometimes the only way.

Keyboard accessibility is a hugely critical web issue that is sadly overlooked. To best serve the full spectrum of our users, we can do better. We must do better.

If you haven’t yet read our post on accessibility mistakes website builders often make, please check it out.

Today we will learn what goes into well-rounded, keyboard accessible web interface development, covering topics such as:

1. The “Tab” key
2. How to control keyboard focus
3. How to add “skip to content” functionality
4. The importance of outline visibility

The All-Powerful Tab Key

If you have not tried browsing the web by keyboard, the secret is in the Tab key.

On each press of Tab, your browser’s behavior is to “focus,” or select, the next interactive element on the page. (With Shift + Tab, you can go backwards.)

The “next” element on the page is the next element in the focus order. In the west, where people read from left-to-right, focus order should try to do the same: left, right, then down the page. If you picture your HTML as a single document, the browser will focus elements in order as it proceeds down the document.

“Interactive elements” are on-page features that the keyboard should be able to interact with. Things like:

• Links
• Buttons
• Form inputs
• Anything with a tabindex

Something to know is that div elements, by default, are not focusable. So if you have a div that does something when the user clicks on it, guess what? A keyboard user can’t focus it or interact with it in any way.

Semantic HTML would suggest that an interactive element be a button rather than a div, but even if your element happens to be a div, there are solutions.

Whether blindness or a motor skills impairment, using a keyboard is sometimes the only way.

Gaining Control of Focus

While the Tab key often hops around the page pretty well, you sometimes need to take control.

Introducing Tabindex

tabindex is an HTML attribute that gives the developer power over keyboard focus.

It can be applied to most any element and serves two functions:

1. To enable or disable focus-ability of an element;
2. To change focus order.

Here’s a code sample:

<div tabindex="0">My Now-Focusable Div</div>

If given a tabindex of “0,” the element can be focused via the keyboard and falls into the tabbing flow of the document. In our example, the div is focusable even though it originally was not.

Conversely, if given a value of “-1,” the element can no longer be focused. In reality, this is not often needed, as focusable elements should typically be focusable.

Higher number assignments on tabindex change the focus priority, where lower numbers (up to 1) are focused first. In many cases, playing with focus order is a bad idea. Instead, structure your HTML so that it flows in a natural, well-ordered hierarchy, and focus order will follow suit.

Forcing Focus with JavaScript

You can control focus via JavaScript when the situation calls for it.

Say you have a button that, when pressed, opens a slide-out search at the top of the page. If a keyboard user focuses the button, presses “Enter” and activates it, they aren’t going anywhere. The search bar slides out but sits at the top of the page, far from the reach of the button, the currently-focused element. Bad!

But if, on button activation, we force focus to the search input by way of JavaScript, we’re in better shape.

jQuery’s focus() function provides an easy way to give focus to an element. For this to work, the element must be focusable; for instance, the target cannot be a naked div, which, as we recall, are not focusable by default.

$("#top-search-input").focus();

“Skip to Content” Functionality

“Skip to content” is essentially a shortcut to the meat of the page. For keyboard-dependent users, this kind of feature is a plus. Without it, they might need a dozen presses of Tab to get past your navigation menu every time they hit a new page, and that sucks.

On the first press of Tab, the user should be presented with a link that can immediately skip them to the meaningful body content.

So how do we accomplish that?

First, add a anchor link at the very top of your HTML body. Placement is important because it must be the first focusable element on the page. This anchor will look for an ID of “main,” so you want a single element with this ID on every page, after your navigation but before the body content.

<a id="skiptocontent" href="#main">Skip to Content</a>

Then style it. Update the colors, and possibly z-index, to fit your site:

#skiptocontent {
	background-color: #fff;
	color: #000;	
	padding: 6px;
	z-index: 10;
	position: fixed;
	top: 0px;
	left: 0px;
	transform: translateY(-40px);
	opacity: 0;
	transition: transform 400ms ease-out, opacity 400ms ease-out;
}

#skiptocontent:focus {
	transform: translateY(0);
	opacity: 1;
}

Test by reloading the page, clicking somewhere in the header, and pressing Tab or Shift + Tab. When the “Skip to Content” slides out, press Enter. You should now be focused on the “main” ID.

See you later, navigation!

Don’t Mess with Outline Visibility

When an element gains focus, it should be immediately apparent. This visual feedback reveals where the keyboard-assisted user is on the page and is vital for proper accessibility.

Unfortunately, this clear requirement in the WCAG 2.0 guidelines is often violated by the all-too-common practice of removing the browser-default “focus ring” by use of outline: none; or outline: 0; CSS rules.

In fact, an old version of Eric Meyer’s widely-used reset.css turned off outline visibility as part of its stylesheet! While the author commented with a suggestion of “remember to define focus styles,” many who installed his work did not (surprise!).

outline: 0; and variations on it should be eliminated from your website. Highlight and delete without hesitation.

Just let the browser do its job. Keep. Focus. Visible.

If your inner control freak really doesn’t like how your browser styles the focus, you can Do It Yourself:

*:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-color: #f00;
}

The same, but shorthand:

*:focus {
	outline: 1px solid #f00;
}

Keyboard Accessibility Really Is Key

We have learned what keyboard focus is, in addition to how to enable, manipulate, and show it off.

Learn these points, internalize them, and as you move forward on your website building journey, employ them. Keyboard users will be pleased. They might even be able to reach your contact form to literally thank you.

If you need a properly built, truly accessible website, please do not hesitate to reach us.