mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-21 06:08:32 +02:00
jwinterm
f2940ad956
- Add README.md with tech stack, project structure, and dev setup - Add TODO_ACCESS.md with Lighthouse audit results and priority fixes - Add start script to root package.json - Add start task to turbo.json
128 lines
4.1 KiB
Markdown
128 lines
4.1 KiB
Markdown
# Accessibility & Performance Audit
|
|
|
|
## Lighthouse Scores (Dev Server)
|
|
|
|
| Category | Score | Target |
|
|
|----------|-------|--------|
|
|
| Performance | 51 | 100 |
|
|
| Accessibility | 95 | 100 |
|
|
| SEO | 91 | 100 |
|
|
| Best Practices | 73 | 100 |
|
|
|
|
**Note:** Dev server scores are typically lower than production. Run `pnpm build && pnpm start` for accurate production scores.
|
|
|
|
## Critical Issues (Score: 0%)
|
|
|
|
### Accessibility
|
|
- [ ] **Color contrast** - Background and foreground colors do not have sufficient contrast ratio
|
|
- [ ] **Heading order** - Heading elements are not in sequentially-descending order
|
|
|
|
### Performance
|
|
- [ ] **Time to Interactive** - Too slow
|
|
- [ ] **Max Potential First Input Delay** - Too high
|
|
- [ ] **Total Blocking Time** - 9% (needs major improvement)
|
|
- [ ] **Largest Contentful Paint** - 12% (needs major improvement)
|
|
- [ ] **Minimize main-thread work** - Too much JS execution
|
|
- [ ] **Reduce JavaScript execution time** - Too slow
|
|
|
|
### SEO
|
|
- [ ] **Meta description** - Document does not have a meta description (may be dev-only issue)
|
|
|
|
### Best Practices
|
|
- [ ] **Browser console errors** - Errors logged to console
|
|
- [ ] **Third-party cookies** - Uses third-party cookies
|
|
- [ ] **Missing source maps** - For large first-party JavaScript
|
|
- [ ] **Unminified JavaScript** - (dev server issue)
|
|
|
|
## Claims Made on Site (founder-signature.tsx)
|
|
- WCAG 2.2 AA Compliance
|
|
- Section 508 & ADA
|
|
- Semantic HTML5 Architecture
|
|
- Playwright A11y Automation
|
|
|
|
## Current Status
|
|
|
|
### WCAG 2.2 AA Compliance - 95% but needs fixes
|
|
|
|
**What's working:**
|
|
- Skip-to-main link in header.tsx
|
|
- Proper `aria-label` on nav element
|
|
- Form fields have proper `<label>` elements with `htmlFor`
|
|
- `aria-describedby` and `aria-invalid` on form inputs
|
|
- `role="alert"` on error messages
|
|
- `role="status"` and `aria-live="polite"` on success/error notifications
|
|
- `sr-only` classes for screen reader text
|
|
- `lang="en"` on `<html>` element
|
|
|
|
**Gaps to address:**
|
|
- [ ] **Color contrast issues** - Fix low contrast text
|
|
- [ ] **Heading order** - Fix heading hierarchy (likely h2 before h1 somewhere, or skipping levels)
|
|
- [ ] Theme toggle button missing `aria-label` describing current state
|
|
- [ ] Verify focus indicators are visible in both themes (2.4.7 Focus Visible)
|
|
|
|
### Semantic HTML5 Architecture - Good but heading order issue
|
|
|
|
- Uses semantic `<main>`, `<header>`, `<nav>`, `<footer>` elements
|
|
- `<address>` element used correctly on About page
|
|
- Form has proper `<label>` elements
|
|
- **Issue:** Heading hierarchy has gaps or wrong order
|
|
|
|
### Section 508 & ADA - Partial
|
|
|
|
Section 508 aligns with WCAG 2.0 AA. Needs:
|
|
- [ ] Fix color contrast issues
|
|
- [ ] Fix heading order
|
|
- [ ] Screen reader testing
|
|
- [ ] Keyboard-only navigation testing
|
|
|
|
### Playwright A11y Automation - NOT SET UP
|
|
|
|
There is **no Playwright configuration** in this project. No test files exist.
|
|
|
|
**To implement:**
|
|
```bash
|
|
pnpm add -D @playwright/test @axe-core/playwright
|
|
npx playwright install
|
|
```
|
|
|
|
### Core Web Vitals / Performance - FAILING
|
|
|
|
The NebulaField canvas animation is likely the main culprit for:
|
|
- High Total Blocking Time
|
|
- Slow Largest Contentful Paint
|
|
- High main-thread work
|
|
|
|
**Recommendations:**
|
|
- [ ] Lazy load NebulaField (only render after initial paint)
|
|
- [ ] Reduce animation complexity or frame rate
|
|
- [ ] Consider CSS-only alternative for initial load
|
|
- [ ] Use `will-change` and GPU acceleration properly
|
|
|
|
### SEO - 91% (minor issues)
|
|
|
|
- Proper `<title>` and `description` meta tags per page
|
|
- OpenGraph metadata configured
|
|
- Semantic HTML structure
|
|
- **Issue:** Meta description not detected (check if it's rendering correctly)
|
|
|
|
## Priority Tasks
|
|
|
|
### P0 - Critical (before claiming compliance)
|
|
1. [ ] Fix color contrast issues
|
|
2. [ ] Fix heading order (find and fix h-level skips)
|
|
3. [ ] Add `aria-label` to ThemeToggle button
|
|
|
|
### P1 - High (for performance claims)
|
|
4. [ ] Lazy load NebulaField background
|
|
5. [ ] Fix console errors
|
|
6. [ ] Run production build and re-test Lighthouse
|
|
|
|
### P2 - Medium (for full compliance)
|
|
7. [ ] Set up Playwright with axe-core
|
|
8. [ ] Manual screen reader testing
|
|
9. [ ] Keyboard navigation testing
|
|
|
|
### P3 - Low (polish)
|
|
10. [ ] Optimize NebulaField animation performance
|
|
11. [ ] Add preloading for critical assets
|