Focus order bookmarklet

A bookmarklet to visually see the whole focus sequence on a web page.

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.

Comments

Who are you?
Your post

To create paragraphs, simply leave blank lines. All outgoing links will feature an attribute rel="nofollow". Please do not spam.