Some websites don’t show any visual indicator when elements receive focus – making accessibility testing frustrating or impossible without DevTools gymnastics. I often run into this when testing keyboard navigation, and I wanted something quicker. Introducing “Force Focus”: force show keyboard focus for accessibility testing of websites with some oomph!
👊🔲 Force Focus is a little bookmarklet I built to highlight focused elements clearly – with an orange outline, and a red background. It’s inspired by the great work of Paul J. Adam’s focus bookmarklet, which relies on an external script and offers a nice outline. But I needed something a bit stronger – both in terms of CSP resilience and visual emphasis.
This one works on most sites unless CSP is extremely strict, highlights elements even if they clip or cut off outlines, and has a built-in toggle (just click the bookmarklet again to turn it off). It also injects the styles into any same-origin iframes.
If you want to give it a try in your accessibility toolkit, drag this link to your bookmarks bar (or just click it to test it on this site).
…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.
I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.
If that sounds like you could use my help, let’s talk! 💬