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
1.9 KiB
1.9 KiB
WCAG Guidelines
Levels:
- A: Minimum accessibility (must have)
- AA: Standard compliance (recommended)
- AAA: Highest accessibility (ideal)
POUR Principles:
- Perceivable: Content must be presentable to all senses
- Operable: Interface must be navigable by all users
- Understandable: Content and operation must be clear
- 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")