aa489c7eb8
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
61 lines
1.9 KiB
Markdown
61 lines
1.9 KiB
Markdown
|
|
### WCAG Guidelines
|
|
|
|
**Levels:**
|
|
- **A**: Minimum accessibility (must have)
|
|
- **AA**: Standard compliance (recommended)
|
|
- **AAA**: Highest accessibility (ideal)
|
|
|
|
**POUR Principles:**
|
|
1. **Perceivable**: Content must be presentable to all senses
|
|
2. **Operable**: Interface must be navigable by all users
|
|
3. **Understandable**: Content and operation must be clear
|
|
4. **Robust**: Content must work with assistive technologies
|
|
|
|
### Inclusive Design
|
|
|
|
**Design for All Users:**
|
|
- Visual impairments (blindness, low vision, color blindness)
|
|
- Hearing impairments (deafness, hard of hearing)
|
|
- Motor impairments (limited mobility, tremors)
|
|
- Cognitive impairments (dyslexia, ADHD, memory issues)
|
|
|
|
**Principles:**
|
|
- Provide multiple ways to access content
|
|
- Offer customization options
|
|
- Design for temporary and situational disabilities
|
|
- Test with diverse users
|
|
|
|
### Assistive Technologies
|
|
|
|
- **Screen Readers**: JAWS, NVDA, VoiceOver, TalkBack
|
|
- **Screen Magnifiers**: ZoomText, Windows Magnifier
|
|
- **Voice Control**: Dragon NaturallySpeaking, Voice Control
|
|
- **Switch Access**: Single or multiple switch navigation
|
|
- **Braille Displays**: Tactile output for blind users
|
|
|
|
### Keyboard Navigation
|
|
|
|
**Requirements:**
|
|
- All functionality accessible via keyboard
|
|
- Visible focus indicators (never `outline: none`)
|
|
- Logical tab order following visual layout
|
|
- Skip links to bypass repetitive content
|
|
- No keyboard traps
|
|
|
|
**Focus Management:**
|
|
- Manage focus on modal open/close
|
|
- Return focus to trigger element
|
|
- Announce dynamic content changes
|
|
|
|
### Screen Reader Compatibility
|
|
|
|
- **Semantic HTML**: Use correct elements (`<nav>`, `<main>`, `<article>`)
|
|
- **ARIA Labels**: `aria-label`, `aria-describedby`, `aria-hidden`
|
|
- **Alt Text**: Descriptive image alternatives, empty for decorative
|
|
- **Heading Structure**: Logical hierarchy (H1 → H2 → H3)
|
|
- **Form Labels**: Explicit `<label>` associations with inputs
|
|
- **Link Text**: Descriptive links (not "click here")
|
|
|
|
---
|