Focus Visible
WCAG 2.4.7

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

How To Assess

• Navigate throughout the entire site.
• Do all focusable elements receive visual focus?

Examples of Code that Violates and Fails

*:focus {
outline: none;
}

www.cnn.com (demo with Safari)

Examples of Code that Satisfies WCAG (WCAG Techniques)

*:focus {
outline: thick solid blue;
}

www.deque.com

Notes

• Browser default would satisfy this SC however it's not best practice.
• You can visually customize as desired.
• Changing the background color on focus would satisfy this SC as well.

Home