Accessly System Requirements Document

1. Introduction

Accessly is a project aimed at providing ADA/WCAG accessibility compliance solutions for small business websites. The project focuses on automated scanning and a widget/overlay to help small businesses meet accessibility standards and reduce the risk of lawsuits. The target market includes small agencies, local businesses, e-commerce stores, and coaches/consultants using platforms like WordPress and Webflow. Accessly offers a subscription model ranging from $29 to $199 per month per site, with white-label plans available for agencies.

2. System Overview

Accessly is designed to provide an automated solution for ADA/WCAG compliance, which includes scanning websites for accessibility issues and providing a widget/overlay to assist in compliance. The solution targets small businesses and agencies that require an affordable and efficient way to ensure their websites meet accessibility standards.

3. Functional Requirements as Story Points

• As a small business owner, I should be able to automatically scan my website for ADA/WCAG compliance issues.
• As a small business owner, I should be able to integrate a widget/overlay on my website to assist with accessibility compliance.
• As an agency, I should be able to offer white-label accessibility compliance solutions to my clients.
• As a user, I should be able to receive a report detailing the compliance status of my website.
• As a user, I should be able to customize the accessibility widget to match my website's branding.

4. User Personas

• Small Business Owner: Typically owns a local business or an e-commerce store and uses platforms like WordPress or Webflow. Needs an easy and cost-effective solution for website accessibility compliance.
• Agency: Provides web services to multiple clients and seeks a white-label solution to offer ADA/WCAG compliance as part of their service package.
• Consultant/Coach: Operates a personal brand website and requires compliance to avoid legal risks and enhance user experience.

5. Core User Flows

• Small business owner subscribes to Accessly -> Scans website for compliance issues -> Integrates widget/overlay -> Reviews compliance report.
• Agency subscribes to Accessly -> Customizes white-label solution -> Offers compliance service to clients -> Manages multiple client sites.
• Consultant/Coach subscribes to Accessly -> Scans personal website -> Integrates widget/overlay -> Reviews and addresses compliance issues.

6. Visuals Colors and Theme

• primary: #0056b3 (a professional blue to convey trust and reliability)
• primary_light: #4d88ff (a lighter tint for hover states and secondary UI elements)
• secondary: #f0f0f0 (a neutral light gray for backgrounds and secondary elements)
• accent: #ffcc00 (a vibrant yellow for call-to-action buttons and highlights)
• highlight: #ff5733 (a bright orange for active indicators and notifications)
• bg: #ffffff (white for the main background to ensure readability)
• surface: #f7f7f7 (a very light gray for card/panel backgrounds)
• text: #333333 (dark gray for primary text and headings)
• text_muted: #777777 (a softer gray for secondary text, labels, and timestamps)
• border: #dddddd (a subtle gray for borders to maintain accessibility)

7. Signature Design Concept

Interactive Compliance Dashboard: The homepage will feature an interactive compliance dashboard that visually represents the accessibility status of a user's website. Users can click on different sections of the dashboard to view detailed reports and recommendations. The dashboard will use animated graphs and charts powered by chart.js to dynamically display data. The background will feature a subtle morphing pattern that changes based on the user's interaction, providing a sense of progress and engagement.

Landing Hero Motion Brief

The landing page will feature a dynamic illustration of a website being scanned and transformed into a compliant version. The animation will show a website interface with elements being highlighted and adjusted, symbolizing the compliance process. This will be achieved using motion/react for smooth transitions and interactions. The animation will loop every 10 seconds, showing the transformation from a non-compliant to a compliant state, with clear visual cues for accessibility improvements.

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 user experience. Each section of the landing page will have a distinctive mechanic, such as morphing SVGs or kinetic typography, to maintain user engagement.

9. Non-Functional Requirements

• The system must ensure data privacy and security for all user data.
• The solution should be scalable to accommodate a growing number of users and websites.
• The platform must maintain high availability and performance standards.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, with alembic for migrations
• AI Tools: Litellm for LLM Routing, Langchain
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The target audience primarily uses WordPress or Webflow for their websites.
• The solution must be affordable and easy to implement for small businesses.
• Compliance standards may evolve, requiring ongoing updates to the platform.

12. Glossary

• ADA: Americans with Disabilities Act
• WCAG: Web Content Accessibility Guidelines
• Compliance: Adhering to laws and regulations regarding accessibility
• Widget/Overlay: A software component that can be added to a website to enhance accessibility features.