Development

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 https://developers.google.com/web/tools/chrome-devtools/accessibility/focus.

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:

Leave a Reply

Your email address will not be published. Required fields are marked *