Keyboard navigation tester

How to install

1. Make your bookmarks bar visible (Ctrl+Shift+B / Cmd+Shift+B in Chrome and Firefox).
2. Drag the orange button below to your bookmarks bar.
3. Visit any page on your Shopify storefront (or any other site) and click the bookmark.

What you’ll see

Every focusable element gets:

• A dashed orange outline (independent of any custom focus styling)
• A numbered badge in the top-left corner showing document tab-order index
• An emphasized solid orange ring while keyboard focus is on it

Click the bookmark a second time to clear every annotation. Run it on a fresh page load to re-discover focusable elements after dynamic content loads.

Source code

The bookmarklet is a self-contained IIFE under 4 KB with no external dependencies. Open the bookmark properties in your browser to inspect or modify the source.

(function() {
  // Toggle: clear if already injected
  var d = document;
  var e = d.getElementById('ac-knt');
  if (e) {
    e.parentNode.removeChild(e);
    d.querySelectorAll('.ac-knt-mark')
      .forEach(n => n.parentNode.removeChild(n));
    return;
  }
  // Inject focus ring style
  var s = d.createElement('style');
  s.id = 'ac-knt';
  s.textContent = '*:focus{outline:3px solid #f97316!important;outline-offset:2px!important}';
  d.head.appendChild(s);
  // Find focusables
  var sel = 'a[href],button,input:not([type=hidden]),select,textarea,'
          + '[tabindex]:not([tabindex="-1"]),summary,details,'
          + 'audio[controls],video[controls],iframe';
  var els = Array.from(d.querySelectorAll(sel))
    .filter(el => !el.disabled && el.offsetParent !== null);
  // Number each
  els.forEach((el, i) => {
    var r = el.getBoundingClientRect();
    var m = d.createElement('span');
    m.className = 'ac-knt-mark';
    m.textContent = (i + 1).toString();
    m.style.top = (r.top + scrollY) + 'px';
    m.style.left = (r.left + scrollX - 2) + 'px';
    d.body.appendChild(m);
    el.style.outline = '2px dashed #f97316';
  });
  console.log('AccessComply Keyboard Nav Tester:',
    els.length, 'focusable elements found.');
})();