WCAG guideline 2.4.7 Focus Visible requires you to consider keyboard navigation. Users using the keyboard are aware of which element currently has focus.
For many users, navigation relies on using the Tab and Shift Tab keys
- Tab → move forward through interactive elements
- Shift + Tab → move backward
While there are additional navigation keys introduced for more advanced controls, they will not be discussed here, although the same core requirements remain the same.
Moving through the page elements
Using the Tab key allows users to move through active elements on the page, such as :
- links
- buttons
- form controls
While navigating the page, there should be a clear visual cue indicating which element is active. Without this, keyboard users can quickly lose track of where they are on the page.
Styling Active Elements
When an element has focus, it needs to stand out. This is achieved by applying a distinct style which helps differentiate it from surrounding elements. This can be achieved in several ways:
- Background colour changes
- Borders or outlines
- Underlines
- A focus ring
One of the most common methods used to achieve focus visibility is the focus ring.
