# kayla9011/accessibility-checker-app architecture

> Architecture diagram of the GitHub repository kayla9011/accessibility-checker-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kayla9011/accessibility-checker-app
- Repository: https://github.com/kayla9011/accessibility-checker-app

## Overview

Accessibility Checker accepts a website URL, runs an accessibility audit, and presents scores, violations, passes, and remediation guidance. The analyze route prefers Backend-B and includes a local mock fallback; a separate scrape route uses Puppeteer to package page content. The supplied source does not show how the URL form submits or how the analyze route’s backend helpers are wired in its omitted sections, so those connections are left out. The README describes Australian accessibility requirements; the page also advertises WCAG 2.1 checks.

Main entry points: [`app/api/analyze/route.ts`](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/analyze/route.ts) (Analyze endpoint), [`app/page.tsx`](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/page.tsx) (Audit home), [`app/api/scrape/route.ts`](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/scrape/route.ts) (Scrape endpoint), [`components/results-dashboard.tsx`](https://github.com/kayla9011/accessibility-checker-app/blob/main/components/results-dashboard.tsx) (Results dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_home["Audit home<br/>[page.tsx]"]
  node_urlform["URL form<br/>[url-input-form.tsx]"]
  node_dashboard["Results dashboard"]
  node_recommendation["Remediation guidance"]
end

subgraph group_audit["Audit workflow"]
  node_api_client["Analyze API client<br/>[api.ts]"]
  node_analyze_route["Analyze endpoint<br/>[route.ts]"]
  node_mock["Mock analysis<br/>[route.ts]"]
  node_audit_types["Audit result types<br/>[types.ts]"]
end

subgraph group_scraping["Page scraping"]
  node_scrape_route["Scrape endpoint<br/>[route.ts]"]
end

subgraph group_integration["Audit integration"]
  node_backend_client["Backend-B client<br/>[backendB.ts]"]
end

node_visitor(("Website auditor"))
node_target_site(("Public website"))
node_backend_b["Backend-B service"]
node_browser["Puppeteer browser"]

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_urlform
node_home -->|"renders results"| node_dashboard
node_dashboard -->|"renders guidance"| node_recommendation
node_api_client -->|"POSTs URL"| node_analyze_route
node_analyze_route -->|"imports audit helpers"| node_backend_client
node_analyze_route -->|"falls back"| node_mock
node_analyze_route -->|"uses result types"| node_audit_types
node_scrape_route -->|"launches"| node_browser
node_browser -->|"loads and reads"| node_target_site
node_scrape_route -->|"returns page content"| node_target_site
node_backend_client -->|"creates and polls audits"| node_backend_b

click node_home "https://github.com/kayla9011/accessibility-checker-app/blob/main/app/page.tsx"
click node_urlform "https://github.com/kayla9011/accessibility-checker-app/blob/main/components/url-input-form.tsx"
click node_dashboard "https://github.com/kayla9011/accessibility-checker-app/blob/main/components/results-dashboard.tsx"
click node_recommendation "https://github.com/kayla9011/accessibility-checker-app/blob/main/components/recommendation-card.tsx"
click node_api_client "https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/api.ts"
click node_analyze_route "https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/analyze/route.ts"
click node_mock "https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/analyze/route.ts"
click node_audit_types "https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/types.ts"
click node_scrape_route "https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/scrape/route.ts"
click node_backend_client "https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/backendB.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_urlform,node_dashboard,node_recommendation,node_browser toneBlue
class node_api_client,node_analyze_route,node_mock,node_audit_types toneAmber
class node_scrape_route toneMint
class node_backend_client toneRose
class node_visitor,node_target_site,node_backend_b toneIndigo
```

## Components

### User interface

- [Audit home](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/page.tsx): `app/page.tsx`
- [URL form](https://github.com/kayla9011/accessibility-checker-app/blob/main/components/url-input-form.tsx): `components/url-input-form.tsx`
- [Results dashboard](https://github.com/kayla9011/accessibility-checker-app/blob/main/components/results-dashboard.tsx): `components/results-dashboard.tsx`
- [Remediation guidance](https://github.com/kayla9011/accessibility-checker-app/blob/main/components/recommendation-card.tsx): `components/recommendation-card.tsx`

### Audit workflow

- [Analyze API client](https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/api.ts): `lib/api.ts`
- [Analyze endpoint](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/analyze/route.ts): `app/api/analyze/route.ts`
- [Mock analysis](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/analyze/route.ts): `app/api/analyze/route.ts`
- [Audit result types](https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/types.ts): `lib/types.ts`

### Page scraping

- [Scrape endpoint](https://github.com/kayla9011/accessibility-checker-app/blob/main/app/api/scrape/route.ts): `app/api/scrape/route.ts`

### Audit integration

- [Backend-B client](https://github.com/kayla9011/accessibility-checker-app/blob/main/lib/backendB.ts): `lib/backendB.ts`

### Other components

- **Website auditor**
- **Public website**
- **Backend-B service**
- **Puppeteer browser**

## Connections

- Website auditor → Audit home: opens
- Audit home → URL form: renders
- Audit home → Results dashboard: renders results
- Results dashboard → Remediation guidance: renders guidance
- Analyze API client → Analyze endpoint: POSTs URL
- Analyze endpoint → Backend-B client: imports audit helpers
- Analyze endpoint → Mock analysis: falls back
- Analyze endpoint → Audit result types: uses result types
- Scrape endpoint → Puppeteer browser: launches
- Puppeteer browser → Public website: loads and reads
- Scrape endpoint → Public website: returns page content
- Backend-B client → Backend-B service: creates and polls audits