Monitoring Which Element Has Focus in a Web Browser

While building accessibility-minded websites, it’s useful to be able to monitor which element has focus in your browser.

Using a screen reader works well, but there may be an easier solution for those who aren’t used to screen readers.

Chrome makes this pretty simple. See

In Firefox, Safari, Chrome, and other browsers I’m able to achieve similar functionality (maybe evenĀ better) by running a simple snippet in the web developer tools console.

New lines appear as you move through the elements with your keyboard (or mouse).

You may want to turn this into a one-liner for easier pasting.

Output in Firefox:

One Comment

Leave a Reply

Your email address will not be published.