I was looking for a way to quickly show the focus order on a page and decided, after taking a look around at Adrian’s toolbox, to cook up one on my own (if you’re familiar with Adrian’s work, you’ll see where most of the code comes from).
So here goes:
javascript: (function () {
try {
var s = document.createElement('style');
var b = document.getElementsByTagName('body').item(0);
var counter = 0;
s.innerHTML = '.FocusOrder{position:absolute;border:.1rem solid #00f;border-radius:50%;background:#00f;color:#fff;padding:.25rem .5rem;font-family:\'Segoe UI\',-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\'Helvetica Neue\',sans-serif;text-align:center;min-width:1rem;line-height:1;box-shadow:.2rem .2rem .2rem rgba(0,0,0,.5);margin-left:-.5rem;margin-top:-.75rem}';
document.getElementsByTagName('head').item(0).appendChild(s);
for (var e = document.querySelectorAll("a[href], area[href], input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, object, embed, summary, [tabindex]:not([tabindex='-1']), [contenteditable=true], video[controls], audio[controls]"), t = 0; t < e.length; t++) ! function (t) {
var rect = e[t].getBoundingClientRect();
if(rect.top != 0 && rect.left != 0) {
var sp = document.createElement('span');
sp.classList.add('FocusOrder');
sp.innerText = ++counter;
sp.setAttribute('style',top:${rect.top}px;left:${rect.left}px);
b.appendChild(sp);
}
}(t);
} catch (e) {
console.log(e)
}
})()
(and yeah, my CSS for pre is lousy, we’ll see about that later)
My CMS does not allow me to provide a proper JS-in-HTML link and I have no time to test why, so here’s the same in one line. Unzip, copy the line in the JS file, paste it into the URL field in a new bookmark.
This is a demo script, it just serves as a way to show off how focus is ordered in a page and needs some refinement. It will probably end in the a11y.css extension, as per this issue Gael opened, where I comment and list lacking things.
