{"id":167,"date":"2026-03-13T00:05:47","date_gmt":"2026-03-13T00:05:47","guid":{"rendered":"https:\/\/a11y-tools.com\/blog\/?p=167"},"modified":"2026-03-12T19:37:45","modified_gmt":"2026-03-12T19:37:45","slug":"new-bookmarklet-structure-revealer","status":"publish","type":"post","link":"https:\/\/a11y-tools.com\/blog\/2026\/03\/new-bookmarklet-structure-revealer\/","title":{"rendered":"New bookmarklet \u2013 Structure Revealer"},"content":{"rendered":"

Happy Friday, everyone! It\u2019s 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 …<\/p>\n

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

\"Element<\/p>\n

I have also built diagnostics CSS files<\/a> 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.<\/p>\n

\"Diagnostic<\/p>\n

Showing all the things that essentially hold the page together? Sometimes there\u2019s just too much of it! <\/p>\n

I wanted another<\/em> way to visualise how a page is structured, but with the ability to switch off things that I don\u2019t need<\/em> to see. Maybe because I know that they\u2019ve got those bits right and I don\u2019t need to see it again and again? Or maybe because I\u2019m just looking to get a screenshot of one specific aspect when reporting an issue?<\/p>\n

\"Page<\/p>\n

This new booklet, Structure Revealer<\/a>, does a similar job to other tools that I\u2019ve created in the past. However, this time, not only can you deselect specific elements, you can also add your own. Perhaps you\u2019re 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:<\/p>\n

\"Textare<\/p>\n

Now they are available as checkboxes so that you can switch them on\/off as needed:<\/p>\n

\"4<\/p>\n

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!<\/p>\n

Wherever there is a match for any of the selections made, it shows the number of instances on the page:<\/p>\n

\"2<\/p>\n

That number is a button which, when you click it, will give you details of what those elements are:<\/p>\n

\"A<\/p>\n

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

There’s also a parent checkbox that you can use to switch related categories on\/off:<\/p>\n

\"Animated<\/p>\n

So, give it a spin, hopefully you will find it useful. \ufffc<\/p>\n

NOTE: this is also available in the a11y-tools bookmarklets extension<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Happy Friday, everyone! It\u2019s 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\u2019ve done so with the sole purpose of creating an easy way to visualise an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-bookmarklets"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":3,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/167\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}