Demo a11y Tool - Chrome Extension

An accessibility testing extension for Chrome DevTools that helps web developers identify and fix accessibility issues.

Installation

1. Download the extension files (already in this directory)

2. Create icons (required):

   • Open create_icons.html in your browser
   • It will automatically download 3 PNG files
   • Move the downloaded files to the icons/ directory

3. Load the extension in Chrome:

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked"
   • Select this directory (/Users/bob3/Desktop/Playground)

4. Use the extension:

   • Open Chrome DevTools (F12)
   • Look for the "Demo a11y Tool" tab
   • Click "Start Test" to run accessibility tests

Features

• Keyboard Accessibility Testing: Checks for focus indicators, tab order issues, and keyboard navigation problems
• Developer-Friendly Language: Issues are explained in terms developers understand
• Detailed Remediation: Each issue includes specific steps to fix the problem
• WCAG Mapping: Shows which WCAG success criteria are affected
• Impact Assessment: Explains who is affected and how severely

File Structure

├── manifest.json          # Extension configuration
├── devtools.html          # DevTools integration
├── devtools.js           # DevTools panel creation
├── panel.html            # Main UI
├── panel.css             # Styling
├── panel.js              # UI logic and test runner
├── content.js            # Content script
├── injected.js           # Page-level testing logic
├── icons/                # Extension icons
└── src/                  # Source architecture (for future development)

Development

The extension uses a modular architecture that makes it easy to add new accessibility touchpoints:

1. TestEngine: Manages and runs all accessibility tests
2. BaseTouchpoint: Base class for creating new test modules
3. KeyboardAccessibilityTouchpoint: Current implementation for keyboard testing

To add new tests, create a new touchpoint class extending BaseTouchpoint and register it with the TestEngine.

Current Tests

• Focus Indicators: Detects interactive elements without visible focus styles
• Tab Order: Identifies problematic tabindex usage
• Keyboard Navigation: Checks for elements removed from keyboard access

Issue Categories

• Fail: Critical accessibility violations that block users
• Warning: Issues that create barriers but may have workarounds
• Info: General information about accessibility testing status