copper-accessibility

Introduction

The "copper-accessibility" project aims to develop an accessibility compliance scanner and fix tracker. This tool is designed to address the growing need for businesses to comply with accessibility standards, particularly the Web Content Accessibility Guidelines (WCAG). The project targets businesses facing compliance deadlines and aims to provide a comprehensive solution to identify, prioritize, and track accessibility issues on websites.

System Overview

The copper-accessibility system will scan websites for WCAG compliance issues, prioritize these issues based on severity, and provide a fix tracker with audit reports. Additionally, the system will monitor websites for changes and send alerts when updates occur that may affect accessibility compliance.

Functional Requirements as Story Points

• As a User, I should be able to scan my website for WCAG compliance issues.
• As a User, I should be able to view a prioritized list of accessibility issues based on severity.
• As a User, I should be able to track fixes for identified accessibility issues.
• As a User, I should be able to generate audit reports for accessibility compliance.
• As a User, I should receive monitoring alerts when pages on my website change.

User Personas

• Website Owner: Responsible for ensuring the website complies with accessibility standards.
• Accessibility Auditor: Conducts detailed reviews of accessibility compliance and provides recommendations.
• Developer: Implements fixes for identified accessibility issues.

Core User Flows

1. Website Owner initiates a scan for WCAG issues -> System generates a report of issues -> Website Owner reviews the prioritized list of issues.
2. Developer receives the list of prioritized issues -> Developer implements fixes -> System updates the fix tracker.
3. Accessibility Auditor generates an audit report -> Reviews compliance status -> Provides recommendations for further improvements.
4. System monitors website for changes -> Sends alerts to Website Owner when changes are detected.

Visuals Colors and Theme

• primary: #007BFF (a professional blue to convey trust and reliability)
• primary_light: #66B2FF (a lighter tint for hover states and secondary UI elements)
• secondary: #6C757D (a neutral gray for supporting elements)
• accent: #FFC107 (a vibrant yellow for call-to-action buttons and active states)
• highlight: #28A745 (a green for hover states and notifications)
• bg: #F8F9FA (a light gray for the page background)
• surface: #FFFFFF (a white background for cards and panels)
• text: #212529 (a dark gray for primary text and headings)
• text_muted: #6C757D (a softer gray for secondary text and labels)
• border: #DEE2E6 (a subtle gray for accessible borders)

Signature Design Concept

The homepage will feature an interactive accessibility compliance dashboard. Users will see a dynamic visualization of their website's accessibility status. The dashboard will have interactive elements that allow users to click on different sections to view detailed reports and recommendations. The design will use motion/react for smooth transitions and animations, creating an engaging user experience.

Landing Hero Motion Brief

The landing page will feature a continuously moving 2D composition built with inline SVG and motion/react. The animation will depict a website being scanned, with highlighted areas indicating detected issues. As the scan progresses, issues are resolved, transforming the website into a compliant state. This loop will last 10 seconds and will be responsive to user interactions, such as hovering over issues to see more details.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished feel. This model is suitable for a feature-rich product page that requires user engagement.

Non-Functional Requirements

• The system must be able to handle concurrent scans for multiple websites.
• The system should provide real-time updates on the status of scans and fixes.
• The system must ensure data privacy and security for all user data.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, use Alembic for migrations
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The system assumes that users have basic knowledge of WCAG guidelines.
• The system is constrained by the need to comply with data protection regulations.

Glossary

• WCAG: Web Content Accessibility Guidelines, a set of guidelines for making web content more accessible.
• Audit Report: A document detailing the compliance status of a website with accessibility standards.
• Fix Tracker: A tool for tracking the implementation of fixes for accessibility issues.