Developer Setup Guide

During the Beta release period, A11yEngine is distributed as a zipped developer bundle. Follow these steps to load it into Chromium-based browsers (Chrome, Edge, Arc):

1. Download the beta extension zip file from your registration email and extract the contents to a local folder (e.g. /documents/a11y-engine-plugin).
2. Open your browser and navigate to the extensions control panel by entering chrome://extensions in your URL bar.
3. In the top right-hand corner, toggle the Developer Mode switch to ON.
4. In the top left, click the Load Unpacked button.
5. Select the extracted directory containing the manifest.json file. The extension is now active in your toolbar.

A11yEngine provides a seamless 1-click auto-fix experience out of the box. You do not need to register for, enter, or manage private API keys:

1. Click the A11yEngine puzzle icon in your browser toolbar to open the Sidepanel.
2. Click **Scan Page** at the top of the panel. The extension will parse the DOM and run custom heuristics.
3. Select any violation from the dashboard list. A11yEngine automatically routes the element snippet through our secure Vercel proxy to query Google's **Gemini-3.6-Flash** model.
4. The structured accessible fix appears instantly in the **React**, **Tailwind CSS**, or **Vue** tab, ready to copy and paste.

Once configured, navigate to any local development URL (e.g. localhost:3000) or public website:

• Click **Scan Page** at the top of the side panel. The extension will parse the DOM and run custom heuristics.
• Toggle **Overlays** on to see bounding boxes drawn directly around elements with accessibility violations. Hovering highlights the rule, while clicking selects the rule details in the sidebar.
• Inspect the **Code Remediation** tab to copy clean, compliant components formatted for **React**, **Tailwind**, or **Vue 3**.
• Click the download button to export a fully-styled offline HTML Audit Report, or click copy to copy a pre-formatted Markdown summary for Jira or GitHub tickets.