Understanding Success Criterion 2.4.7: Focus Visible

Understanding Success Criterion 2.4.7 Focus Visible

The purpose of this success criteria is to help people know which element has the keyboard focus.

Official Requirements

Success Criterion 2.4.7 Focus Visible (Level AA): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Why is it required?

There are some computer users who are physically unable to make use of a mouse. There are few others who prefer using a keyboard because it is usually more efficient. Generally, Computers and web browsers to be precise, can be operated with the keyboard alone. In case of web browsers, users can make use of the Tab key to shift between focusable elements.

Having said that, it is often tough for keyboard users to identify where they are on the page. Web designers must be mindful to ensure that it is easy to make out which item or content on the page currently has keyboard focus.

How do we fix it?

1. Prevent Overriding Browsers’ Default Focus Indicator

All web browsers show a recognizable outline around the element that currently possesses keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not perform this action unless you are substituting/offering a better focus indicator than the one built-in the browsers.

2. Ensure that the focus indicator is consistent across all browsers

Some browsers like Google Chrome and Safari display an easy-to-see, blue-coloured outline around the content or element that currently has the focus. However, other browsers like Mozilla Firefox and Microsoft’s Internet Explorer display a thin dotted line. It is very difficult to see the latter. 

In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, make use of the :focus selector in CSS to define a style change that happens when an element has focus.

3. Use event handlers to ensure that browsers don’t support pseudo elements natively

Through scripting, use the Onfocus and Onblur event handlers to add style treatments, for the browsers that do not support the :focus pseudo element natively.

Mistakes to avoid

1. The browser’s default focus indicator has not been replaced with something that is relatively easier to see.

2. An indicator has been provided for mouse hover but not replicated for keyboard focus.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media


Related Blogs

ADA Demand Letters

A Brief Guide to ADA Demand Letters

Demand letters related to website accessibility have become so common that many law firms are offering courses to help understand and respond to them. ADA

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content