Happy Friday, everyone! It’s time for another little bookmarklet. Let’s call it the ‘I wish I were posting this from CSUN’ edition. But I’m not, alas. You’re getting it anyway …

A great many of the tools that I build I’ve done so with the sole purpose of creating an easy way to visualise an issue on the page. In the past I’ve created tools that let you inspect different areas with the page without having to fire up DevTools, like the Element Inspector:

Element Inspector running on BBC News page, releavling an element as a link, its accessible name and its XPATH location.

I have also built diagnostics CSS files that you can apply to any site so that you can see at-a-glance if the correct structural elements have been used to mark up a page. However, I do sometimes find that the diagnostic CSS tool can be just a bit too noisy.

Diagnostic CSS as applied to a BBC News page. Links, list items and landmark areas are highlighted.

Showing all the things that essentially hold the page together? Sometimes there’s just too much of it!

I wanted another way to visualise how a page is structured, but with the ability to switch off things that I don’t need to see. Maybe because I know that they’ve got those bits right and I don’t need to see it again and again? Or maybe because I’m just looking to get a screenshot of one specific aspect when reporting an issue?

Page structure category with the header, footer and nav elements checked for highlighting on the page

This new booklet, Structure Revealer, does a similar job to other tools that I’ve created in the past. However, this time, not only can you deselect specific elements, you can also add your own. Perhaps you’re assessing a website where you see a repeated pattern in use? With this tool, you can add some custom CSS selectors, and it will allow you to highlight them on the page. Just add CSS selectors in the textarea at the bottom:

Textare with 4 ARIA attribute selectors in, with an 'Add' button underneath.

Now they are available as checkboxes so that you can switch them on/off as needed:

4 ARIA attribute selector highlight options with 3 of 4 checked. Each checked item shows an instance count button after it.

The good news: your choices for what you select and deselect are remembered across sessions! Even the custom choices that you make and add to your arsenal are remembered – no need to keep reapplying settings!

Wherever there is a match for any of the selections made, it shows the number of instances on the page:

2 heading element highlight options with h1 and h2 options selected. Each checked item shows an instance count button after it.

That number is a button which, when you click it, will give you details of what those elements are:

A list of all headings in the order that they appear in the document. The heading level and the heading text shows for each.

Minimal detail, but enough to help you find where things are on the page (clicking on those entries scrolls the element into view).

There’s also a parent checkbox that you can use to switch related categories on/off:

Animated GIF shows individuak headings being turned on/off and also the parent headings checkbox being toggled, which switches all on/off.

So, give it a spin, hopefully you will find it useful. 

NOTE: this is also available in the a11y-tools bookmarklets extension.