The Accessibility Requirement You’re Probably Failing Right Now: Focus States

Part of the Accessibility for Developers Whitepaper
This article is one part of a comprehensive whitepaper about building accessible digital products, written in partnership between truematter and Progress. You can download the full whitepaper from the Progress site.

— — — — — —

The vast majority of us never see or need to care about focus states on the web. Most people use a mouse and cursor to navigate to an item they want to select and click with confidence, easily seeing they clicked the thing they wanted. Users who rely on a keyboard to navigate, however, can’t do any of that without clear, visible focus states.

Out of Focus

Unfortunately, because so many of us don’t have to think about them, focus states are one of the biggest areas where sites and apps fail WCAG accessibility compliance guidelines. Often, the browser default works well but there are instances where the default state may be disabled by accident or default styling is not distinguishable from the background behind it. The result is a site that keyboard users can’t navigate easily, and sometimes not at all.

The WCAG Guidelines

• Navigable Principle — This guideline falls under WCAG’s principle that online content must be “navigable,” in this case, by a keyboard.

Design for Keyboard Users

Guideline 2.1 requires that “all functionality of the content is operable through a keyboard interface.”

Check that Focus States Are Visible

Guideline 2.4.7 says that the keyboard focus indicator must be visible.

What This Means for Users with Disabilities

People who are unable to use a mouse rely on either their keyboard or an assistive device. Usually this means they navigate by moving from one element on a page to the next in a sequence. Focus states help users who can see but have difficulty using a mouse by visually identifying which element they are on. From there, they can choose to interact with that element or move onto the next one. Without focus states, they are lost.

Best Practices

1. Don’t remove focus states.

By default, most browsers will display an item’s focus state. Sometimes, developers purposely or accidentally disable this state through scripting or styles. This makes it impossible for someone using a keyboard to see what element they are about to select.

2. Don’t rely on default focus states.

The browser’s default focus state might not always be very noticeable. If the background color is close to the focus state color, it can be hard to see. Implement custom focus states that fit the overall design while still being easily noticed.

Focus State Examples

Accessible focus state: This custom focus state clearly indicates what a user is about to click with a visible yellow outline.

Inaccessible focus state: This default Google Chrome focus state is light gray and therefore almost impossible to see on this gray background.

Focus on Your Focus States

More people rely on a keyboard to navigate your site or app than you might think. Even users who are accustomed to using a cursor may be confronted with temporary situations where a keyboard is their only way of using a website. So always double check that your focus states truly follow accessibility guidelines. Don’t fail at them just because you don’t usually need to think about them.

Get the Full Accessibility for Developers Whitepaper
Download Whitepaper

— — — — — —

About truematter

Our team has been doing the real work of user experience since the earliest days of the commercial web. We’re out to make your digital products a whole lot better.

One more pro tip — always test your digital products using a keyboard only. It will show you a world of accessibility problems you may have never thought about before.

Authors: @bekahble & @baileysendsword
Editor: @mettagiese
Graphics: @djosephmachado