Web Accessibility Criteria - Visual Focus

• Introduction
• Best Practices
• Examples
• How to Test for Keyboard Focus
• WCAG 2.1 and References 

 Introduction

To ensure keyboard accessibility, it is important that keyboard focus is present on a web page. Keyboard focus provides a visual indication of the user’s location on the web page when navigating via keyboard. When an item has keyboard focus, it can be activated or manipulated with the keyboard. A basic focus indicator is provided automatically by the web browser and is typically shown as a border. However, keyboard focus indicators vary and can take different forms. Although keyboard focus varies by browser, there are web kits that alter the CSS which will allow keyboard focus to be more apparent.

CSS has a built in pseudo-class called :focus represents the elements that receive focus. To edit this focus a builtin property called outline that has elements that can change the style of the focus:

• outline-style can be used to change the box to dotted, solid, grooved, or inset.
• outline-width can be used to change the box to thin, medium, thick, or change by px.
• outline-color can be used to change the box to colors using rgb, hex, or built in color names.

Why is Keyboard Focus Important? 

Keyboard focus will primarily allow sighted users to know which element from the webpage has focus. If keyboard focus is not present or is difficult to visually see, it becomes a barrier to a user and makes it difficult to access information through a keyboard.

 Best Practice

• The keyboard focus should be visible for all sighted users. Although the focus varies from browser to browser we recommend using CSS to make the keyboard focus more visible by adding a background color or any style to make the focus visible.
• To customize keyboard focus, the builtin outline CSS property allows to change the style, width, and color of the focus box.
• Recommended: Use solid, 3px wide, accessible color for outlines.
• The background of focused can also be changed, but only recommended with accessible colors.
• Avoid using custom color styles unless you can meet the 3:1 color contrast ratio.
• To ensure keyboard focus is present, avoid using the outline:none attribute.

 Examples

Example 1: Keyboard Focus Code

Below is an example of two differently styled keyboard focus boxes. The first box is recommended, since it has a solid style and color that meets the 3:1 contrast ratio.

Example 2: Keyboard Focus and Tab Order Video

The video below showcases what keyboard focus and a correct tab order look like.

Keyboard Focus and Tab Order

Back To Top 

 How to Test

To test for visual focus, the following can be used to check if visual focus is present and noticeable.

General Test

1. Start from in the browser address bar. (Forces focus to start at the top of the page)
2. Take your hand off your mouse and use only your keyboard.
3. Using the Tab button, navigate until you’ve reached the bottom of the page. (You can use Shift+Tab to navigate back one step.)
1. For elements like radio buttons, checkboxes, etc. the arrow keys should be used to check that all interactive elements have visual focus.

Verify that:

In order for the page to have visible focus, verify that:

1. All interactive elements display visual keyboard focus
2. There are no instances when focus disappears
3. Visual focus is easy to identify

 Back To Top 

 WCAG 2.1 and References