highlight the focused element in web development

2020-01-13

 | 

~1 min read

 | 

92 words

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.


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!