{"id":2583,"date":"2020-03-09T22:43:10","date_gmt":"2020-03-10T02:43:10","guid":{"rendered":"https:\/\/agileadam.com\/?p=2583"},"modified":"2020-03-09T22:46:27","modified_gmt":"2020-03-10T02:46:27","slug":"monitoring-which-element-has-focus-in-web-browser","status":"publish","type":"post","link":"https:\/\/agileadam.com\/2020\/03\/monitoring-which-element-has-focus-in-web-browser\/","title":{"rendered":"Monitoring Which Element Has Focus in a Web Browser"},"content":{"rendered":"<p>While building accessibility-minded websites, it&#8217;s useful to be able to monitor which element has focus in your browser.<\/p>\n<p>Using a screen reader works well, but there may be an easier solution for those who aren&#8217;t used to screen readers.<\/p>\n<p>Chrome makes this pretty simple. See <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/accessibility\/focus\">https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/accessibility\/focus<\/a>.<\/p>\n<p>In Firefox, Safari, Chrome, and other browsers I&#8217;m able to achieve similar functionality (maybe even\u00a0<em>better<\/em>) by running a simple snippet in the web developer tools console.<\/p>\n<p>New lines appear as you move through the elements with your keyboard (or mouse).<\/p>\n<p>You may want to turn this into a one-liner for easier pasting.<\/p>\n<pre class=\"lang:js decode:true\">var lastElement = document.activeElement;\r\nsetInterval(function() {\r\n  if (lastElement != document.activeElement) {\r\n    lastElement = document.activeElement;\r\n    console.log(document.activeElement);\r\n  }\r\n}, 100);<\/pre>\n<p><em>Output in Firefox:<\/em><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2584 alignleft\" src=\"https:\/\/agileadam.com\/wp-content\/uploads\/2020\/03\/Screenshot_2020-03-09_22-37-59.png\" alt=\"\" width=\"818\" height=\"110\" srcset=\"https:\/\/agileadam.com\/wp-content\/uploads\/2020\/03\/Screenshot_2020-03-09_22-37-59.png 818w, https:\/\/agileadam.com\/wp-content\/uploads\/2020\/03\/Screenshot_2020-03-09_22-37-59-300x40.png 300w, https:\/\/agileadam.com\/wp-content\/uploads\/2020\/03\/Screenshot_2020-03-09_22-37-59-768x103.png 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>While building accessibility-minded websites, it&#8217;s useful to be able to monitor which element has focus in your browser. Using a screen reader works well, but there may be an easier solution for those who aren&#8217;t used to screen readers. Chrome makes this pretty simple. See https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/accessibility\/focus. In Firefox, Safari, Chrome, and other browsers I&#8217;m able to achieve similar functionality (maybe even\u00a0better) by running a simple snippet in the web developer tools console. New lines appear as you move through the elements with your keyboard (or mouse). You may want to turn this into a one-liner for easier pasting. var lastElement = document.activeElement; setInterval(function() { if (lastElement != document.activeElement) { lastElement = document.activeElement; console.log(document.activeElement); } }, 100); Output in Firefox:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[339,243,337,338,39],"_links":{"self":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2583"}],"collection":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/comments?post=2583"}],"version-history":[{"count":4,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2583\/revisions"}],"predecessor-version":[{"id":2588,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2583\/revisions\/2588"}],"wp:attachment":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/media?parent=2583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/categories?post=2583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/tags?post=2583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}