Tool Information

🏗️ Architecture & Technology Overview

The Accessibility Scanner is a sophisticated, self-contained desktop application designed for professional-grade, end-to-end accessibility auditing. Its architecture is built upon three primary, interacting components: a Node.js Backend, a Web-Based Frontend, and a powerful Browser Automation & Auditing Layer.

This architecture is unified by over 9,500 lines of custom Node.js code, providing the sophisticated logic that integrates these powerful open-source foundations. It is this custom code that transforms the tool from a simple scanner into an intelligent auditing engine, enabling advanced features like the Adaptive Remediation Engine, Smart Crawl, and Interaction Scanning — in other words, it sees the code behind the code.

🛠️ The tool is developed and maintained on macOS 🍏 and is designed for use on Windows 10 and 11 🪟.

1. Node.js Backend (The "Engine")

The backend is the core of the application, responsible for orchestrating the entire scan process from configuration to reporting.

• Technology: Built with Express.js, it runs a local web server that handles all communication and serves the user interface.
• Key Responsibilities:
  • API & Communication: Provides a RESTful API (/scan, /cancel, /pause, /resume) to receive and validate scan configurations from the frontend. It uses Server-Sent Events (SSE) to stream real-time progress, detailed logs, and memory usage metrics back to the UI.
  • Job & State Management: Manages the lifecycle of every scan job, tracking active processes, pause/stop signals, and domain-specific error rates.
  • Adaptive Remediation Orchestration: Serves as the brain for the Adaptive Remediation Engine. It tracks domain-specific error rates and blocking signals, instructing the automation layer to escalate its evasion strategy in real-time—from increasing delays to activating advanced stealth protocols.
  • File System Operations: Performs all file system interactions, including generating and saving the final HTML reports, managing the persistent browser session cache, and handling temporary screenshot files.
  • Security & Integrity: Manages the session-based launch context and performs the frontend file integrity check on startup to ensure the application is secure and unmodified.

2. Browser-Based Frontend (The "Cockpit")

The user interacts with the application through a clean, dynamic single-page web interface that runs entirely in their own browser.

• Technology: A pure vanilla HTML, CSS, and JavaScript application with no external frameworks, ensuring fast load times and minimal dependencies.
• Key Responsibilities:
  • Dynamic Configuration: Provides an intuitive form for configuring all basic and advanced scan parameters. The UI dynamically adapts, enabling and disabling options based on the user's selections to prevent invalid configurations.
  • Real-time Monitoring: Listens to the SSE stream from the backend to display the live progress bar, a detailed color-coded activity log (including adaptive remediation actions and smart crawl decisions), and memory usage metrics, giving the user complete visibility into the scan's status.
  • Client-Side Logic: Performs client-side validation, generates shareable configuration strings, and includes logic for managing past reports (searching, deleting). It utilizes JSZip to create downloadable screenshot archives directly in the browser.
  • Interactive Reporting: The frontend serves as the host for the generated HTML reports, which contain their own embedded JavaScript to enable features like issue filtering, screenshot modals, and ticket content generation.

3. Browser Automation & Auditing Layer (The "Worker")

This is where the actual web interaction and analysis takes place, powered by leading open-source automation and accessibility tools, all tied together by a significant amount of custom logic.

• Core Technologies:
  • Puppeteer: The primary driver, used to launch and control instances of a headless (or visible, for logins) Chromium browser.
  • Axe-core: The industry-standard accessibility engine. The backend injects the Axe-core library directly into every webpage loaded by Puppeteer for analysis.
• Key Responsibilities & Custom Logic:
  • Navigation & Interaction: Handles all page navigation, redirect following, and complex User Journey execution by programmatically simulating clicks, typing, and other user interactions.
  • Intelligent Auditing: Executes the injected axe.run() command on each page—respecting all user-defined rule configurations—and collects the detailed JSON results for reporting.
  • Smart Crawl & Trap Avoidance: Implements the Smart Crawl logic by analyzing URL patterns and path depth to intelligently identify and avoid common crawler traps, ensuring the scan remains efficient and focused on unique content.
  • Interaction Scanning: Executes Interaction Scans by programmatically identifying, clicking, and interacting with dynamic page elements (like tabs and accordions), then re-triggering the Axe audit on the new content state to uncover hidden issues.
  • Adaptive Remediation & Evasion: Executes the strategies dictated by the backend. This includes injecting stealth scripts to spoof and randomize browser fingerprints, adjusting crawl delays on-the-fly, and handling the intelligent retry logic that distinguishes between network timeouts and active blocking.
  • Stability Management: Orchestrates periodic browser restarts during long sequential scans to prevent memory leaks and ensure process stability. It also includes robust logic to guarantee browser resources are properly terminated, even on cancellation or critical error.