/* Code-Comments */

January 13, 2020

Highlight The Focused Element In Web Development

When testing a website for its accessibility, one thing I’m often interested in looking at is what is in focus.

The browser of course needs to track this. Chrome makes it easy to surface this with “Live Expressions”.

The steps are straightforward:

  1. Open the console (Cmd + Shift + J)
  2. Click on the eye to open the Expression window open live expressions
  3. Type document.activeElement add live expressions
  4. Click or tab within the browser UI to see which element is active see live expressions

I originally found this solution on Google’s Developer site.


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!