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

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.

Next Post in This Series
Your Color Choice Could Be Keeping Your Site or App from Digital Accessibility

Part of the Accessibility for Developers Whitepaper

You can download the full whitepaper from the Progress site.

All Posts in This Series

• PDFs: The Most Difficult, Most Widespread Digital Accessibility Problem
• Forms Don’t Have to Be Fun but They Do Have to Be Accessible
• People With Disabilities Like TV and Podcasts, Too
• The Accessibility Requirement You’re Probably Failing Right Now: Focus States
• Your Color Choice Could Be Keeping Your Site or App from Digital Accessibility
• Creating Navigable Page Structures: An Accessibility Building Block
• Alt = “Title for a Post That Doesn’t Actually Describe It Whatsoever”