Track which element has focus

Suppose that you're testing the keyboard navigation accessibility of a page. When you navigate the rendered webpage by pressing Tab and Shift+Tab, the focus ring indicator in the webpage sometimes disappears, because the element that has focus is hidden. The solution is to create a Live Expression in the DevTools Console, and watch that, and right-click it to expand the DOM tree in the Elements tool.

That's how you can determine which item in the page you have navigated to using the Tab key, even when the element that has focus is hidden and not displayed on the rendered page.

As you Tab through the page, the DOM tree doesn't automatically update to select the corresponding DOM tree node. But the Live Expression output changes, at least when you go from one kind of page element to another. To see which exact element the Tab key has focused (not just what kind of element), you right-click the result of the Live Expression (below the Live Expression), to go to the particular node of the DOM tree in the Elements tool.

Defining a Live Expression to be able to determine which DOM node has focus

To track the Tab-focused element in the Console in DevTools by using a Live Expression:

  1. Open the accessibility-testing demo webpage in a new window or tab.

  2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

  3. In DevTools, open the Console.

  4. Click Create live expression (Create live expression.).

    Create a Live Expression.

  5. Type the following: document.activeElement

  6. Click outside of the Live Expression UI to save the Live Expression.

  7. Click in the rendered webpage to put focus on it, and then press Tab or Shift+Tab to move focus around in the rendered webpage.

    The value that's displayed below document.activeElement is the result of the expression. It doesn't visibly change every time you Tab to a new UI item in the webpage; it visibly changes when you move to a new type of page element.

    Since that expression document.activeElement is updated live in realtime, so that its output result always represents the currently focused element, you now have a way to always keep track of which element has focus, in the DevTools Console. You need to right-click the Live Expression output, as follows:

  8. In the DevTools Console, hover on the result of the Live Expression (below the document.activeElement Live Expression).

    The focused element is highlighted in the viewport (that is, in the rendered webpage).

  9. In the DevTools Console, right-click the result of the Live Expression (below the document.activeElement Live Expression), and then select Reveal in Elements panel.

    In the Elements tool, the DOM tree automatically expands and selects the active element (DOM tree node). The active element is the DOM tree representation of the webpage item that you navigated to by pressing Tab and Shift+Tab.

  10. To create a variable reference to the node that you can use in the Console, right-click the Live Expression result and then select Store outerHTML as global variable.

    In the Console, new output is produced, such as <a href="#alpacas">Alpacas</a>.

  11. Right-click the new output, and then select Copy > Copy element.

See also


Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.