Fill your bookshelf with the best books on design and more.

by Ste Grainer on March 29, 2018

design a11y inclusive ux accessibility navigation interaction keyboard input methods

The single most amazing component of the web is the humble link. With one small bit of markup, we can connect one piece of content to another. From a simple document, we can build a library. By default, links are accessible to anyone. And yet, in our haste to make them somehow “better,” we often break their fundamental nature. Let’s start to set things right and build navigation and interaction that anyone can use.

Navigation

The killer feature of the web lies here in HTML’s humble A element.

Jeremy Keith, Resilient Web Design

The top of many websites could be best described as a maze of navigation elements. For users with good vision and mobility, it’s easy to gloss over this and skip straight to the content. But for users that depend on screen readers (or even basic voiceover) to step through a site, getting through the navigation portion can be a major slog. Even for those who depend primarily on the keyboard to focus on interactive elements (see below), it can take a lot of repeated tabbing to traverse the navigation of most sites.

How can you help? Make it easier to move to and from various parts of the page quickly. Start at the top by adding a Skip Navigation link as the first interactive element. It should link to the page’s main content so people can quickly skip the navigation when using a screen reader or keyboard navigation. (There are several methods to “hide” this link until it is focused. If you are concerned about confusing sighted users, these techniques can allay those fears.)

For pages with a lot of content, add anchors for each major section and include a table of contents near the top of your main content area. Also consider adding “Back to Top” links. A bonus side effect of breaking individual pages into linkable sections is that it makes sharing specific parts of the page easier for everyone. You can even show the anchor name beside the parts for easier discovery.

Finally, for pages with a very specific intent, like search pages, contact forms, and other similar pages, you can add an autofocus attribute to place the cursor into an input immediately after the page loads. This will help ALL of your users more quickly get to the task they intended to.

Finding :focus

When it comes to designing for navigation, make sure that links and navigation are clearly highlighted. Design explicit hover and focus states (it’s okay if they are the same as long as they are clearly differentiated from the default states). Many frameworks and CSS resets remove styles for focused elements by default. Make sure you add them back explicitly so you don’t penalize those who use the keyboard to navigate.

Add distinct styles for visited links so users can more easily keep track of where they’ve been or what they’ve already tried. Consider styling links to the current page (i.e. links to the page you’re already on) differently or even removing or disabling them.

Naming links

There’s a common joke in computer science. There are only two hard things in computer science: cache invalidation and naming things. I would argue that naming things isn’t exclusive to computer science. You can find poorly named links all over the web. The most egregious offender is probably “click here,” but it’s far from the only one.

Instead, your link text should flow naturally with what you have already written. (See what I did there?) If you want to share more information about a topic, then link to it when you mention that topic. As much as possible, link short phrases rather than individual words or full sentences. (It goes without saying that you should definitely avoid making entire paragraphs into links.)

You can also add supplementary information to some links to make them more useful:

• Make links to documents like PDF or Word documents more obvious by adding the file extension in parentheses afterward.
• When linking to large files (anything over 100kb), note the file size in parentheses along with the link. This (along with the previous tip) helps inform users before they attempt to load a file they may not have the bandwidth (or software) to download.
• Add an icon (with some screen reader friendly alternative text) or other notice to links that will open in a new window or tab. (Better yet, don’t open links in new windows automatically. Let your users decide when they want to.)

Don’t break the link

Finally, make sure that your links work with or without JavaScript enabled. In some applications, it may make sense to perform additional actions when a user clicks a particular link. But JavaScript can fail sometimes, and your links shouldn’t suffer as a result. (It’s okay if they don’t have the full whizbang as long as they get the user to where they want to go.) In practice, this means you should never have a link without a valid href value, even if you are redirecting the action with an onclick() event. (Also, not everyone will click to interact with a link so there’s no guarantee that the event will fire properly.)

Quick tips for navigation

• Include Skip Navigation and Back to Top links to help users navigate between large swaths of content more quickly.
• Make the Skip Navigation link the first interactive element on the page (or first in the tab order).
• Automatically place focus on the most important element in situations that warrant it, e.g. automatically place the cursor in the search field on a search page or the first input of a contact page.
• Use internal anchors for quickly moving between sections and more easily sharing specific parts of a page.
• Make link text descriptive of what the link goes to. Avoid phrases like “click here” or “more”.
• Considering automatically “skipping” to the primary content on certain types of pages (like an article or search results).

Clickability

Are you familiar with Fitts’s Law? To paraphrase: “the bigger the target, the easier it is to hit.” For users with low mobility, this can be particularly important. Trying to move a cursor around with amputations or severe muscle degeneration is hard enough. Trying to then hit a small target can be downright impossible. Thus, it’s important to consider clickability in your designs.

