Accessibility-checker System Requirements Document

1. Introduction

The Accessibility-checker project aims to provide a micro SaaS solution for small-business website accessibility compliance. This tool will help small businesses, agencies, and solo developers understand and address accessibility issues on their websites without the need for expensive consultants. The product will scan websites, detect common accessibility issues, rank them by severity, explain each issue in plain English, and generate a client-ready report with next-step fixes.

2. System Overview

The Accessibility-checker is designed to be a calm compliance assistant, focusing on clarity, prioritization, and time-saving for its users. It will provide a simple, affordable way to identify and address accessibility issues, ensuring compliance with WCAG standards. The system will prioritize speed and ease of use, offering a clean dashboard and straightforward workflows.

3. Functional Requirements as Story Points

• As a small business owner, I should be able to input my domain and have the system crawl the top pages of my site.
• As a user, I want the system to detect common WCAG-related accessibility issues on my website.
• As a user, I need the system to rank detected issues by severity: high, medium, low.
• As a user, I want each issue to be explained in plain English so I can understand the problem.
• As a user, I need suggested fix steps for each issue to guide me in resolving them.
• As a user, I want a summary dashboard that highlights the "top 3 fixes" I should prioritize.
• As a user, I need the ability to generate a client-ready PDF or shareable report of the findings.
• As a user, I want the system to offer weekly or scheduled re-scans with email alerts for ongoing monitoring.
• As a user, I need to track issue history and regression to see improvements over time.

4. User Personas

• Small Business Owner: Needs a simple tool to ensure their website is accessible without hiring consultants.
• Agency Professional: Requires a reliable solution to offer accessibility compliance services to clients.
• Solo Developer: Seeks an affordable way to check and fix accessibility issues on client websites.

5. Core User Flows

• User inputs domain -> System crawls top pages -> Detects issues -> Ranks by severity -> Provides plain-English explanations and fix suggestions -> Generates report -> User reviews "top 3 fixes" -> Scheduled re-scan with alerts.

6. Visuals Colors and Theme

• primary: #0056b3 (calm blue for trust and professionalism)
• primary_light: #4d88ff (lighter blue for hover states)
• secondary: #f0f0f0 (neutral light gray for backgrounds)
• accent: #ffcc00 (bright yellow for call-to-action elements)
• highlight: #ff6600 (orange for active indicators and notifications)
• bg: #ffffff (white for page background)
• surface: #f7f7f7 (light gray for card/panel backgrounds)
• text: #333333 (dark gray for primary text)
• text_muted: #777777 (muted gray for secondary text)
• border: #cccccc (subtle gray for borders)

7. Signature Design Concept

The homepage of Accessibility-checker will feature an interactive compliance journey map. Users will see a visual representation of a website being scanned, with animated icons representing different accessibility issues. As the scan progresses, issues will be highlighted, and solutions will be visually represented as paths leading to a compliant website. Users can click on icons to see explanations and suggested fixes. This interactive map will be built using motion/react for smooth animations and transitions.

LANDING HERO MOTION BRIEF

The landing hero will depict a website being scanned with animated paths leading to highlighted issues. The animation will loop every 10 seconds, showing the transformation from a problematic to a compliant website. Users can interact by clicking on issues to see explanations and fixes. The animation will be responsive, adjusting to different screen sizes while maintaining clarity and engagement.

8. 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. Internal pages will maintain a static layout for clarity.

9. Non-Functional Requirements

• The system must be highly reliable and available, with minimal downtime.
• It should be scalable to handle multiple concurrent scans.
• The user interface must be intuitive and responsive across devices.
• Data privacy and security must be ensured, with compliance to relevant regulations.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Models: Not applicable
• AI Tools: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The system assumes users have basic knowledge of website management.
• It is constrained to operate within the scope of small businesses and agencies, not enterprise-level clients.
• The system will not provide legal advice or full human-audit services.

12. Glossary

• WCAG: Web Content Accessibility Guidelines
• MVP: Minimum Viable Product
• PDF: Portable Document Format