Published on

🔍 Never Lose Focus

A Simple Trick for Debugging Webpage Accessibility

One of the most frustrating parts of debugging/developing accessible websites is not being able to see where the focus is. You keep pressing the tab button, but suddenly, you lose track of where you are on the page.

A helpful trick I use when building accessible websites is to force the focus outline to be visible. You can do this by adding an event listener that logs the currently focused element:

document.body.addEventListener('focusin', (event) => console.log(document.activeElement));

This way, you'll always know where the focus is when navigating the page.