You can design for better clickability by adding extra padding to interactive elements, which also often has the side benefit of increasing visibility and conversion rates on things like buttons. Consider grouping related content into larger interactive objects. For instance, instead of having a button within a typical card interface to view more details, consider making the entire card interactive. Instead of a basic text link within a table row, make the entire cell or row interactive. Place related elements close together to minimize the travel distance between them. Whenever possible, try to minimize the amount of back and forth your user might have to take between elements.

Quick tips for clickability

• Add extra padding and margins around interactive elements.
• Make longer blocks of text into links instead of individual words.
• Group related content into larger interactive objects.
• Place related interactive elements near to each other to minimize users having to move around the screen.

Keyboard friendliness

Many people prefer using a keyboard over other input methods. Browsers are keyboard accessible by default, but some frameworks and CSS resets break these helpful defaults. So it’s important to test that your designs are still keyboard accessible. First and foremost, make sure that all interactive elements can receive keyboard focus. (Try tabbing and shift-tabbing through your site.) Second, make sure to provide :focus styles so users can track where the keyboard focus is as they navigate through the site. At the very least, add a :focus style alongside every :hover style. You can go even further and add additional styles specifically for :focus.

Speaking of hovering, don’t hide crucial information or actions behind elements that are only visible on hover or click. Test dropdown menus, tooltips, and other interactive components to make sure that any functionality they offer can be accessed via keyboard as well. (It’s always a good idea to test different input methods - hover-only interaction can also be problematic on touch devices.)

Tab order

Now that you can see where you are as you tab through your product, does the order flow logically? Or does the focus move erratically between elements unexpectedly? The default behavior is to step through each element in the order that it appears in the HTML from top to bottom. Your layout styles may affect that flow, or you may just want to bump certain elements up in the order. In some cases, it may make sense to reorder the underlying structure to accomplish this. You can also change the tab order directly by using the tabindex attribute.

The primary elements that appear in tab order are links, input fields, and buttons. You can add any element (such as a heading, paragraph, or other static content) to the tab order by adding tabindex="0" to that element. Conversely, you can remove an element from the tab order by giving it tabindex="-1". Giving a positive value to tabindex will set its order - lower values go first, with document structure guiding the order when two elements have the same tabindex value.

Creating keyboard shortcuts

Are you a keyboard wizard? Those handy keyboard shortcuts you may rely on to more quickly finish tasks can also be a huge accessibility boon. Baking common shortcuts into your product or site can save time for your power users, but also physical effort for users with lower mobility.

The simplest way to add keyboard shortcuts on the web is to use the accesskey attribute on any interactive element. By default, though, they aren’t very discoverable. Different browsers and operating systems require different modifier keys to accompany the actual accesskey. On Windows, it’s often shift + alt + accesskey, except when the browser doesn’t require shift. On Mac, it’s usually ctrl + option + accesskey, unless it’s not. On top of that, just adding an accesskey to a tag doesn’t tell your users what that key is or which elements have them.

You could add a span around the corresponding letter within the text of the element and style it (commonly an underline or bottom border). This method won’t work if the text you want to add an underline to appears within an attribute (like an input value). That’s because you can’t add HTML within an attribute.

<button type="submit" accesskey="M">
  Send a <span class="akey">M</span>essage
</button>

.akey {
  border-bottom: 1px solid rgba(255,255,255,0.5);
}

Alternatively, you can pull out the accesskey attribute with CSS and show it before or after the element using CSS pseudo elements. This CSS selector works by looking for any element with the accesskey attribute, then adding the value of that attribute into the content of a generated element (in this case :after).

[accesskey]::after {
  background: rgba(0,0,0,0.25);
  border-radius: 0.25em;
  content: attr(accesskey);
  display: inline-block;
  padding: 0 0.25em;
}

These options won’t solve the question of discoverability of the modifier keys for those who aren’t common access key users. (And let’s face it, they’re implemented so rarely and so inconsistently that I question if anyone would consider themselves a common user of access keys.) That said, access keys are a relatively low barrier that can help some people use your site more efficiently.

For a more robust solution to keyboard shortcuts, JavaScript is worth a look. (It’s a bit out of scope for this article, but if there’s interest, I may write more about that in a later article.)

Quick tips for keyboard interaction

• Add :focus styles for every :hover style.
• Pay attention to keyboard tab order and adjust it if necessary for the best logical flow.
• Use the accesskey attribute on HTML elements to add keyboard shortcuts using the browser’s built-in support.
• Consider using Javascript to simplify keyboard shortcuts, but test thoroughly to make sure it doesn’t overtake typing normally.
• Don’t intercept and misuse common shortcuts. Make sure your users can still copy, paste, save, and print, etc. using keyboard shortcuts.

Become a design a11y

I think you’ve got a pretty solid grasp of how to design accessible navigation and interaction. Explore how other aspects of design can improve the accessibility (and overall usability) in the Design A11y series below:

• Designing for Accessibility: An Introduction
• Color and Contrast
• Content and Context
• Forms and Input

Follow along on Twitter, RSS, or by subscribing to the monthly newsletter if you want reminders when each article in the series is published.