Accessibility Tracker

Overview

The Accessibility Tracker is a Chrome extension designed to identify and report common accessibility issues on web pages. It scans the DOM for potential problems and provides detailed reports to help developers improve the accessibility of their websites.

Features

• Missing Alt Text: Detects images without alt attributes.
• Low Contrast: Identifies elements with insufficient contrast ratios based on WCAG standards.
• Missing Labels: Finds form elements without associated labels.
• Non-Keyboard Accessible Elements: Highlights elements that are not accessible via keyboard navigation.

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd accessbility-tracker

3. Load the extension in Chrome:
   • Open Chrome and go to chrome://extensions/.
   • Enable Developer mode.
   • Click Load unpacked and select the accessbility-tracker folder.

Usage

1. Open a web page you want to analyze.
2. The extension will automatically scan the page for accessibility issues.
3. Results are sent to the background script and can be viewed in the console or processed further.

How It Works

• The content.js script runs in the context of the web page and performs the following checks:
  • Missing Alt Text: Uses document.querySelectorAll to find images without alt attributes.
  • Low Contrast: Calculates contrast ratios using WCAG guidelines.
  • Missing Labels: Checks for form elements without associated <label> tags.
  • Non-Keyboard Accessible Elements: Identifies elements that are not focusable or lack proper tabindex attributes.

Contributing

Feel free to fork the repository and submit pull requests for new features or bug fixes.

License

This project is licensed under the MIT License. See the LICENSE file for details.