The Importance of Accessible Focus Indicators

The Importance of Accessible Focus Indicators

Ensuring digital interfaces are accessible to all users is paramount. One crucial aspect often overlooked and overwritten in our CSS is the accessibility of focus indicators – the visual cues that indicate which element is currently active or in focus. In this article, we'll delve into the significance of accessible focus indicators, their role in creating an inclusive user experience, and best practices for implementing them effectively.

Understanding Focus Indicators

What Are Focus Indicators

Focus indicators are visual cues that highlight the currently active or focused element on a web page, including where our keyboard focus currently is. They play a crucial role in aiding users who navigate using keyboards or assistive technologies, ensuring they can identify and interact with elements seamlessly.

Focus indicators can be activated when a user navigates using a keyboard to a specific element or when we use our mouse to hover over an element.  These elements typically have a physical or visual appearance change that we witness occur.

Importance of Focus Indicators

For users with mobility disabilities or those who rely on keyboard navigation, clear and visible focus indicators are essential. They provide a visual confirmation of the active element, enhancing navigation and interaction within a website or application.  For some individuals focus indicators are critical in order to process the content on a page.  Our focus indicators allow users to quickly determine where their keyboard focus or mouse is on the page.  Seeing these visual clues can help in the processing of large amounts of information and make that navigation of a page or site more effortless. 

Focus indicators can help many user groups.  Users who have attention and short-term memory disabilities.  Focus indicators also assist users who have motor disabilities or are using various forms of assistive technology.

Elements Associated with Focus Indicators 

Focus indicators should be on interactive components or elements of a digital platform.  Users interactive elements include items like links, form elements, user interface elements such as menus and buttons.

Essentially anything that a user can click that will cause something else to happen will need to have a focus indicator associated with it.

Design Principles for Accessible Focus Indicators

Contrast and Visibility

Successful focus indicators have sufficient color contrast against the background to be easily distinguishable and from the focused and unfocused states. This is crucial for users with visual disabilities who may rely on high contrast for readability.  This is also important to grab that eye of other users who may need to know where their focus is on a page.

Consistency in Design

All focus indicators throughout your website or application should be consistent in presence and styling. A consistent appearance helps users develop familiarity with the indicators, reducing confusion and improving overall usability for your website or application.

Web Content Accessibility Guidelines (WCAG) Focus Indicators Physical Appearance

The WCAG guidelines layout for us how our focus indicators should appear at a minimum and the options of styles of focus indicators we can provide to our users. Those requirements are:

  • Outline around a whole element
  • Complete color change of the element
  • Vertical bar next to a field or element
  • Form fields that are highlighted

There are currently 3 WCAG Criteria regarding Focus Indicators that we should be aware of.  Explore each of them below.

Focus Visible 2.4.7

All elements that a user can interact with should have a visible focus indicator so that users can see where the keyboard focus is.  Most standard CSS reset files remove this default functionality so you may need to add this to your CSS file in order for the focus to reappear. 

Focus Not Obscured 2.4.11 and 2.4.12

Both of these criteria have one main goal and that is to ensure that the focusable element remains visible to the user while it is in focus and the way that we do that is by having the visual focus indicator

Focus Appearance 2.4.13

Lays out the minimum requirements for the appearance of our focus indicators.  According to the WCAG documentation the following should take place:

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

  • Is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
  • Has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

  • The focus indicator is determined by the user agent and cannot be adjusted by the author, or
  • The focus indicator and the indicator's background color are not modified by the author.


The minimum area of the focus indicator for a control is the area of a 2 CSS pixel thick perimeter of the control (or its minimum bounding box) in the control's unfocused state. For example, if a control is a rectangle 265.75px wide and 42.5px tall, the area of a 2 CSS pixel thick perimeter is difference between the areas of:

  • A 267.75px by 44.5px rectangle (1px larger on all sides), and
  • A 263.75px by 40.5px rectangle (1px smaller on all sides)

This results in a minimum area of (267.75px * 44.5px) - (263.75px * 40.5px) = 1,233px2.

 

Menu Item

border-bottom:10px solid #495E9D;

/*The border for this focus indicator is only on the bottom of the box. In order to determine the area that the indicator is visible we will need to use the following equation: pixels X height + pixels X height +pixels X width + pixels X width. Our formula will be:

(0px X 42.5px) + (0px X 42.5px) + (0px X 265.75px) + (10px X 265.75px)
0 + 2,657.5px2 = 2,657.5px2

This number is larger that the area that we need of 1,233px2 */


 

Menu Item

outline:3px solid #495E9D;

/*The border for this focus indicator is only on the bottom of the box. In order to determine the area that the indicator is visible we will need to use the following equation: pixels X height + pixels X height +pixels X width + pixels X width. Our formula will be:

(3px X 42.5px) + (3px X 42.5px) + (3px X 265.75px) + (3px X 265.75px)
255px2 + 1,594px2 =  1,849.5px2

This number is larger than the area that we need of 1,233px2.*/


 

Menu Item

border-left:30px solid #495E9D;

/*The border for this focus indicator is only on the bottom of the box. In order to determine the area that the indicator is visible we will need to use the following equation: pixels X height + pixels X height +pixels X width + pixels X width. Our formula will be:

(30px X 42.5px) + (0px X 42.5px) + (0px X 265.75px) + (0px X 265.75px)
1,275px2 + 0 =  1275px2 

This number is larger than the area that we need of 1,233px2 */

Highlighting Interactive Elements

Focus indicators should not only indicate the active element but also highlight interactive elements such as buttons, links, and form fields. This ensures users can navigate through the interface efficiently and understand which elements are actionable.  The highlighting of the an element should be contrasting in the active and non-active or focused and non-focused states.  The highlighting should also be contrasted enough with any adjacent colors that it is around.

Testing and Feedback

Conduct regular testing with a focus on keyboard navigation and assistive technologies to ensure that focus indicators work as intended across different browsers and devices. Identify and report any barriers you find promptly to your web administrator or the Digital Accessibility Coordinator to help maintain a consistently accessible experience for all of our users.

Conclusion

Accessible focus indicators are an integral component of inclusive web design, enhancing the usability of digital interfaces for users of all abilities. By prioritizing visibility, consistency, customization options, regular testing, and compliance with accessibility standards, designers and developers can contribute to a digital landscape where everyone can navigate and interact with ease. Focusing on inclusivity not only aligns with ethical design principles but also ensures that digital experiences are accessible and empowering for a diverse user base.