Force Focus Tools

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