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

  • James (28 April 2020)

    It seems to have some problems in Firefox if you activate it while scrolled halfway down the page.

    https://imgur.com/a/OBu1ZWA

    Reply to James

  • Stéphane (29 April 2020)

    James : Hah, yes, good catch! – it’s far from perfect.

    I should have been clearer in saying that it’s a proof of concept, thanks for the heads-up.

    It should rely on some scroll position magic, which is what it will do eventually in the a11y.css extension, hopefully.

    Reply to Stéphane

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.