AccesAI - AI-Powered Accessibility Enhancement

---

Table of Contents

• About AccesAI
• Features
• Technical Approach
• How It Works
• Installation
• PPT

---

About AccesAI

AccesAI is an AI-driven tool designed to enhance web accessibility, ensuring a more inclusive digital experience for individuals with disabilities. Our solution focuses on the detection and remediation of common accessibility issues, adhering to WCAG standards.

---

Features

• Alt Text Detection and Generation: Automatically identifies images without descriptive alt texts and generates meaningful replacements.
• Keyboard Navigation Checker: Ensures all interactive elements are accessible via keyboard navigation.
• Contrast Analysis: Detects poor color contrast and suggests WCAG-compliant adjustments.
• Unclear Labels Detection: Identifies and enhances unclear or missing labels for form and interactive elements.
• ARIA Attributes Integration: Validates and improves ARIA roles and properties for better assistive technology support.

---

Technical Approach

Frontend: React

Backend: Flask

Languages: Python, JavaScript

Modules/Tools: Hugging Face, BeautifulSoup, Playwright, OpenCV

1. Web Scraping and Parsing:
   • Tools: BeautifulSoup, Playwright
   • Extracted and evaluated HTML/CSS structures.
2. Feature Implementation:
   • Hugging Face Model: Analyzed images and detected missing alt texts.
   • Text Analysis: Assessed labels and content clarity.
   • Contrast Ratio Calculations: Ensured WCAG compliance.
   • Keyboard Navigation Analysis: Verified tab order and focus-ability, and improved the same.
   • ARIA Checker: Detected missing or misused ARIA attributes.
3. Validation:
   • Utilized OpenCV for screenshot comparisons.

---

How It Works

1. Input the website URL into the AccesAI interface.
2. The system scrapes and analyzes the website’s structure and content.
3. Accessibility issues are identified, categorized, and displayed in a user-friendly dashboard.
4. Suggestions and automated fixes are applied, generating improved code.
5. Visual validation ensures the changes enhance accessibility without compromising design.

Below is the high-level design diagram depicting the flow:

---

Installation

Follow these steps to set up and run AccesAI:

1. Install necessary packages:

   pip install uv
   uv add playwright
   uv run playwright install
           

2. Navigate to the scripts folder:

   cd scripts
   uv sync
           

3. To run the server:

   uv run app.py
           

4. To run the frontend, refer to the frontend folder in the repository.

---

PPT

For a detailed understanding, please refer to the PowerPoint presentation linked below:

Download AccesAI PPT

---