commit 1930d868f551249522c5658f719b0955fd599d0d Author: Zhongwei Li Date: Sat Nov 29 18:49:14 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..1a64b98 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "design-brief-generator", + "description": "Generate comprehensive design briefs for design projects. Use this skill when designers ask to 'create a design brief', 'structure a design project', 'define design requirements', or need help planning design work.", + "version": "0.0.0-2025.11.28", + "author": { + "name": "James Rochabrun", + "email": "jamesrochabrun@gmail.com" + }, + "skills": [ + "./skills/design-brief-generator" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..bdc0a39 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# design-brief-generator + +Generate comprehensive design briefs for design projects. Use this skill when designers ask to 'create a design brief', 'structure a design project', 'define design requirements', or need help planning design work. diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..5404163 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,68 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jamesrochabrun/skills:design-brief-generator", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "a224b33fc1775ce70956788fc6c59dd050b31d04", + "treeHash": "43cd6ae805dca8f27fa8344545de456325d8d99ed3302af78fde0b85ae812818", + "generatedAt": "2025-11-28T10:17:46.610475Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "design-brief-generator", + "description": "Generate comprehensive design briefs for design projects. Use this skill when designers ask to 'create a design brief', 'structure a design project', 'define design requirements', or need help planning design work." + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "964733951db1717bcb74d698ef7c763816e4b96ed06708cb67a5da64e14f1bc9" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "8699b91ae72df0338d42de964cf953bf23a3dd647102aff33704206ea7eda8fe" + }, + { + "path": "skills/design-brief-generator/SKILL.md", + "sha256": "419cf77b8118e72b41ce73049ec674880c094c03019197f1217be74b4f0076ca" + }, + { + "path": "skills/design-brief-generator/references/design_principles.md", + "sha256": "8fbc90552af392d49b4d1afe31a11aaeb5a60d8f38f2a6d6f0c3da0085a70ec8" + }, + { + "path": "skills/design-brief-generator/references/design_brief_template.md", + "sha256": "2c6b9382c71bb6cad7087c180aaa9da828a796ed9562b9ae3f70aa7201a844e0" + }, + { + "path": "skills/design-brief-generator/references/user_research_methods.md", + "sha256": "bb3665fc2fd9572c00049c1630933154882a49e2ff62211f625a81e39b074711" + }, + { + "path": "skills/design-brief-generator/references/accessibility_guidelines.md", + "sha256": "cad4d6539a46163e7bc794378b2463284e9ad37841894b796b16096f5ecd8569" + }, + { + "path": "skills/design-brief-generator/scripts/generate_brief.sh", + "sha256": "8b3225488d4b161e1597466c015a2732eba3a33cbccdf759aa7ff303219657a6" + }, + { + "path": "skills/design-brief-generator/scripts/validate_brief.sh", + "sha256": "b80b9c5fe1dd363dd01861d0c9bab1ce20fa82a754b88ff368b5e03c7f0de6d6" + } + ], + "dirSha256": "43cd6ae805dca8f27fa8344545de456325d8d99ed3302af78fde0b85ae812818" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/design-brief-generator/SKILL.md b/skills/design-brief-generator/SKILL.md new file mode 100644 index 0000000..159f824 --- /dev/null +++ b/skills/design-brief-generator/SKILL.md @@ -0,0 +1,631 @@ +--- +name: design-brief-generator +description: Generate comprehensive design briefs for design projects. Use this skill when designers ask to "create a design brief", "structure a design project", "define design requirements", or need help planning design work. +--- + +# Design Brief Generator + +## Overview + +Generate comprehensive, well-structured design briefs that align stakeholders and guide design projects. This skill helps designers create clear project briefs that define scope, goals, constraints, and success criteria. + +**Built for:** +- UX/UI designers +- Product designers +- Design leads +- Design systems teams +- Brand designers + +--- + +## Quick Start + +### 1. Generate Design Brief + +Run the interactive script: + +```bash +scripts/generate_brief.sh +``` + +This will guide you through creating a comprehensive design brief covering: +- Project goals and objectives +- Target users and personas +- Design constraints +- Success criteria +- Timeline and deliverables + +### 2. Validate Brief + +Check brief completeness: + +```bash +scripts/validate_brief.sh +``` + +Ensures all critical sections are included. + +--- + +## Core Workflow + +### When to Create a Design Brief + +**Use a design brief for:** +- New product/feature design projects +- Design system initiatives +- Redesign projects +- Brand identity projects +- UX research initiatives + +**Skip for:** +- Minor UI tweaks +- Bug fixes +- Small iterations on existing designs + +--- + +## Design Brief Components + +### 1. Project Overview + +**What it includes:** +- Project name and description +- Background and context +- Why this project matters now +- Business objectives +- User problems being solved + +**Example:** +```markdown +## Project Overview + +**Project:** Mobile app redesign +**Background:** Current app has 2.8 star rating with users citing confusing navigation +**Business Goal:** Increase app retention from 15% to 40% (Day 30) +**User Problem:** Users can't find key features, leading to frustration and abandonment +``` + +--- + +### 2. Design Goals & Objectives + +**Define what success looks like:** +- Primary design goal +- Secondary goals +- Success metrics +- Must-haves vs. nice-to-haves + +**Example:** +```markdown +## Design Goals + +**Primary Goal:** Create intuitive navigation that helps users complete core tasks in < 3 taps + +**Secondary Goals:** +- Reduce visual clutter by 40% +- Improve accessibility (WCAG AA compliance) +- Establish reusable component library + +**Success Metrics:** +- Task success rate: 90%+ +- Time on task: -50% +- SUS score: 75+ +``` + +--- + +### 3. Target Users & Personas + +**Who are we designing for:** +- Primary user personas +- User needs and pain points +- User goals and motivations +- Technical proficiency +- Context of use + +**Example:** +```markdown +## Target Users + +**Primary Persona:** Sarah, Marketing Manager +- **Age:** 32-45 +- **Tech Savvy:** Medium +- **Goals:** Create campaigns quickly, track performance +- **Pain Points:** Current tool too complex, takes too long +- **Context:** Uses on desktop during work hours, sometimes mobile +``` + +--- + +### 4. Design Principles & Direction + +**Guiding principles for the project:** +- Core design principles +- Visual direction +- Interaction patterns +- Content strategy +- Accessibility requirements + +**Example:** +```markdown +## Design Principles + +1. **Clarity over cleverness** - Users should never wonder what to do next +2. **Progressive disclosure** - Show what's needed, hide complexity +3. **Consistent patterns** - Use established design system components +4. **Accessible by default** - WCAG AA minimum, aim for AAA +``` + +--- + +### 5. Scope & Constraints + +**What's in and out of scope:** + +**In Scope:** +- Screens/flows included +- Platforms (web, mobile, tablet) +- Devices and browsers +- Accessibility requirements + +**Out of Scope:** +- What we're NOT designing +- Future considerations + +**Constraints:** +- Technical limitations +- Timeline constraints +- Resource constraints +- Brand guidelines to follow + +**Example:** +```markdown +## Scope + +**In Scope:** +- Dashboard redesign (5 screens) +- Mobile responsive (iOS, Android) +- Dark mode support +- WCAG AA compliance + +**Out of Scope:** +- Admin panel (separate project) +- Native mobile apps (web only) +- Marketing website + +**Constraints:** +- Must use existing design system +- Launch deadline: 8 weeks +- Development team: 2 engineers +- No custom illustrations budget +``` + +--- + +### 6. User Flows & Journeys + +**Key user paths to design:** +- Primary user flows +- Entry points +- Decision points +- Success states +- Error states + +**Example:** +```markdown +## Key User Flows + +**Flow 1: Create Campaign** +1. Land on dashboard +2. Click "New Campaign" +3. Choose template +4. Customize content +5. Preview +6. Publish +7. Success confirmation + +**Flow 2: View Analytics** +[Define the flow] +``` + +--- + +### 7. Deliverables & Timeline + +**What will be delivered:** + +**Design Deliverables:** +- User research (if needed) +- Wireframes +- High-fidelity mockups +- Interactive prototype +- Design specifications +- Component documentation +- Accessibility annotations + +**Timeline:** +- Week 1-2: Research & wireframes +- Week 3-4: High-fidelity designs +- Week 5-6: Prototype & testing +- Week 7-8: Refinement & handoff + +--- + +### 8. Success Criteria + +**How we'll measure success:** + +**Qualitative:** +- User testing feedback +- Stakeholder approval +- Designer review +- Accessibility audit pass + +**Quantitative:** +- Task success rate +- Time on task +- Error rate +- SUS score +- NPS + +**Example:** +```markdown +## Success Criteria + +**Usability Testing:** +- 8/10 users complete primary task without help +- Average SUS score: 75+ +- Zero critical accessibility issues + +**Business Metrics (post-launch):** +- 40% Day 30 retention (up from 15%) +- 90% task completion rate +- < 5% error rate +``` + +--- + +## Design Project Types + +### 1. New Feature Design + +**Focus areas:** +- User needs validation +- Integration with existing product +- Interaction patterns +- Edge cases + +**Brief template:** Standard brief with emphasis on user flows + +--- + +### 2. Redesign Project + +**Focus areas:** +- Current state analysis +- What's working/not working +- Migration considerations +- Before/after comparisons + +**Additional sections:** +- Current pain points +- Competitive analysis +- Design audit findings + +--- + +### 3. Design System + +**Focus areas:** +- Component inventory +- Design principles +- Usage guidelines +- Governance + +**Additional sections:** +- Adoption strategy +- Documentation plan +- Maintenance plan + +--- + +### 4. Brand/Visual Design + +**Focus areas:** +- Brand attributes +- Visual language +- Mood boards +- Design explorations + +**Additional sections:** +- Brand guidelines +- Application examples +- Asset deliverables + +--- + +## Stakeholder Alignment + +### Discovery Questions + +**Ask before starting:** +1. What problem are we solving? +2. Who are the users? +3. What are the business goals? +4. What's the timeline? +5. What are the constraints? +6. How will we measure success? +7. Who needs to approve? + +### Stakeholder Review Process + +**Brief review checklist:** +- [ ] Product Manager reviewed +- [ ] Engineering lead reviewed (feasibility) +- [ ] Design lead approved +- [ ] Key stakeholders aligned +- [ ] Success metrics agreed upon +- [ ] Timeline confirmed +- [ ] Resources allocated + +--- + +## Design Brief Best Practices + +### DO: +- ✅ **Start with "why"** - Clearly state the problem +- ✅ **Define success** - Specific, measurable criteria +- ✅ **Include constraints** - Technical, time, resource +- ✅ **Show examples** - Inspiration, references +- ✅ **Get buy-in early** - Review draft with stakeholders +- ✅ **Keep it concise** - 2-3 pages maximum +- ✅ **Make it visual** - Include diagrams, mockups, references + +### DON'T: +- ❌ **Jump to solutions** - Focus on problem first +- ❌ **Be vague** - "Make it better" isn't helpful +- ❌ **Ignore constraints** - They shape the solution +- ❌ **Work in isolation** - Involve PM, Engineering early +- ❌ **Skip research** - Base decisions on data +- ❌ **Forget accessibility** - Consider from the start + +--- + +## Accessibility in Design Briefs + +### Minimum Requirements + +**Every design brief should include:** + +**WCAG Compliance:** +- [ ] Target level (A, AA, AAA) +- [ ] Color contrast requirements (4.5:1 for text) +- [ ] Keyboard navigation support +- [ ] Screen reader compatibility +- [ ] Touch target sizes (44x44px minimum) + +**Testing Plan:** +- [ ] Screen reader testing (NVDA, JAWS, VoiceOver) +- [ ] Keyboard-only navigation +- [ ] Color contrast validation +- [ ] Automated testing (axe, Lighthouse) + +See `references/accessibility_guidelines.md` for complete checklist. + +--- + +## Cross-Functional Collaboration + +### Working with Product + +**PM provides:** +- Business requirements +- User research +- Success metrics +- Timeline constraints + +**Designer provides:** +- Design expertise +- User experience recommendations +- Feasibility feedback +- Design timeline + +### Working with Engineering + +**Engineering needs from brief:** +- Technical constraints acknowledged +- Interaction patterns defined +- Edge cases documented +- Component reuse identified + +**Design provides to Engineering:** +- Design specifications +- Component documentation +- Interaction details +- Responsive breakpoints + +--- + +## Design Tools & Templates + +### Recommended Tools + +**Design Briefs:** +- Notion (collaborative docs) +- Confluence +- Google Docs +- Figma FigJam (visual briefs) + +**User Flows:** +- Figma +- Miro +- Whimsical +- FigJam + +**Prototyping:** +- Figma +- Framer +- ProtoPie +- Principle + +--- + +## Example Design Briefs + +### Example 1: Mobile App Feature + +```markdown +# Design Brief: In-App Messaging + +## Project Overview +Add direct messaging between users within our fitness app. + +**Business Goal:** Increase engagement, reduce churn +**User Problem:** Users want to connect with workout partners + +## Design Goals +- Enable 1:1 messaging +- Keep it simple and focused +- Integrate with existing notifications + +## Target Users +Primary: Sarah, fitness enthusiast, 28-45, uses app 4x/week + +## Scope +**In:** 1:1 text messaging, read receipts, notifications +**Out:** Group chat, media sharing (future phase) + +## Success Criteria +- 40% of users try messaging in first 30 days +- 20% become weekly active messagers +- No increase in support tickets + +## Timeline +6 weeks: Research (1w), Design (3w), Prototype & Test (2w) +``` + +--- + +### Example 2: Dashboard Redesign + +```markdown +# Design Brief: Analytics Dashboard Redesign + +## Project Overview +Redesign analytics dashboard to improve data comprehension. + +**Current Issues:** +- Users overwhelmed by data +- Key metrics buried +- Poor mobile experience + +## Design Goals +1. Surface most important metrics first +2. Enable drill-down for details +3. Make it mobile-friendly + +## Target Users +- Marketing managers (primary) +- Executives (secondary) +- Data analysts (tertiary) + +## Success Criteria +- Users find key metric in < 10 seconds +- Mobile traffic increases 30%+ +- SUS score: 75+ + +## Timeline +8 weeks (Research: 2w, Design: 4w, Testing: 2w) +``` + +--- + +## Resources + +### Scripts + +- **generate_brief.sh** - Interactive brief generation +- **validate_brief.sh** - Check brief completeness + +### References + +- **design_brief_template.md** - Comprehensive template +- **accessibility_guidelines.md** - WCAG checklist +- **design_principles.md** - Common design principles +- **user_research_methods.md** - Research guidance + +--- + +## Tips for Designers + +### Before Creating the Brief + +1. **Talk to stakeholders** - Understand the real problem +2. **Review existing research** - Don't start from scratch +3. **Check technical constraints** - Talk to engineering +4. **Understand the timeline** - Be realistic + +### During Brief Creation + +1. **Start with template** - Don't reinvent the wheel +2. **Be specific** - Vague briefs lead to vague designs +3. **Include visuals** - Mood boards, references, examples +4. **Define success** - How will you know it worked? + +### After Brief Creation + +1. **Review with PM** - Align on goals and scope +2. **Review with Engineering** - Validate feasibility +3. **Get stakeholder sign-off** - Explicit approval +4. **Treat it as living doc** - Update as you learn + +--- + +## Common Pitfalls + +### Pitfall 1: Too Broad + +**Problem:** "Redesign the entire app" +**Solution:** Break into phases, prioritize + +### Pitfall 2: Solution-First + +**Problem:** "Make it look like Apple" +**Solution:** Start with user problems, not aesthetics + +### Pitfall 3: No Constraints + +**Problem:** Ignoring technical/time limits +**Solution:** Document and respect constraints + +### Pitfall 4: Skipping Research + +**Problem:** Designing based on assumptions +**Solution:** At minimum, review existing data + +### Pitfall 5: Vague Success Criteria + +**Problem:** "Make it better" isn't measurable +**Solution:** Define specific, testable criteria + +--- + +## Summary + +A great design brief: + +1. **Defines the problem** clearly +2. **Sets goals** and success criteria +3. **Identifies users** and their needs +4. **Documents constraints** (time, tech, budget) +5. **Aligns stakeholders** early +6. **Guides the work** without being prescriptive +7. **Evolves** as you learn + +**Get started:** +```bash +scripts/generate_brief.sh +``` + +This creates a solid foundation for successful design projects. diff --git a/skills/design-brief-generator/references/accessibility_guidelines.md b/skills/design-brief-generator/references/accessibility_guidelines.md new file mode 100644 index 0000000..4017494 --- /dev/null +++ b/skills/design-brief-generator/references/accessibility_guidelines.md @@ -0,0 +1,611 @@ +# Accessibility Guidelines for Design Briefs + +Comprehensive accessibility requirements and best practices for design projects. + +--- + +## Why Accessibility Matters + +**Legal:** ADA, Section 508, AODA compliance +**Business:** 15% of the world has a disability - that's your potential users +**Ethical:** Everyone deserves equal access to digital experiences +**Technical:** Accessible design is better design for everyone + +--- + +## WCAG 2.1 Overview + +### Compliance Levels + +**Level A (Minimum):** +- Basic web accessibility features +- Legal requirement in many jurisdictions +- Addresses most critical barriers + +**Level AA (Recommended):** +- Addresses most common barriers +- Gold standard for most organizations +- Required by many laws (EU, Canada, US Section 508) + +**Level AAA (Enhanced):** +- Highest level of accessibility +- Not required for general compliance +- Often not feasible for all content + +**Recommendation:** Target WCAG 2.1 Level AA for most projects. + +--- + +## Four Principles (POUR) + +### 1. Perceivable +Information and UI components must be presentable to users in ways they can perceive. + +### 2. Operable +UI components and navigation must be operable by all users. + +### 3. Understandable +Information and UI operation must be understandable. + +### 4. Robust +Content must be robust enough to work with current and future technologies. + +--- + +## Key Requirements by Category + +### Visual Design + +#### Color & Contrast +**Requirement:** Minimum contrast ratios +- **Normal text:** 4.5:1 (Level AA) or 7:1 (Level AAA) +- **Large text (18pt+):** 3:1 (Level AA) or 4.5:1 (Level AAA) +- **UI components:** 3:1 for active elements + +**Best Practices:** +- Don't rely on color alone to convey information +- Use patterns, icons, or labels in addition to color +- Test in grayscale to verify information hierarchy +- Consider color blindness (8% of males, 0.5% of females) + +**Tools:** +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [Contrast Ratio](https://contrast-ratio.com/) +- Figma plugins: Stark, A11y - Color Contrast Checker + +#### Typography +**Requirements:** +- Text must be resizable up to 200% without loss of content +- Line height at least 1.5x font size +- Paragraph spacing at least 2x font size +- Letter spacing at least 0.12x font size +- Word spacing at least 0.16x font size + +**Best Practices:** +- Minimum body text size: 16px +- Use relative units (rem, em) not absolute (px) +- Avoid ALL CAPS for long text +- Left-align text (not justified) +- Break long content into shorter paragraphs +- Use clear, simple language + +#### Focus Indicators +**Requirement:** Keyboard focus must be visible + +**Best Practices:** +- Focus indicator contrast ratio: 3:1 minimum +- Don't remove default focus styles without replacement +- Use outline or border (not just background color change) +- Maintain focus order that follows visual layout +- Show focus on all interactive elements + +--- + +### Interaction Design + +#### Keyboard Navigation +**Requirements:** +- All functionality available via keyboard +- No keyboard traps +- Logical tab order +- Skip links for repetitive content + +**Tab Order:** +1. Header navigation +2. Main content +3. Sidebar (if present) +4. Footer + +**Keyboard Shortcuts:** +- `Tab` - Move forward through interactive elements +- `Shift + Tab` - Move backward +- `Enter` - Activate buttons/links +- `Space` - Activate buttons, toggle checkboxes +- `Arrow keys` - Navigate within components (menus, radio groups) +- `Esc` - Close modals/menus + +**Best Practices:** +- Add "Skip to main content" link +- Ensure modals trap focus appropriately +- Return focus when closing overlays +- Document custom keyboard shortcuts + +#### Touch Targets +**Requirements:** +- Minimum touch target size: 44×44px (Level AA) +- Adequate spacing between targets + +**Best Practices:** +- 48×48px or larger for important actions +- At least 8px spacing between touch targets +- Enlarge hit areas beyond visible element +- Consider thumb reach zones on mobile + +#### Time Limits +**Requirements:** +- Users can extend, adjust, or turn off time limits +- 20-hour minimum for inactive sessions +- Warning before timeout + +**Best Practices:** +- Avoid auto-advancing carousels +- Pause auto-playing media +- Save user progress +- Warn 60+ seconds before timeout + +#### Motion & Animation +**Requirements:** +- Respect `prefers-reduced-motion` setting +- No flashing content (> 3 flashes/second) +- Provide pause controls for moving content + +**Best Practices:** +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } +} +``` + +--- + +### Content & Information + +#### Alternative Text +**Requirements:** +- All images have alt text +- Decorative images have empty alt (`alt=""`) +- Complex images have detailed descriptions + +**Alt Text Guidelines:** +- Describe content and function, not appearance +- Keep under 150 characters +- Don't start with "Image of" or "Picture of" +- For decorative images: `alt=""` +- For complex diagrams: Use `aria-describedby` or long description + +**Examples:** +- ❌ "Image of a dog" +- ✅ "Golden retriever playing fetch in a park" +- ❌ "Click here button" +- ✅ "Submit registration form" + +#### Headings +**Requirements:** +- Logical heading structure (H1 → H2 → H3) +- Don't skip heading levels +- H1 used once per page + +**Best Practices:** +```html +

Page Title

+

Section 1

+

Subsection

+

Section 2

+

Subsection

+``` + +#### Links +**Requirements:** +- Link text describes destination +- Links distinguishable from surrounding text + +**Best Practices:** +- ❌ "Click here" or "Read more" +- ✅ "Read the design brief guidelines" +- ❌ URL as link text (https://example.com) +- ✅ Descriptive text with URL in title +- Indicate when links open in new windows +- Underline links in body text + +#### Forms +**Requirements:** +- Labels for all inputs +- Error messages clearly identify problems +- Instructions provided where needed +- Group related form elements + +**Best Practices:** +```html + + +We'll never share your email +``` + +- Place labels above or beside inputs (not inside) +- Use `
` and `` for groups +- Provide inline validation +- Clear error messages with solutions +- Disable submit until required fields complete + +#### Tables +**Requirements:** +- Use table headers (``) +- Associate headers with data cells +- Provide table caption or summary + +**Best Practices:** +```html + + + + + + + + + + + + + + +
Project Timeline
PhaseDuration
Discovery2 weeks
+``` + +--- + +### Component-Specific Guidelines + +#### Modals & Dialogs +- Focus first element when opened +- Trap focus within modal +- Close with Esc key +- Return focus when closed +- Use `role="dialog"` and `aria-modal="true"` +- Provide accessible close button + +#### Carousels +- Pause on hover/focus +- Keyboard controls to navigate +- Don't auto-advance (or make stoppable) +- Indicate current slide +- All controls keyboard accessible + +#### Navigation +- Skip to main content link +- Keyboard accessible dropdowns +- Clear current page indicator +- Breadcrumb trail when appropriate +- Mobile menu keyboard accessible + +#### Forms with Multiple Steps +- Indicate current step and total steps +- Allow navigation between steps +- Save progress +- Review before submit +- Accessible progress indicator + +#### Search +- Label search input clearly +- Announce results to screen readers +- Show result count +- Support keyboard navigation of results + +--- + +## Screen Reader Considerations + +### ARIA (Accessible Rich Internet Applications) + +**Core Principles:** +1. **Use semantic HTML first** - ARIA should enhance, not replace +2. **Don't override native semantics** +3. **All interactive elements must be keyboard accessible** +4. **Don't use ARIA to make elements focusable** + +**Common ARIA Attributes:** + +```html + +