New Bookmarklet – Structure Revealer - A11y Tools  🔗 **Source:** [New Bookmarklet – Structure Revealer - A11y Tools](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/) > [!note]+ Document Notes > tags: #accessibility #web-development #bookmarklets #testing-tools > author: Lloydi > source: A11y Tools > reference: https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/ > date created: 2024-12-19 14:23 > > # 🏷️ Title: New bookmarklet – Structure Revealer > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Test Structure Revealer on current projects — evaluate page structure visualization #accessibility - [H2] Add custom CSS selectors for common patterns — improve testing workflow #web-development - [H3] Compare with existing diagnostic tools — assess tool effectiveness #testing-tools ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Structure Revealer Bookmarklet](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/) - [A11y Tools Extension](https://a11y-tools.com) ## 📝 Summary - Lloydi released a new accessibility bookmarklet called "Structure Revealer" for visualizing page structure - The tool allows selective viewing of structural elements with customizable CSS selectors - It addresses the "noise" problem of comprehensive diagnostic CSS tools by providing granular control - Settings and custom selectors persist across sessions for improved workflow - The tool provides element counts and detailed information with scroll-to functionality ## 📖 Main Content The Structure Revealer bookmarklet represents an evolution in accessibility testing tools, designed to address the information overload problem that can occur with comprehensive diagnostic CSS tools. Unlike previous tools that show all structural elements simultaneously, this bookmarklet provides granular control over which elements are highlighted. The tool's key innovation is its ability to let users selectively enable or disable different structural element categories. This targeted approach allows accessibility testers to focus on specific aspects of page structure without being overwhelmed by information about elements they know are correctly implemented. A significant feature is the custom CSS selector functionality, which enables users to add their own targeting rules for site-specific patterns or repeated issues. These customizations, along with all other settings, persist across browser sessions, eliminating the need to reconfigure the tool repeatedly. The bookmarklet also includes practical features like element counting (showing how many instances of each selected element type exist on the page) and detailed element information with scroll-to-view functionality for easy navigation. ## 🗒️ Notes #### Key Features - Key idea: Selective element highlighting with customizable categories - Evidence: "not only can you deselect specific elements, you can also add your own" #### Problem Addressed - Key idea: Reduces information overload from comprehensive diagnostic tools - Evidence: "I do sometimes find that the diagnostic CSS tool can be just a bit too noisy" #### Custom Selector Functionality - Key idea: Allows targeting of site-specific patterns and repeated issues - Evidence: "Perhaps you're assessing a website where you see a repeated pattern in use?" #### Persistent Settings - Key idea: User preferences and custom selectors saved across sessions - Evidence: "your choices for what you select and deselect are remembered across sessions" #### Element Counting and Navigation - Key idea: Provides quantitative feedback and easy element location - Evidence: "Wherever there is a match for any of the selections made, it shows the number of instances" #### Integration with Existing Tools - Key idea: Available as part of broader a11y-tools ecosystem - Evidence: "this is also available in the a11y-tools bookmarklets extension" ## 📚 References - [Element Inspector Tool](https://a11y-tools.com) (referenced in article) - [A11y Tools Bookmarklets Extension](https://a11y-tools.com) - [Diagnostic CSS Files](https://a11y-tools.com) (referenced in article) ## 🗣️ Paraphrase - The Structure Revealer bookmarklet provides selective visualization of web page structural elements, solving the problem of information overload common with comprehensive diagnostic tools - Users can customize which elements to highlight and add their own CSS selectors for site-specific testing needs, with all settings persisting across browser sessions - The tool includes practical features like element counting, detailed information panels, and scroll-to-view functionality for efficient accessibility testing workflows ## 📰 Newsletter New accessibility testing tool alert! The Structure Revealer bookmarklet offers a smarter approach to page structure analysis. Instead of highlighting every structural element at once (which can be overwhelming), it lets you selectively choose what to examine. Perfect for focused accessibility audits! Key benefits: custom CSS selectors for your specific testing needs, persistent settings that remember your preferences, and element counting with easy navigation. Great for WordPress developers doing accessibility reviews or theme auditing. This tool bridges the gap between basic inspection and comprehensive diagnostic tools, giving you control over the level of detail you need. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Accessibility: Integrate Structure Revealer into theme review workflows, create testing checklists for common WordPress patterns - Documentation: Add bookmarklet tools section to accessibility handbook - Training: Include selective structural analysis in accessibility course materials #### Community - Contributors: Share tool in accessibility team meetings, gather feedback on WordPress-specific use cases - Maintainers: Evaluate for inclusion in recommended testing toolkit ## 🧪 Hypotheses - Selective structural visualization will reduce cognitive load during accessibility testing compared to comprehensive diagnostic tools - Custom CSS selector functionality will improve testing efficiency for WordPress-specific patterns and repeated issues - Persistent settings will increase tool adoption and consistent usage across testing sessions - Element counting features will help quantify accessibility issues for better reporting and prioritization ### 📊 Methodology - A/B testing comparing comprehensive vs selective diagnostic tools for task completion time and accuracy - User interviews with accessibility testers to evaluate cognitive load and workflow efficiency - Usage analytics tracking custom selector patterns and session persistence benefits ### ❓ Questions - How does selective visualization impact the completeness of accessibility audits compared to comprehensive approaches? - What WordPress-specific structural patterns would benefit most from custom CSS selector targeting? - How can this tool be integrated into automated accessibility testing workflows? ### 🔮 Future Research - Integration possibilities with WordPress accessibility testing frameworks - Development of WordPress-specific preset configurations for common themes and patterns - Potential for collaborative selector sharing within accessibility testing communities ### 💡 Implications - Practice: Enables more focused and efficient accessibility testing workflows with reduced cognitive overhead - Education: Provides opportunity to teach structural accessibility concepts through interactive visualization - Tooling: Demonstrates value of user-customizable diagnostic tools over one-size-fits-all approaches - WordPress: Could improve accessibility review processes for themes and plugins through targeted analysis ### 🧠 Learning Styles Assessment Reading level estimate: 10th-11th grade #### 👀 Visual learners - Present: Screenshots showing tool interface and element highlighting - Improve: Video demonstration of workflow, before/after comparison images #### 🔊 Aural learners - Present: Written explanations of functionality - Improve: Audio walkthrough, podcast discussion of accessibility testing approaches #### 🗣️ Verbal learners - Present: Clear definitions of diagnostic tools and structural elements - Improve: Analogies comparing to physical building inspection, glossary of terms #### 🧩 Kinesthetic learners - Present: Interactive bookmarklet for hands-on testing - Improve: Step-by-step tutorial, practice exercises with real websites #### 🧠 Logical learners - Present: Clear problem-solution structure, feature comparisons - Improve: Decision tree for tool selection, quantified benefits analysis #### 🧑‍🤝‍🧑 Social learners - Present: Reference to community (CSUN conference context) - Improve: Discussion forums, collaborative testing scenarios #### 🧘‍♀️ Solitary learners - Present: Self-contained tool description and usage instructions - Improve: Personal reflection prompts on testing methodology #### 🌿 Naturalistic learners - Present: Reference to tool ecosystem and interconnections - Improve: Discussion of how tools fit into broader accessibility landscape ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Blog post structure with proper headings - Improve: Alt text for screenshots, more descriptive link text #### Keyboard navigation - Present: Standard blog navigation - Improve: Skip links, focus indicators for interactive elements #### Contrast and readability - Present: Standard text contrast appears adequate - Improve: Verify 4.5:1 minimum contrast, check color-only information #### Text resizing and reflow - Present: Responsive design appears implemented - Improve: Test at 200% zoom for content clipping #### Media and captions - Present: Screenshots without captions - Improve: Alt text descriptions of tool interface elements #### Forms and interactions - Present: Comment form with labels - Improve: Error handling validation, accessible form feedback ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-only content - Improve: Consider multilingual accessibility tool descriptions #### Inclusive language - Present: Clear, jargon-free explanations of technical concepts - Improve: Define accessibility terminology for broader audience #### Neurodiversity support - Present: Well-structured content with clear headings - Improve: More frequent subheadings, summary sections #### Representation - Present: Focus on tool functionality rather than user representation - Improve: Include diverse use case examples #### Psychological safety - Present: Encouraging tone about accessibility improvement - Improve: Emphasize learning over judgment in accessibility testing ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear problem identification leading to specific solution features - Inductive strength: Experience-based observations about diagnostic tool limitations - Causal reasoning: Links between tool complexity and user cognitive load - Analogical strength: Comparison to previous diagnostic tools #### Fallacies - None identified: Straightforward tool announcement with clear feature descriptions #### Tone of voice - Overall tone: Friendly, enthusiastic, and technically competent with casual asides ### 🛡️ DARVO Analysis - Deny: Not applicable - no accusations or conflicts present - Attack: Not applicable - supportive tool-sharing context - Reverse victim/offender: Not applicable - collaborative accessibility community context - Emotional cues and rhetoric: Positive, helpful framing focused on community benefit ## 🎯 Conclusion The Structure Revealer bookmarklet represents a thoughtful evolution in accessibility testing tools, addressing the real-world problem of information overload in comprehensive diagnostic approaches. By providing selective visualization with custom selector capabilities and persistent settings, it offers a more practical and user-centered approach to structural accessibility analysis. For WordPress developers and accessibility testers, this tool could significantly improve audit efficiency while maintaining thoroughness through its targeted analysis capabilities. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Selective visualization reduces accessibility testing complexity > [!quote] [New bookmarklet – Structure Revealer](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/) by [[Lloydi]] via [[A11y Tools]]. Published March 13, 2026. Accessed December 19, 2024. > "I do sometimes find that the diagnostic CSS tool can be just a bit too noisy." Identifies limitation of comprehensive diagnostic tools and motivation for selective approach. [view highlight](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/#complexity) #xref #articleseed ID:rw_structure_revealer_001 ### [H2] Custom CSS selectors enable site-specific accessibility testing > [!quote] [New bookmarklet – Structure Revealer](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/) > "Perhaps you're assessing a website where you see a repeated pattern in use? With this tool, you can add some custom CSS selectors." Demonstrates extensibility for targeted pattern analysis in accessibility auditing. [view highlight](https://a11y-tools.com/blog/2026/03/new-bookmarklet-structure-revealer/#custom-selectors) #xref ID:rw_structure_revealer_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Accessibility tools benefit from user customization options - Applies to diagnostic and testing tools requiring user control over information density - Based on author's experience with comprehensive vs selective approaches - Links: [[Accessibility-Testing]] [[User-Experience-Design]] #### [Z2] Persistent settings improve accessibility testing workflow efficiency - Relevant for tools used repeatedly across multiple testing sessions - Eliminates configuration overhead and supports consistent methodology - Links: [[Tool-Design]] [[Accessibility-Workflow]] --- ### ✏️ Fleeting Queue - [F1] Test Structure Revealer with WordPress themes — evaluate for theme review process #fleeting #inbox - [F2] Research other selective diagnostic tools — compare approaches and features #fleeting #inbox - [F3] Document WordPress-specific CSS selectors — create community resource #fleeting #inbox <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/New Bookmarklet – Structure Revealer - A11y Tools.md|New Bookmarklet – Structure Revealer - A11y Tools by a11y-tools.com]] ## Highlights - 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? ([View Highlight](https://read.readwise.io/read/01kq8rsa30fhfyc1rfwm2y24vf)) - Tags: 👻 ai highlighted