Analyzes any webpage for ARIA and keyboard accessibility issues. Designed for designers and developers.
| Screen 1: Dashboard | Screen 2: Scanning | Screen 3: Results |
|---|---|---|
|
|
|
The audit report is dynamically compiled as a fully standalone, highly responsive, and translation-ready offline dashboard. Below is a detailed visual walkthrough of the key sections of the generated audit report:
- Open Chrome and navigate to
chrome://extensions - Enable Developer mode (top-right toggle)
- Click Load unpacked
- Select this folder (
a11y-extension/) - The extension icon will appear in your toolbar
- Open any website you want to audit
- Click the A11y Analyzer icon in the toolbar
- Screen 1 shows basic page info — click Run Audit
- The extension instantly runs 14 categorical accessibility audits
- Screen 3 shows a summary with category scores
- Click Download Report to save an HTML report
Open the downloaded .html file in any browser.
To export as PDF: open it → Ctrl+P → Save as PDF.
| Category | Weight | What's analyzed |
|---|---|---|
| Keyboard Nav | 10% | tabindex order, skip links, focus indicators, clickable-div traps |
| ARIA | 10% | role validity, required attributes, aria-hidden misuse, missing accessible names |
| Landmarks | 8% | main, nav, header, footer presence and labeling |
| Forms | 10% | label associations, aria-required, fieldset grouping |
| Contrast | 10% | color contrast ratios, ancestor opacity blending, viewport-first element prioritization |
| Images | 8% | alt attributes, empty vs descriptive alt, SVG accessibility labels |
| Headings | 6% | h1 presence, heading hierarchy, skipped structural levels |
| Links/Buttons | 4% | generic label text, empty anchor links, new-tab/window disclosure |
| Inline Lang | 5% | lang attribute mismatch on foreign language text (FR, DE, ES, PT, IT) |
| Duplicate IDs | 5% | duplicate element IDs, escalating when referenced by landmarks/labels |
| Reduced Motion | 6% | active animations/transitions lacking prefers-reduced-motion media queries |
| Touch Targets | 8% | bounding box interactive targets less than 44x44px (down to 24px) |
| Autoplay Media | 5% | video/audio tags autoplaying without mute or controls |
| Reflow Zoom | 5% | simulated 400% zoom (320px width) horizontal scroll and pushed-off content |
| Range | Grade |
|---|---|
| 90–100 | Excellent |
| 75–89 | Good |
| 55–74 | Needs Work |
| 0–54 | Poor |
- Analysis is heuristic-based. Always supplement with manual testing.
- Test with real screen readers: NVDA/JAWS (Windows), VoiceOver (macOS/iOS).
- Run a dedicated contrast checker (e.g. Colour Contrast Analyser) for color issues.
- This tool does not follow links — it audits the current page only (MVP).
a11y-extension/
├── manifest.json Chrome extension manifest (MV3)
├── LICENSE MIT open-source license terms
├── popup.html Main HTML popup scaffolding (All 3 screens)
├── popup.css Core application styling (Alabaster, Sand & Indigo)
├── animation.css Screen 2 high-fidelity scanning animation styles
├── popup.js Popup state controller & offline HTML report generator
├── content.js Page analyzer injection engine (14 categorical checks)
├── meta.js Metadata & helper configurations
├── .gitignore Git ignore rule configurations
├── README.md Walkthrough, installation & audit documentation
├── README-ko.md Korean translation & walkthrough documentation
├── icons/ Extension icon assets
│ └── icon.svg Scalable vector icon used for all extension sizes
└── phosphor/ Offline Phosphor icon fonts & stylesheet
├── style.css
├── Phosphor.ttf
├── Phosphor.woff
└── Phosphor.woff2
This project is licensed under the MIT License.