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}';
		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( != 0 && rect.left != 0) {
				var sp = document.createElement('span');
				sp.innerText = ++counter;

	} catch (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.


Who are you?
Your post

This form accepts SPIP shortcuts [->url] {{bold}} {italic} <quote> <code> and the HTML code <q> <del> <ins>. To create paragraphs, simply leave blank lines.

Hypertext link

(If your message refers to an article published on the web or to a page providing further information, please enter the title of the page and its URL below).