Use Chrome's Developer Tools to Track Element Focus

When traversing a web page via the keyboard (i.e., when your tester repeatedly hits the tab key), finding and then tracking down 'phantom' elements, where the focus disappears and then reappears again, can be very time‑consuming or frustrating.

This is a problem I've come across frequently in the past where larger platforms are made up of multiple components and multiple development teams. It can be particularly problematic when it comes to accessibility: if you rely on a screen reader and the keyboard to access a page, then having random (often silent) elements interject themselves is annoying at best.

Create a Live Expression

Fortunately, in Chrome's Web Developer Tools, this is an easy thing to track down.

1. Open Web Developer Tools;
2. Go to the Console;
3. Click on the Create Live Expression button (it's the little eye symbol next to Filter);
4. In the Expression field that appears, type in document.activeElement;
5. Click away from the field to set the Expression.

Now, as you interact with the page the value will update to show which element is focused at that time. Hit the tab key to your heart's content and watch as each element that takes your user's focus is flashed up.

If you right‑click on this, you can also view the element that has taken focus in the DOM tree within the Elements panel by selecting Reveal in Elements panel:

You can now track down where those random phantom focus elements are and either set their focus state to make them more visible or otherwise use tabindex to define their position within the page's sequential keyboard navigation, or remove from it them altogether.