The value that's displayed below document.activeElement is the result of the expression. Type the following: document.activeElementĬlick outside of the Live Expression UI to save the Live Expression.Ĭlick in the rendered webpage to put focus on it, and then press Tab or Shift+ Tab to move focus around in the rendered webpage. Right-click anywhere in the webpage and then select Inspect. Open the accessibility-testing demo webpage in a new window or tab. To track the Tab-focused element in the Console in DevTools by using a Live Expression: Defining a Live Expression to be able to determine which DOM node has focus 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. But the Live Expression output changes, at least when you go from one kind of page element to another.
#VIEW FINDFOCUS UPDATE#
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.Īs you Tab through the page, the DOM tree doesn't automatically update to select the corresponding DOM tree node. 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.
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. Suppose that you're testing the keyboard navigation accessibility of a page.
0 kommentar(er)
