The location of the keyboard focus is visually obvious

Design Notes

Define focus styles

Users should be able to access all interactive components with a keyboard (or equivalent device) and it should be clear which element or link has “focus”.

Define focus styles to help users navigate interfaces. Styles should clearly identify the current keyboard focus position on a page. Generally, the default browser focus style is not good enough.

The change from default to focused state should be a significant change to the appearance. It could be adding something (e.g. an outline, or icon), or changing the background colour of the component.

Where colour alone is used to indicate focus state, the focus colour must have a minimum 3:1 contrast ratio against the background.

More information

• Tool: Colour Contrast Analyser ****(refer to Non-Text Contrast results)
• Tips for designing useful and usable focus indicators
• Video: Focus rings with Rob Dodson
• Focussing on focus styles

Developer Notes

Ensure a visible focus state is present

Sighted people using keyboards need to understand where the keyboard focus is on the page in order to interact with the content.

An obvious focus indicator helps people establish where they are located and which parts of the page they can interact with.

Avoid outline:0 or outline:none or other styles that remove or limit visibility of keyboard focus indicators unless you are replacing it with an obvious style.

Be aware of CSS resets and front-end frameworks which switch off or otherwise minimise focus indicators by default.

If a design for focus states has not been provided then ask your designers for one.

Check the focus states meet colour contrast requirements before implementing them. Where colour alone is used to indicate focus state, the focus colour must have a minimum 3:1 contrast ratio against the background.

Information and tools

• Tool: Colour Contrast Analyser (refer to Non-Text Contrast results)
• Video: Focus rings with Rob Dodson
• Focussing on focus styles

Testing Notes

The location of the keyboard focus is visually obvious

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. For example, a link or a button is highlighted in some way, or the cursor appears in a form input field. Note that if the focus indicator is visible, but doesn’t easily stand out, simply note this in the report rather than failing it completely.

Steps to check

• place cursor in the browser address bar
• use the keyboard Tab key to progress through interactive page elements (e.g. links, buttons, form inputs)
• can you see the location of keyboard focus?

Likely WCAG 2.2 update — definition of 'visible':

• Minimum area: The focus indication area is greater than or equal to a 1px border of the focused control.
• Change of contrast: Colour changes used to indicate focus have at least a 3:1 contrast ratio with the colours changed from the unfocused control.
• Adjacent contrast: The focus indication area has a 3:1 contrast ratio against all adjacent colours for the minimum area or greater, or has a thickness of at least 2 CSS Pixels

Impact range: Medium-High

Test type: Manual

Tool: Colour Contrast Analyser (refer to Non-Text Contrast results)

WCAG Reference: Understanding Success Criterion 2.4.7: Focus Visible