When testing web accessibility, missing visual focus indicators is a “violation” of 2.4.7 Focus Visible. And when it fails, it also makes other checkpoints difficult to test (for sighted testers) such as focus order.
To get around this problem, here are a few tools to help force a visual indication of keyboard focus. Keep in mind that sometimes the tool doesn’t work, usually due to extremely poor markup and lack of keyboard access entirely.
- nerdeFocusPlugIn for Chrome (GitHub)
- Force Show Focus bookmarklet by Paul Adam
- Restore Focus Outlines bookmarklet by Adrian Roselli
- LogFocus – handy Bookmarklet (and Chrome snippet) for Keyboard Accessibility testing by Dirk Ginader
- What has focus? by Scott Vinkle
- Focus Highlight, an NVDA add-on
- Note that Voiceover by default will show focus with a black rectangle.
Do you know any others?
Bonus! Enter this in the browser console. Then the console with return the element which is currently focused.
document.addEventListener('focusin', function() {
console.log(document.activeElement)
}, false)
More on visual focus indication:
- Focusing on Focus Styles by Eric Bailey
- Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators by Deque Systems
- Focus Visible: Understanding SC 2.4.7 by W3C
- Providing Visible Focus for Keyboard Users by University of Washington
- outline: none DON’T DO IT!
- Quick Tip: Never remove CSS outlines
