Finding the Currently Focused Element Bookmark

When doing accessibility audits (or even daily web use), too often I come across sites that are missing focus styles. When navigating via keyboard, it can be difficult to see which element you are currently on and hence, lose sight of where you are on a page.

To quickly find the currently focused element, we can use the activeElement read-only property of the Document interface. Despite its rather confusing name, it does return the focused element.

To use it, open the DevTools Console (cmd + i, then ESC, or click the Console tab) and type the following, short command:

document.activeElement;

This will give you an instant preview of the focused element name. Press Enter and Console will expand the output and return the currently focused element, including its content. You can then hover the Console output to see the highlighted element in the browser window.

The next time you are styling focusable elements, aka links, buttons or form fields, it‘s a great idea to take the extra time to add visible :focus styles. It can also look great and will show the care of your craft. It will make navigating pages more usable and enjoyable, especially when relying on visible focus styles for navigation.

Update:

As pointed out by Manuel Matuzo on Twitter, it‘s possible to tie document.activeElement to Chrome DevTools Live Expressions, which allows you to log the current element automatically when changed. Makes a lot of sense when you think about, but I was not aware that this feature exists. Since Chrome 70. Very helpful indeed.

To start using Live Expressions, click the eye button (outlined below) under the Console tab, type your expression and start focus tabbing away.

DevTools Console Live Expressions
The button to enable Live Expressions in Chrome DevTools under the Console tab

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Comments

  • Manuel Matuzović replied at brid.gy

    2022-01-03 16:37

    In Chrome you can combine this with live expressions. video alt: adding a live expression in Chrome's console which logs document.activeElement as you press the Tab key.
  • Holger Bartel replied at brid.gy

    2022-01-03 16:41

    I didn’t know, will try and add it to the post. Plus the sound made it very enjoyable just now 😁 I approve!
  • Holger Bartel mentioned this at brid.gy

    2022-01-04 10:48