Initial commit
This commit is contained in:
Zhongwei Li
12
.claude-plugin/plugin.json
Normal file
12
.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "ui-design-review",
|
||||
"description": "Comprehensive UI/UX design review for websites and desktop applications with extensive WCAG 2.1/2.2 accessibility analysis, usability evaluation, and visual design assessment",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "rknall",
|
||||
"email": "zhongweili@tubi.tv"
|
||||
},
|
||||
"skills": [
|
||||
"./"
|
||||
]
|
||||
}
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# ui-design-review
|
||||
|
||||
Comprehensive UI/UX design review for websites and desktop applications with extensive WCAG 2.1/2.2 accessibility analysis, usability evaluation, and visual design assessment
|
||||
774
SKILL.md
Normal file
774
SKILL.md
Normal file
@@ -0,0 +1,774 @@
|
||||
---
|
||||
name: "UI/UX Design Review"
|
||||
description: "Comprehensive design review for websites and desktop applications with extensive accessibility analysis. Use this skill when users ask you to review UI/UX designs, wireframes, mockups, prototypes, or deployed interfaces for usability, accessibility (WCAG compliance), visual design, interaction patterns, responsive design, and best practices for web and desktop applications."
|
||||
---
|
||||
|
||||
# UI/UX Design Review
|
||||
|
||||
This skill provides comprehensive design review capabilities for websites and desktop applications, with a strong focus on accessibility compliance and best practices.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Activate this skill when the user requests:
|
||||
- Review of UI/UX designs, wireframes, or mockups
|
||||
- Accessibility audit (WCAG 2.1/2.2 compliance)
|
||||
- Usability assessment
|
||||
- Visual design critique
|
||||
- Interaction pattern review
|
||||
- Responsive design evaluation
|
||||
- Design system assessment
|
||||
- Component library review
|
||||
- User flow analysis
|
||||
- Information architecture review
|
||||
- Desktop application UI review
|
||||
|
||||
## Review Framework
|
||||
|
||||
### 1. Initial Analysis
|
||||
|
||||
When a user provides a design or interface, begin by:
|
||||
|
||||
1. **Understanding Context**
|
||||
- Ask clarifying questions about:
|
||||
- Target audience and personas
|
||||
- Platform(s): web, desktop (Windows/Mac/Linux), mobile
|
||||
- Accessibility requirements and compliance level needed
|
||||
- Brand guidelines or design system in use
|
||||
- User research or testing conducted
|
||||
- Technical constraints
|
||||
- Browser/OS support requirements
|
||||
- Key user goals and tasks
|
||||
|
||||
2. **Design Artifact Analysis**
|
||||
- If designs, screenshots, or prototypes are provided, analyze:
|
||||
- Visual hierarchy and layout
|
||||
- Color usage and contrast
|
||||
- Typography and readability
|
||||
- Component patterns and consistency
|
||||
- Navigation structure
|
||||
- Interactive elements
|
||||
- Responsive behavior
|
||||
- State variations (hover, active, disabled, error, etc.)
|
||||
|
||||
### 2. Comprehensive Review Areas
|
||||
|
||||
Evaluate the design across these dimensions:
|
||||
|
||||
#### A. Accessibility (WCAG 2.1/2.2 Compliance)
|
||||
|
||||
This is a CRITICAL area that must be thoroughly reviewed for all interfaces.
|
||||
|
||||
**Level A Requirements (Minimum):**
|
||||
|
||||
**1.1 Text Alternatives**
|
||||
- [ ] All images have appropriate alt text
|
||||
- [ ] Decorative images have empty alt attributes
|
||||
- [ ] Icons have accessible labels
|
||||
- [ ] Complex images have detailed descriptions
|
||||
- [ ] Image buttons have descriptive text
|
||||
|
||||
**1.2 Time-based Media**
|
||||
- [ ] Video content has captions
|
||||
- [ ] Audio content has transcripts
|
||||
- [ ] Pre-recorded media has alternatives
|
||||
|
||||
**1.3 Adaptable**
|
||||
- [ ] Content structure is logical without CSS
|
||||
- [ ] Reading order is meaningful
|
||||
- [ ] Instructions don't rely solely on sensory characteristics
|
||||
- [ ] Semantic HTML is used properly
|
||||
- [ ] Form labels are programmatically associated
|
||||
|
||||
**1.4 Distinguishable**
|
||||
- [ ] Color is not the only visual means of conveying information
|
||||
- [ ] Audio controls are available
|
||||
- [ ] Text has sufficient contrast (4.5:1 for normal text, 3:1 for large text)
|
||||
- [ ] Text can be resized up to 200% without loss of functionality
|
||||
- [ ] Images of text are avoided (except logos)
|
||||
|
||||
**2.1 Keyboard Accessible**
|
||||
- [ ] All functionality is keyboard accessible
|
||||
- [ ] No keyboard traps exist
|
||||
- [ ] Keyboard shortcuts don't conflict with assistive technologies
|
||||
- [ ] Focus order is logical
|
||||
- [ ] Focus is visible at all times
|
||||
|
||||
**2.2 Enough Time**
|
||||
- [ ] Time limits can be adjusted, extended, or turned off
|
||||
- [ ] Moving, blinking, scrolling content can be paused
|
||||
- [ ] Auto-updating content can be paused or controlled
|
||||
|
||||
**2.3 Seizures and Physical Reactions**
|
||||
- [ ] Content doesn't flash more than 3 times per second
|
||||
- [ ] No content violates flash threshold
|
||||
|
||||
**2.4 Navigable**
|
||||
- [ ] Skip links allow bypassing repeated content
|
||||
- [ ] Page titles are descriptive and unique
|
||||
- [ ] Focus order preserves meaning
|
||||
- [ ] Link purpose is clear from context
|
||||
- [ ] Multiple navigation methods exist
|
||||
- [ ] Headings and labels are descriptive
|
||||
|
||||
**2.5 Input Modalities**
|
||||
- [ ] All functionality works with pointer gestures
|
||||
- [ ] Touch targets are sufficiently large (minimum 44x44px)
|
||||
- [ ] Accidental activation is prevented
|
||||
|
||||
**3.1 Readable**
|
||||
- [ ] Page language is identified
|
||||
- [ ] Language changes are marked up
|
||||
|
||||
**3.2 Predictable**
|
||||
- [ ] Focus doesn't trigger unexpected changes
|
||||
- [ ] Input doesn't trigger unexpected changes
|
||||
- [ ] Navigation is consistent across pages
|
||||
- [ ] Components are identified consistently
|
||||
|
||||
**3.3 Input Assistance**
|
||||
- [ ] Form errors are identified and described
|
||||
- [ ] Labels and instructions are provided
|
||||
- [ ] Error suggestions are offered
|
||||
- [ ] Critical actions can be reversed, checked, or confirmed
|
||||
|
||||
**4.1 Compatible**
|
||||
- [ ] HTML is valid and properly nested
|
||||
- [ ] IDs are unique
|
||||
- [ ] ARIA attributes are used correctly
|
||||
- [ ] Status messages are programmatically determinable
|
||||
|
||||
**Level AA Requirements (Recommended):**
|
||||
|
||||
- [ ] Contrast ratio is at least 4.5:1 (3:1 for large text)
|
||||
- [ ] Text can be resized up to 200% without assistive technology
|
||||
- [ ] Images of text are avoided unless customizable
|
||||
- [ ] Visual presentation of text allows customization
|
||||
- [ ] Audio content doesn't interfere with screen readers
|
||||
- [ ] Multiple ways to locate pages exist
|
||||
- [ ] Headings and labels are descriptive
|
||||
- [ ] Focus indicator is visible
|
||||
- [ ] Section headings are used to organize content
|
||||
|
||||
**Level AAA Requirements (Best Practice):**
|
||||
|
||||
- [ ] Contrast ratio is at least 7:1 (4.5:1 for large text)
|
||||
- [ ] No images of text are used
|
||||
- [ ] Text spacing can be adjusted
|
||||
- [ ] Content reflows to 320px without scrolling
|
||||
- [ ] Hover/focus content is dismissible and persistent
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Specific WCAG violations with severity level
|
||||
- Missing ARIA labels and landmarks
|
||||
- Color contrast issues with measured ratios
|
||||
- Keyboard navigation problems
|
||||
- Screen reader compatibility issues
|
||||
- Missing alternative text
|
||||
- Form accessibility issues
|
||||
- Focus management problems
|
||||
- Semantic HTML issues
|
||||
|
||||
**Testing Recommendations:**
|
||||
- Use automated tools: axe DevTools, WAVE, Lighthouse
|
||||
- Manual keyboard navigation testing
|
||||
- Screen reader testing (NVDA, JAWS, VoiceOver)
|
||||
- Color contrast analyzers
|
||||
- Focus indicator visibility
|
||||
- Zoom testing (200%, 400%)
|
||||
|
||||
#### B. Visual Design & Aesthetics
|
||||
|
||||
**Evaluate:**
|
||||
- Visual hierarchy and layout structure
|
||||
- Color palette and color theory application
|
||||
- Typography choices and hierarchy
|
||||
- White space and density
|
||||
- Visual balance and alignment
|
||||
- Consistency with brand guidelines
|
||||
- Modern vs dated design patterns
|
||||
- Visual weight distribution
|
||||
- Grid system usage
|
||||
- Component visual consistency
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Cluttered or overwhelming layouts
|
||||
- Poor visual hierarchy
|
||||
- Inconsistent spacing
|
||||
- Typography issues (too many fonts, poor sizing)
|
||||
- Color palette problems
|
||||
- Lack of visual breathing room
|
||||
- Misaligned elements
|
||||
- Inconsistent component styling
|
||||
- Dated design patterns
|
||||
|
||||
**Design System Considerations:**
|
||||
- Design token usage (colors, spacing, typography)
|
||||
- Component library consistency
|
||||
- Pattern library adherence
|
||||
- Brand guideline compliance
|
||||
|
||||
#### C. User Experience & Usability
|
||||
|
||||
**Evaluate:**
|
||||
- User flow logic and efficiency
|
||||
- Information architecture
|
||||
- Navigation patterns and clarity
|
||||
- Cognitive load
|
||||
- Task completion efficiency
|
||||
- Error prevention and recovery
|
||||
- Feedback mechanisms
|
||||
- Learnability for new users
|
||||
- Efficiency for experienced users
|
||||
- Mental models and user expectations
|
||||
- Consistency with platform conventions
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Confusing navigation
|
||||
- Too many steps to complete tasks
|
||||
- Unclear labeling or terminology
|
||||
- Missing or unclear feedback
|
||||
- Poor error messages
|
||||
- Inconsistent interaction patterns
|
||||
- Violation of established conventions
|
||||
- High cognitive load
|
||||
- Missing confirmation for destructive actions
|
||||
|
||||
**Jakob Nielsen's Usability Heuristics:**
|
||||
1. Visibility of system status
|
||||
2. Match between system and real world
|
||||
3. User control and freedom
|
||||
4. Consistency and standards
|
||||
5. Error prevention
|
||||
6. Recognition rather than recall
|
||||
7. Flexibility and efficiency of use
|
||||
8. Aesthetic and minimalist design
|
||||
9. Help users recognize and recover from errors
|
||||
10. Help and documentation
|
||||
|
||||
#### D. Responsive Design & Layout
|
||||
|
||||
**Evaluate:**
|
||||
- Breakpoint strategy
|
||||
- Mobile-first approach
|
||||
- Touch target sizes (minimum 44x44px)
|
||||
- Content reflow behavior
|
||||
- Layout patterns (sidebar, hamburger menu, etc.)
|
||||
- Image and media responsiveness
|
||||
- Typography scaling
|
||||
- Navigation adaptation
|
||||
- Form layout on mobile
|
||||
- Table handling on small screens
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Missing breakpoints
|
||||
- Horizontal scrolling on mobile
|
||||
- Too-small touch targets
|
||||
- Overlapping content
|
||||
- Poor mobile navigation
|
||||
- Unreadable text on mobile
|
||||
- Missing mobile-specific patterns
|
||||
- Inefficient use of screen space
|
||||
|
||||
**Desktop-Specific Considerations:**
|
||||
- Window resizing behavior
|
||||
- Minimum/maximum window dimensions
|
||||
- Multi-monitor support
|
||||
- Native OS patterns (Windows, macOS, Linux)
|
||||
- Keyboard shortcuts
|
||||
- Context menus
|
||||
- Drag and drop
|
||||
|
||||
#### E. Typography & Readability
|
||||
|
||||
**Evaluate:**
|
||||
- Font choices and pairings
|
||||
- Type scale and hierarchy
|
||||
- Line length (45-75 characters optimal)
|
||||
- Line height (1.5-1.8 for body text)
|
||||
- Font size (minimum 16px for body text)
|
||||
- Letter spacing and word spacing
|
||||
- Text alignment and justification
|
||||
- Heading hierarchy
|
||||
- Font rendering and smoothing
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Too many font families (limit to 2-3)
|
||||
- Poor font size choices
|
||||
- Insufficient contrast
|
||||
- Lines too long or too short
|
||||
- Inadequate line height
|
||||
- Missing heading hierarchy
|
||||
- Justified text without hyphenation
|
||||
- All-caps text for long content
|
||||
- Poor font weight choices
|
||||
|
||||
**Best Practices:**
|
||||
- Use system fonts for performance
|
||||
- Include fallback fonts
|
||||
- Implement proper font loading strategy
|
||||
- Use relative units (rem, em)
|
||||
- Ensure readability at 200% zoom
|
||||
|
||||
#### F. Color & Contrast
|
||||
|
||||
**Evaluate:**
|
||||
- Color palette cohesion
|
||||
- Contrast ratios (WCAG compliance)
|
||||
- Color meaning and semantics
|
||||
- Color blindness accessibility
|
||||
- Dark mode support
|
||||
- Brand color usage
|
||||
- Color consistency
|
||||
- Accent and action colors
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Insufficient contrast ratios
|
||||
- Relying solely on color to convey information
|
||||
- Too many colors in the palette
|
||||
- Poor color combinations
|
||||
- Missing dark mode
|
||||
- Inconsistent color usage
|
||||
- Colors that don't work for color blindness
|
||||
- Clashing or garish combinations
|
||||
|
||||
**Tools for Testing:**
|
||||
- Contrast checkers (WebAIM, Stark)
|
||||
- Color blindness simulators
|
||||
- Color palette analyzers
|
||||
|
||||
**Contrast Requirements:**
|
||||
- Normal text: 4.5:1 (AA), 7:1 (AAA)
|
||||
- Large text (18pt+/14pt bold+): 3:1 (AA), 4.5:1 (AAA)
|
||||
- UI components and graphics: 3:1 (AA)
|
||||
|
||||
#### G. Interactive Elements & Components
|
||||
|
||||
**Evaluate:**
|
||||
- Button styles and states
|
||||
- Form controls and inputs
|
||||
- Links and their appearance
|
||||
- Interactive feedback (hover, active, focus, disabled)
|
||||
- Loading states and skeletons
|
||||
- Error states and validation
|
||||
- Success states and confirmations
|
||||
- Tooltips and popovers
|
||||
- Modals and dialogs
|
||||
- Dropdown and select menus
|
||||
- Toggle switches and checkboxes
|
||||
- Radio buttons
|
||||
- Accordions and collapsible content
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Unclear clickable areas
|
||||
- Missing hover/focus states
|
||||
- Poor button hierarchy
|
||||
- Inconsistent interactive patterns
|
||||
- Missing loading indicators
|
||||
- Unclear disabled states
|
||||
- Poor error messaging
|
||||
- Ambiguous icons without labels
|
||||
- Too many action options
|
||||
- Destructive actions without confirmation
|
||||
|
||||
**Component Checklist:**
|
||||
- [ ] All states are designed (default, hover, focus, active, disabled, error, success)
|
||||
- [ ] Touch targets meet minimum size
|
||||
- [ ] Interactive elements have clear affordances
|
||||
- [ ] Focus indicators are visible
|
||||
- [ ] Loading states prevent multiple submissions
|
||||
- [ ] Error messages are helpful and specific
|
||||
|
||||
#### H. Navigation & Information Architecture
|
||||
|
||||
**Evaluate:**
|
||||
- Primary navigation structure
|
||||
- Secondary navigation patterns
|
||||
- Breadcrumb implementation
|
||||
- Search functionality
|
||||
- Menu organization
|
||||
- Site map clarity
|
||||
- Content categorization
|
||||
- Navigation depth
|
||||
- Cross-linking strategy
|
||||
- Back button behavior
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Overcomplicated navigation
|
||||
- Hidden or buried important features
|
||||
- Inconsistent navigation patterns
|
||||
- Missing breadcrumbs
|
||||
- Poor search UX
|
||||
- Too many navigation levels
|
||||
- Unclear menu labels
|
||||
- Missing way to return to home/previous page
|
||||
|
||||
**Best Practices:**
|
||||
- Keep navigation shallow (3 levels max)
|
||||
- Highlight current location
|
||||
- Provide multiple paths to content
|
||||
- Make navigation consistent across pages
|
||||
- Use familiar patterns
|
||||
|
||||
#### I. Forms & Data Entry
|
||||
|
||||
**Evaluate:**
|
||||
- Form layout and structure
|
||||
- Input field design
|
||||
- Label placement and clarity
|
||||
- Placeholder usage
|
||||
- Required field indicators
|
||||
- Validation approach (inline vs on submit)
|
||||
- Error messaging
|
||||
- Success confirmation
|
||||
- Multi-step form patterns
|
||||
- Auto-complete support
|
||||
- Input masking for formatted data
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Unclear required fields
|
||||
- Poor error messages
|
||||
- Labels missing or unclear
|
||||
- Too many fields
|
||||
- Poor validation timing
|
||||
- Missing help text
|
||||
- Unclear formatting requirements
|
||||
- No progress indication for multi-step forms
|
||||
- Placeholder text used as labels
|
||||
- Poor mobile form experience
|
||||
|
||||
**Best Practices:**
|
||||
- Label above or left of input
|
||||
- Don't use placeholder as label
|
||||
- Validate inline where possible
|
||||
- Show specific error messages
|
||||
- Indicate required fields clearly
|
||||
- Group related fields
|
||||
- Provide formatting hints
|
||||
- Auto-focus first field
|
||||
- Preserve data on error
|
||||
|
||||
#### J. Performance & Loading
|
||||
|
||||
**Evaluate:**
|
||||
- Perceived performance
|
||||
- Loading indicators
|
||||
- Skeleton screens
|
||||
- Progressive loading
|
||||
- Lazy loading images
|
||||
- Optimistic UI updates
|
||||
- Loading time feedback
|
||||
- Offline states
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Missing loading indicators
|
||||
- Blank screens during load
|
||||
- Layout shift during loading
|
||||
- No offline messaging
|
||||
- Poor perceived performance
|
||||
- Blocking user actions unnecessarily
|
||||
|
||||
#### K. Content & Microcopy
|
||||
|
||||
**Evaluate:**
|
||||
- Heading clarity
|
||||
- Button labels
|
||||
- Error messages
|
||||
- Empty states
|
||||
- Onboarding copy
|
||||
- Help text
|
||||
- Success messages
|
||||
- Tone and voice consistency
|
||||
- Terminology clarity
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Unclear or technical jargon
|
||||
- Inconsistent terminology
|
||||
- Poor error messages
|
||||
- Missing empty state messaging
|
||||
- Unclear button labels
|
||||
- Too verbose or too terse
|
||||
- Inconsistent tone
|
||||
|
||||
**Best Practices:**
|
||||
- Use action-oriented button labels
|
||||
- Write conversational, helpful error messages
|
||||
- Provide context in empty states
|
||||
- Use consistent terminology
|
||||
- Match user's language
|
||||
|
||||
#### L. Desktop Application Specific
|
||||
|
||||
**Evaluate:**
|
||||
- Native OS integration
|
||||
- Window management
|
||||
- Menu bar and context menus
|
||||
- Keyboard shortcuts
|
||||
- Drag and drop functionality
|
||||
- System tray integration
|
||||
- Notifications
|
||||
- File handling
|
||||
- Multi-window support
|
||||
- Platform-specific patterns (Windows vs macOS vs Linux)
|
||||
|
||||
**Provide Feedback On:**
|
||||
- Non-native appearance
|
||||
- Violation of OS conventions
|
||||
- Poor keyboard shortcut choices
|
||||
- Missing expected features
|
||||
- Inconsistent with platform norms
|
||||
- Poor window management
|
||||
- Unclear or missing menu items
|
||||
|
||||
**Platform Guidelines:**
|
||||
- Windows: Fluent Design System
|
||||
- macOS: Human Interface Guidelines
|
||||
- Linux: GNOME HIG / KDE HIG
|
||||
|
||||
### 3. Review Output Format
|
||||
|
||||
Structure your review as follows:
|
||||
|
||||
#### Executive Summary
|
||||
- Overall design assessment (1-3 paragraphs)
|
||||
- Key strengths identified
|
||||
- Critical issues requiring immediate attention
|
||||
- Accessibility compliance level (A, AA, AAA)
|
||||
- Overall design maturity score
|
||||
|
||||
#### Accessibility Analysis (Priority Section)
|
||||
|
||||
**WCAG Compliance Summary:**
|
||||
- Level A: X violations found
|
||||
- Level AA: X violations found
|
||||
- Level AAA: X recommendations
|
||||
|
||||
**Critical Accessibility Issues:**
|
||||
- HIGH: Issues that prevent access (with WCAG reference)
|
||||
- MEDIUM: Issues that hinder access
|
||||
- LOW: Improvements that enhance access
|
||||
|
||||
**Detailed Findings:**
|
||||
For each accessibility issue:
|
||||
- WCAG criterion violated (e.g., "1.4.3 Contrast (Minimum)")
|
||||
- Severity: Critical/High/Medium/Low
|
||||
- Description of the issue
|
||||
- User impact (which users are affected)
|
||||
- How to fix it (specific, actionable steps)
|
||||
- Testing method to verify fix
|
||||
|
||||
#### Visual Design Assessment
|
||||
|
||||
**Strengths:**
|
||||
- What works well visually
|
||||
|
||||
**Concerns:**
|
||||
- HIGH: Major visual problems
|
||||
- MEDIUM: Notable issues
|
||||
- LOW: Polish and refinement opportunities
|
||||
|
||||
**Recommendations:**
|
||||
- Specific visual improvements
|
||||
- Design system suggestions
|
||||
- Best practices to follow
|
||||
|
||||
#### UX & Usability Assessment
|
||||
|
||||
**Strengths:**
|
||||
- Positive UX patterns identified
|
||||
|
||||
**Concerns:**
|
||||
- HIGH: Usability blockers
|
||||
- MEDIUM: Friction points
|
||||
- LOW: Nice-to-have improvements
|
||||
|
||||
**Recommendations:**
|
||||
- Specific UX improvements
|
||||
- User flow optimizations
|
||||
- Industry best practices
|
||||
|
||||
#### Responsive Design Assessment
|
||||
|
||||
**Strengths:**
|
||||
- Responsive patterns that work well
|
||||
|
||||
**Concerns:**
|
||||
- Issues at various breakpoints
|
||||
- Mobile-specific problems
|
||||
- Desktop-specific issues
|
||||
|
||||
**Recommendations:**
|
||||
- Breakpoint adjustments
|
||||
- Mobile improvements
|
||||
- Desktop enhancements
|
||||
|
||||
#### Component & Pattern Review
|
||||
|
||||
**Strengths:**
|
||||
- Well-designed components
|
||||
|
||||
**Concerns:**
|
||||
- Inconsistencies
|
||||
- Missing states
|
||||
- Pattern violations
|
||||
|
||||
**Recommendations:**
|
||||
- Component improvements
|
||||
- Design system alignment
|
||||
- Pattern library suggestions
|
||||
|
||||
### 4. Interactive Review Process
|
||||
|
||||
When conducting the review:
|
||||
|
||||
1. **Request design artifacts** if not provided (screenshots, Figma links, prototypes, live URLs)
|
||||
2. **Ask about target users** and accessibility requirements
|
||||
3. **Understand the context** (project stage, constraints, goals)
|
||||
4. **Provide incremental feedback** for large interfaces
|
||||
5. **Offer specific examples** of how to fix issues
|
||||
6. **Reference standards** (WCAG, platform guidelines)
|
||||
7. **Prioritize issues** clearly (critical → low)
|
||||
8. **Suggest tools** for testing and validation
|
||||
9. **Provide code examples** where helpful (HTML, CSS, ARIA)
|
||||
10. **Offer to review specific areas** in more depth
|
||||
|
||||
### 5. Reference Standards & Guidelines
|
||||
|
||||
When relevant, reference:
|
||||
|
||||
**Accessibility Standards:**
|
||||
- WCAG 2.1 Level A (minimum)
|
||||
- WCAG 2.1 Level AA (target)
|
||||
- WCAG 2.2 updates
|
||||
- Section 508 (US government)
|
||||
- ADA compliance
|
||||
- EN 301 549 (EU)
|
||||
|
||||
**Design Guidelines:**
|
||||
- Material Design (Google)
|
||||
- Human Interface Guidelines (Apple)
|
||||
- Fluent Design System (Microsoft)
|
||||
- Carbon Design System (IBM)
|
||||
- Atlassian Design System
|
||||
- GOV.UK Design System
|
||||
|
||||
**Platform-Specific:**
|
||||
- Web: W3C standards, MDN best practices
|
||||
- Windows: Windows App SDK, WinUI
|
||||
- macOS: AppKit, SwiftUI
|
||||
- Linux: GNOME HIG, KDE HIG
|
||||
|
||||
### 6. Testing Tools & Resources
|
||||
|
||||
Recommend appropriate tools:
|
||||
|
||||
**Accessibility Testing:**
|
||||
- Automated: axe DevTools, WAVE, Lighthouse, Pa11y
|
||||
- Manual: Keyboard testing, screen reader testing
|
||||
- Screen readers: NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
|
||||
- Color contrast: WebAIM Contrast Checker, Stark
|
||||
- Color blindness: Color Oracle, Sim Daltonism
|
||||
|
||||
**Visual Testing:**
|
||||
- Browser DevTools
|
||||
- Responsinator
|
||||
- BrowserStack
|
||||
- Device emulators
|
||||
|
||||
**Usability Testing:**
|
||||
- User testing platforms: UserTesting.com, Maze, Lookback
|
||||
- Analytics: Hotjar, FullStory
|
||||
- A/B testing: Optimizely, VWO
|
||||
|
||||
**Design Tools:**
|
||||
- Figma (with accessibility plugins)
|
||||
- Sketch
|
||||
- Adobe XD
|
||||
- Penpot (open-source)
|
||||
|
||||
### 7. Priority Classification
|
||||
|
||||
When identifying issues, use this priority framework:
|
||||
|
||||
**CRITICAL:**
|
||||
- Prevents users from accessing core functionality
|
||||
- WCAG Level A violations
|
||||
- Complete blocks for keyboard/screen reader users
|
||||
- Security or privacy concerns in the UI
|
||||
|
||||
**HIGH:**
|
||||
- Significantly impairs user experience
|
||||
- WCAG Level AA violations
|
||||
- Major usability issues affecting most users
|
||||
- Inconsistent core patterns
|
||||
- Poor mobile experience
|
||||
|
||||
**MEDIUM:**
|
||||
- Creates friction but has workarounds
|
||||
- WCAG Level AAA recommendations
|
||||
- Visual inconsistencies
|
||||
- Minor usability issues
|
||||
- Missing nice-to-have features
|
||||
|
||||
**LOW:**
|
||||
- Polish and refinement
|
||||
- Edge case issues
|
||||
- Aesthetic improvements
|
||||
- Future enhancements
|
||||
|
||||
## Communication Style
|
||||
|
||||
When providing reviews:
|
||||
- Be constructive and specific
|
||||
- Start with positives where applicable
|
||||
- Explain the impact on users (especially accessibility)
|
||||
- Provide actionable recommendations
|
||||
- Include examples and code snippets
|
||||
- Reference specific WCAG criteria when relevant
|
||||
- Prioritize issues clearly
|
||||
- Consider project constraints
|
||||
- Use clear, professional language
|
||||
- Emphasize user-centered thinking
|
||||
- Balance critique with recognition
|
||||
|
||||
## Example Questions to Ask
|
||||
|
||||
Before starting a review, consider asking:
|
||||
|
||||
1. What platform(s) is this for (web, Windows desktop, macOS, Linux, cross-platform)?
|
||||
2. What accessibility level do you need to meet (WCAG A, AA, AAA)?
|
||||
3. Who are your primary users (age, abilities, technical proficiency)?
|
||||
4. Do you have a design system or brand guidelines?
|
||||
5. What browsers and screen sizes do you need to support?
|
||||
6. Have you conducted any user testing?
|
||||
7. Are there specific areas of concern you want me to focus on?
|
||||
8. What stage is this project in (early design, pre-launch, live)?
|
||||
9. Do you have any technical constraints?
|
||||
10. What are the most critical user tasks?
|
||||
|
||||
## Deliverables
|
||||
|
||||
At the end of a review, you should have provided:
|
||||
|
||||
1. Executive summary with overall assessment
|
||||
2. Comprehensive accessibility analysis with WCAG references
|
||||
3. Visual design assessment
|
||||
4. UX and usability findings
|
||||
5. Responsive design evaluation
|
||||
6. Component and pattern review
|
||||
7. Prioritized list of issues (Critical → Low)
|
||||
8. Specific, actionable recommendations
|
||||
9. Code examples for fixes (HTML, CSS, ARIA)
|
||||
10. Testing tool recommendations
|
||||
11. Reference links to guidelines and standards
|
||||
|
||||
## Continuous Support
|
||||
|
||||
After the initial review:
|
||||
- Offer to review specific components in depth
|
||||
- Provide guidance on implementing fixes
|
||||
- Review updated designs
|
||||
- Answer follow-up questions
|
||||
- Suggest additional testing methods
|
||||
- Recommend design system patterns
|
||||
|
||||
Remember: The goal is to help create interfaces that are accessible, usable, beautiful, and effective for all users, with a strong emphasis on inclusive design practices.
|
||||
785
design-patterns-library.md
Normal file
785
design-patterns-library.md
Normal file
@@ -0,0 +1,785 @@
|
||||
# Accessible Design Patterns Library
|
||||
|
||||
Reference implementations and best practices for common UI patterns with accessibility built-in.
|
||||
|
||||
## Navigation Patterns
|
||||
|
||||
### Skip Links
|
||||
|
||||
**Purpose:** Allow keyboard users to bypass repetitive navigation and jump to main content.
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<!-- First focusable element on page -->
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<nav>
|
||||
<!-- Navigation content -->
|
||||
</nav>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Main content -->
|
||||
</main>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- Must be first focusable element
|
||||
- Visible on keyboard focus
|
||||
- Jumps to main content area with `id="main-content"`
|
||||
|
||||
### Responsive Navigation Menu
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<nav aria-label="Main navigation">
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-controls="main-menu"
|
||||
class="menu-toggle"
|
||||
>
|
||||
<span class="sr-only">Menu</span>
|
||||
<svg aria-hidden="true"><!-- hamburger icon --></svg>
|
||||
</button>
|
||||
|
||||
<ul id="main-menu" class="nav-menu">
|
||||
<li><a href="/home" aria-current="page">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const menu = document.querySelector('#main-menu');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
|
||||
menuToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
menu.hidden = isExpanded;
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !menu.hidden) {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
menu.hidden = true;
|
||||
menuToggle.focus();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `aria-label` on nav for multiple navigation regions
|
||||
- `aria-expanded` indicates menu state
|
||||
- `aria-current="page"` for current page
|
||||
- Escape key closes menu
|
||||
- Focus returns to toggle button when closed
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<nav aria-label="Breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/products">Products</a></li>
|
||||
<li><a href="/products/shoes">Shoes</a></li>
|
||||
<li aria-current="page">Running Shoes</li>
|
||||
</ol>
|
||||
</nav>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.breadcrumb li:not(:last-child)::after {
|
||||
content: '/';
|
||||
margin-left: 0.5rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.breadcrumb [aria-current="page"] {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- Use `<nav>` with descriptive `aria-label`
|
||||
- Use ordered list `<ol>` for hierarchy
|
||||
- `aria-current="page"` for current location
|
||||
- Last item is not a link
|
||||
|
||||
## Form Patterns
|
||||
|
||||
### Accessible Form Input
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div class="form-field">
|
||||
<label for="email">
|
||||
Email address
|
||||
<span aria-label="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
aria-required="true"
|
||||
aria-describedby="email-hint email-error"
|
||||
/>
|
||||
<span id="email-hint" class="hint">
|
||||
We'll never share your email with anyone else.
|
||||
</span>
|
||||
<span id="email-error" class="error" role="alert" hidden>
|
||||
Please enter a valid email address.
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.form-field {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 2px solid #0066cc;
|
||||
outline-offset: 2px;
|
||||
border-color: #0066cc;
|
||||
}
|
||||
|
||||
input[aria-invalid="true"] {
|
||||
border-color: #d32f2f;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #d32f2f;
|
||||
}
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const emailInput = document.getElementById('email');
|
||||
const emailError = document.getElementById('email-error');
|
||||
|
||||
emailInput.addEventListener('blur', () => {
|
||||
if (!emailInput.validity.valid) {
|
||||
emailInput.setAttribute('aria-invalid', 'true');
|
||||
emailError.hidden = false;
|
||||
} else {
|
||||
emailInput.removeAttribute('aria-invalid');
|
||||
emailError.hidden = true;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- Label explicitly associated with input via `for`/`id`
|
||||
- Required indicator in label (not just asterisk)
|
||||
- `autocomplete` attribute for auto-fill
|
||||
- `aria-describedby` links to hint and error text
|
||||
- `aria-invalid` when validation fails
|
||||
- Error message has `role="alert"` for announcement
|
||||
|
||||
### Radio Button Group
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<fieldset>
|
||||
<legend>Choose your shipping method</legend>
|
||||
<div class="radio-group">
|
||||
<div class="radio-option">
|
||||
<input
|
||||
type="radio"
|
||||
id="standard"
|
||||
name="shipping"
|
||||
value="standard"
|
||||
checked
|
||||
/>
|
||||
<label for="standard">
|
||||
Standard (3-5 business days)
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio-option">
|
||||
<input
|
||||
type="radio"
|
||||
id="express"
|
||||
name="shipping"
|
||||
value="express"
|
||||
/>
|
||||
<label for="express">
|
||||
Express (1-2 business days)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `<fieldset>` groups related radio buttons
|
||||
- `<legend>` provides group label
|
||||
- Each radio has explicit label
|
||||
- Keyboard navigation with arrow keys (native behavior)
|
||||
|
||||
### Toggle Switch
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notifications"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
/>
|
||||
<label for="notifications">
|
||||
Enable notifications
|
||||
</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.toggle-switch input[type="checkbox"] {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #ccc;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch input[type="checkbox"]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch input[type="checkbox"]:checked {
|
||||
background: #0066cc;
|
||||
}
|
||||
|
||||
.toggle-switch input[type="checkbox"]:checked::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.toggle-switch input[type="checkbox"]:focus {
|
||||
outline: 2px solid #0066cc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `role="switch"` indicates toggle behavior
|
||||
- `aria-checked` reflects state
|
||||
- Minimum 44x44px touch target
|
||||
- Clear focus indicator
|
||||
- Label describes purpose
|
||||
|
||||
## Modal Patterns
|
||||
|
||||
### Accessible Modal Dialog
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<button id="open-modal">Open Dialog</button>
|
||||
|
||||
<div
|
||||
id="modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
aria-describedby="modal-description"
|
||||
hidden
|
||||
class="modal-overlay"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<h2 id="modal-title">Confirm Action</h2>
|
||||
<p id="modal-description">
|
||||
Are you sure you want to delete this item? This action cannot be undone.
|
||||
</p>
|
||||
<div class="modal-actions">
|
||||
<button id="confirm-btn">Delete</button>
|
||||
<button id="cancel-btn">Cancel</button>
|
||||
</div>
|
||||
<button
|
||||
id="close-modal"
|
||||
aria-label="Close dialog"
|
||||
class="close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const modal = document.getElementById('modal');
|
||||
const openBtn = document.getElementById('open-modal');
|
||||
const closeBtn = document.getElementById('close-modal');
|
||||
const cancelBtn = document.getElementById('cancel-btn');
|
||||
let lastFocusedElement;
|
||||
|
||||
// Open modal
|
||||
openBtn.addEventListener('click', () => {
|
||||
lastFocusedElement = document.activeElement;
|
||||
modal.hidden = false;
|
||||
|
||||
// Focus first focusable element
|
||||
const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
firstFocusable?.focus();
|
||||
|
||||
// Trap focus
|
||||
trapFocus(modal);
|
||||
});
|
||||
|
||||
// Close modal
|
||||
function closeModal() {
|
||||
modal.hidden = true;
|
||||
lastFocusedElement?.focus();
|
||||
}
|
||||
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
cancelBtn.addEventListener('click', closeModal);
|
||||
|
||||
// Close on Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !modal.hidden) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on overlay click
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Focus trap
|
||||
function trapFocus(element) {
|
||||
const focusableElements = element.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
const firstFocusable = focusableElements[0];
|
||||
const lastFocusable = focusableElements[focusableElements.length - 1];
|
||||
|
||||
element.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Tab') return;
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstFocusable) {
|
||||
lastFocusable.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastFocusable) {
|
||||
firstFocusable.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `role="dialog"` and `aria-modal="true"`
|
||||
- `aria-labelledby` references dialog title
|
||||
- `aria-describedby` references dialog description
|
||||
- Focus moved to modal when opened
|
||||
- Focus trapped within modal
|
||||
- Escape key closes modal
|
||||
- Focus returned to trigger on close
|
||||
- Close button has `aria-label`
|
||||
|
||||
## Button Patterns
|
||||
|
||||
### Icon Button
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<button aria-label="Delete item" class="icon-button">
|
||||
<svg aria-hidden="true" focusable="false">
|
||||
<!-- trash icon -->
|
||||
</svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `aria-label` provides accessible name
|
||||
- `aria-hidden="true"` hides icon from screen readers
|
||||
- `focusable="false"` prevents icon from receiving focus
|
||||
|
||||
### Loading Button
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<button
|
||||
id="submit-btn"
|
||||
aria-live="polite"
|
||||
aria-busy="false"
|
||||
>
|
||||
<span class="button-text">Submit</span>
|
||||
<span class="spinner" hidden aria-hidden="true"></span>
|
||||
</button>
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const submitBtn = document.getElementById('submit-btn');
|
||||
const buttonText = submitBtn.querySelector('.button-text');
|
||||
const spinner = submitBtn.querySelector('.spinner');
|
||||
|
||||
submitBtn.addEventListener('click', async () => {
|
||||
// Start loading
|
||||
submitBtn.setAttribute('aria-busy', 'true');
|
||||
submitBtn.disabled = true;
|
||||
buttonText.textContent = 'Submitting...';
|
||||
spinner.hidden = false;
|
||||
|
||||
// Simulate async operation
|
||||
await fetch('/api/submit');
|
||||
|
||||
// End loading
|
||||
submitBtn.setAttribute('aria-busy', 'false');
|
||||
submitBtn.disabled = false;
|
||||
buttonText.textContent = 'Submit';
|
||||
spinner.hidden = true;
|
||||
});
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `aria-busy` indicates loading state
|
||||
- Button text changes to describe current state
|
||||
- Button disabled during loading
|
||||
- Spinner has `aria-hidden="true"`
|
||||
|
||||
## Dropdown/Select Patterns
|
||||
|
||||
### Custom Dropdown (Combobox)
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div class="combobox-wrapper">
|
||||
<label id="combo-label" for="combo-input">
|
||||
Choose a fruit
|
||||
</label>
|
||||
<div class="combobox">
|
||||
<input
|
||||
type="text"
|
||||
id="combo-input"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-controls="combo-listbox"
|
||||
aria-labelledby="combo-label"
|
||||
/>
|
||||
<ul
|
||||
id="combo-listbox"
|
||||
role="listbox"
|
||||
aria-labelledby="combo-label"
|
||||
hidden
|
||||
>
|
||||
<li role="option" id="option-1">Apple</li>
|
||||
<li role="option" id="option-2">Banana</li>
|
||||
<li role="option" id="option-3">Cherry</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const combobox = document.getElementById('combo-input');
|
||||
const listbox = document.getElementById('combo-listbox');
|
||||
const options = listbox.querySelectorAll('[role="option"]');
|
||||
let activeIndex = -1;
|
||||
|
||||
// Open listbox
|
||||
combobox.addEventListener('focus', () => {
|
||||
combobox.setAttribute('aria-expanded', 'true');
|
||||
listbox.hidden = false;
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
combobox.addEventListener('keydown', (e) => {
|
||||
switch(e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
activeIndex = Math.min(activeIndex + 1, options.length - 1);
|
||||
updateActiveOption();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
activeIndex = Math.max(activeIndex - 1, 0);
|
||||
updateActiveOption();
|
||||
break;
|
||||
case 'Enter':
|
||||
if (activeIndex >= 0) {
|
||||
selectOption(options[activeIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
closeListbox();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function updateActiveOption() {
|
||||
options.forEach((option, index) => {
|
||||
if (index === activeIndex) {
|
||||
option.setAttribute('aria-selected', 'true');
|
||||
combobox.setAttribute('aria-activedescendant', option.id);
|
||||
option.scrollIntoView({ block: 'nearest' });
|
||||
} else {
|
||||
option.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
combobox.value = option.textContent;
|
||||
closeListbox();
|
||||
}
|
||||
|
||||
function closeListbox() {
|
||||
combobox.setAttribute('aria-expanded', 'false');
|
||||
listbox.hidden = true;
|
||||
activeIndex = -1;
|
||||
}
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `role="combobox"` for input
|
||||
- `aria-expanded` indicates dropdown state
|
||||
- `aria-controls` links to listbox
|
||||
- `aria-activedescendant` tracks active option
|
||||
- Arrow keys navigate options
|
||||
- Enter selects option
|
||||
- Escape closes dropdown
|
||||
|
||||
## Alert Patterns
|
||||
|
||||
### Success Message
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div role="status" aria-live="polite" class="alert alert-success">
|
||||
<svg aria-hidden="true"><!-- checkmark icon --></svg>
|
||||
<span>Your changes have been saved successfully.</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Error Message
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div role="alert" aria-live="assertive" class="alert alert-error">
|
||||
<svg aria-hidden="true"><!-- error icon --></svg>
|
||||
<span>An error occurred. Please try again.</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- `role="status"` for non-critical updates
|
||||
- `role="alert"` for critical messages
|
||||
- `aria-live="polite"` waits for pause
|
||||
- `aria-live="assertive"` interrupts immediately
|
||||
- Icons are decorative (`aria-hidden`)
|
||||
|
||||
## Accordion Pattern
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<div class="accordion">
|
||||
<h3>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-controls="panel-1"
|
||||
id="accordion-1"
|
||||
class="accordion-trigger"
|
||||
>
|
||||
Section 1
|
||||
<span class="accordion-icon" aria-hidden="true">+</span>
|
||||
</button>
|
||||
</h3>
|
||||
<div
|
||||
id="panel-1"
|
||||
role="region"
|
||||
aria-labelledby="accordion-1"
|
||||
class="accordion-panel"
|
||||
hidden
|
||||
>
|
||||
<p>Content for section 1.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
const triggers = document.querySelectorAll('.accordion-trigger');
|
||||
|
||||
triggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
const expanded = trigger.getAttribute('aria-expanded') === 'true';
|
||||
const panel = document.getElementById(trigger.getAttribute('aria-controls'));
|
||||
const icon = trigger.querySelector('.accordion-icon');
|
||||
|
||||
trigger.setAttribute('aria-expanded', !expanded);
|
||||
panel.hidden = expanded;
|
||||
icon.textContent = expanded ? '+' : '−';
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**Accessibility:**
|
||||
- Button wraps heading text
|
||||
- `aria-expanded` indicates state
|
||||
- `aria-controls` links to panel
|
||||
- Panel has `role="region"`
|
||||
- `aria-labelledby` links panel to heading
|
||||
- Icon is decorative
|
||||
|
||||
## Best Practices Summary
|
||||
|
||||
### General Principles
|
||||
1. Use semantic HTML first
|
||||
2. Add ARIA only when semantic HTML isn't sufficient
|
||||
3. Ensure keyboard accessibility for all interactions
|
||||
4. Provide visible focus indicators
|
||||
5. Test with actual assistive technologies
|
||||
6. Don't rely on color alone
|
||||
7. Maintain proper heading hierarchy
|
||||
8. Provide alternative text for images
|
||||
9. Ensure sufficient color contrast
|
||||
10. Support screen reader announcements
|
||||
|
||||
### Common Mistakes to Avoid
|
||||
- ❌ Removing focus outlines without replacement
|
||||
- ❌ Using `<div>` or `<span>` for buttons
|
||||
- ❌ Placeholder text as labels
|
||||
- ❌ Click handlers on non-interactive elements
|
||||
- ❌ Missing alt text on images
|
||||
- ❌ Poor color contrast
|
||||
- ❌ Keyboard traps
|
||||
- ❌ Auto-playing audio/video
|
||||
- ❌ Time limits without extensions
|
||||
- ❌ Unlabeled form controls
|
||||
|
||||
### Testing Checklist
|
||||
- ✅ Keyboard-only navigation
|
||||
- ✅ Screen reader testing
|
||||
- ✅ Automated accessibility scans
|
||||
- ✅ Color contrast verification
|
||||
- ✅ Zoom to 200%
|
||||
- ✅ Focus indicator visibility
|
||||
- ✅ Touch target sizes
|
||||
- ✅ Error message clarity
|
||||
- ✅ Form label associations
|
||||
- ✅ Semantic HTML validation
|
||||
57
plugin.lock.json
Normal file
57
plugin.lock.json
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||
"pluginId": "gh:rknall/claude-skills:ui-design-review",
|
||||
"normalized": {
|
||||
"repo": null,
|
||||
"ref": "refs/tags/v20251128.0",
|
||||
"commit": "043702506e8d65b12bbca23e7cc225470489cab6",
|
||||
"treeHash": "a374f8709d73930aabdca85d09f5019a8f6f259b2c12c19f11befb262d576b29",
|
||||
"generatedAt": "2025-11-28T10:27:58.301169Z",
|
||||
"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": "ui-design-review",
|
||||
"description": "Comprehensive UI/UX design review for websites and desktop applications with extensive WCAG 2.1/2.2 accessibility analysis, usability evaluation, and visual design assessment",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"content": {
|
||||
"files": [
|
||||
{
|
||||
"path": "wcag-checklist.md",
|
||||
"sha256": "95461395a356476595640aca7b0723f6039b41f6cb03d5cd78e7829c1020b4aa"
|
||||
},
|
||||
{
|
||||
"path": "design-patterns-library.md",
|
||||
"sha256": "dce198add05a73a98d3779ca212a9f9cc62f0cf25eb30a851e3d118185040ae3"
|
||||
},
|
||||
{
|
||||
"path": "README.md",
|
||||
"sha256": "809fc2a99cb12bdcecbb843404d80a65b6a53d5403e7d242e915a18f933814d8"
|
||||
},
|
||||
{
|
||||
"path": "testing-resources.md",
|
||||
"sha256": "62380970326771017db03b12943bcd187ddb5c7c8d75950a20240ad3dd8e1e0d"
|
||||
},
|
||||
{
|
||||
"path": "SKILL.md",
|
||||
"sha256": "1ab0a7f41332613487edd235465166b64fa323217e66db13fabfd7eabb155e78"
|
||||
},
|
||||
{
|
||||
"path": ".claude-plugin/plugin.json",
|
||||
"sha256": "65536b914bf1ae2716656929ecfb666c19e3cc4d42341ce03248b205cbb47fb2"
|
||||
}
|
||||
],
|
||||
"dirSha256": "a374f8709d73930aabdca85d09f5019a8f6f259b2c12c19f11befb262d576b29"
|
||||
},
|
||||
"security": {
|
||||
"scannedAt": null,
|
||||
"scannerVersion": null,
|
||||
"flags": []
|
||||
}
|
||||
}
|
||||
532
testing-resources.md
Normal file
532
testing-resources.md
Normal file
@@ -0,0 +1,532 @@
|
||||
# UI/UX Testing Resources
|
||||
|
||||
Comprehensive guide to testing tools, methodologies, and procedures for evaluating user interfaces.
|
||||
|
||||
## Automated Accessibility Testing Tools
|
||||
|
||||
### Browser Extensions
|
||||
|
||||
#### axe DevTools
|
||||
**Platform:** Chrome, Firefox, Edge
|
||||
**Website:** https://www.deque.com/axe/devtools/
|
||||
|
||||
**Features:**
|
||||
- Automated WCAG 2.0/2.1/2.2 testing
|
||||
- Intelligent guided testing
|
||||
- Highlights issues directly in browser
|
||||
- Provides remediation guidance
|
||||
- Export reports
|
||||
|
||||
**How to Use:**
|
||||
1. Install browser extension
|
||||
2. Open DevTools (F12)
|
||||
3. Navigate to "axe DevTools" tab
|
||||
4. Click "Scan ALL of my page"
|
||||
5. Review issues by severity
|
||||
6. Click each issue for details and how to fix
|
||||
|
||||
**Best For:** Daily development workflow, comprehensive scans
|
||||
|
||||
#### WAVE
|
||||
**Platform:** Chrome, Firefox, Edge
|
||||
**Website:** https://wave.webaim.org/extension/
|
||||
|
||||
**Features:**
|
||||
- Visual feedback on accessibility issues
|
||||
- Inline indicators on page
|
||||
- Structure view for semantic analysis
|
||||
- Contrast checker
|
||||
- Free and open source
|
||||
|
||||
**How to Use:**
|
||||
1. Install browser extension
|
||||
2. Navigate to page to test
|
||||
3. Click WAVE icon in toolbar
|
||||
4. Review errors, alerts, and features
|
||||
5. Click items for detailed information
|
||||
|
||||
**Best For:** Visual learners, quick checks
|
||||
|
||||
#### Lighthouse
|
||||
**Platform:** Built into Chrome DevTools
|
||||
**Website:** https://developers.google.com/web/tools/lighthouse
|
||||
|
||||
**Features:**
|
||||
- Performance, accessibility, SEO, best practices
|
||||
- Mobile and desktop testing
|
||||
- Scoring system
|
||||
- Actionable recommendations
|
||||
- Progressive Web App audits
|
||||
|
||||
**How to Use:**
|
||||
1. Open Chrome DevTools (F12)
|
||||
2. Navigate to "Lighthouse" tab
|
||||
3. Select "Accessibility" category
|
||||
4. Choose device type (Mobile/Desktop)
|
||||
5. Click "Generate report"
|
||||
6. Review score and opportunities
|
||||
|
||||
**Best For:** Overall site quality assessment, CI/CD integration
|
||||
|
||||
### Command-Line Tools
|
||||
|
||||
#### Pa11y
|
||||
**Platform:** Node.js
|
||||
**Website:** https://pa11y.org/
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
npm install -g pa11y
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```bash
|
||||
# Test a single page
|
||||
pa11y https://example.com
|
||||
|
||||
# Test with specific WCAG level
|
||||
pa11y --standard WCAG2AA https://example.com
|
||||
|
||||
# Generate HTML report
|
||||
pa11y --reporter html https://example.com > report.html
|
||||
|
||||
# Test multiple pages
|
||||
pa11y-ci --config pa11y-ci.json
|
||||
```
|
||||
|
||||
**Configuration (pa11y-ci.json):**
|
||||
```json
|
||||
{
|
||||
"defaults": {
|
||||
"standard": "WCAG2AA",
|
||||
"timeout": 10000
|
||||
},
|
||||
"urls": [
|
||||
"https://example.com",
|
||||
"https://example.com/about",
|
||||
"https://example.com/contact"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Best For:** CI/CD pipelines, automated testing, bulk testing
|
||||
|
||||
#### axe-core
|
||||
**Platform:** Node.js
|
||||
**Website:** https://github.com/dequelabs/axe-core
|
||||
|
||||
**Installation:**
|
||||
```bash
|
||||
npm install --save-dev axe-core
|
||||
```
|
||||
|
||||
**Usage with Playwright:**
|
||||
```javascript
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const AxeBuilder = require('@axe-core/playwright').default;
|
||||
|
||||
test('homepage should not have accessibility violations', async ({ page }) => {
|
||||
await page.goto('https://example.com');
|
||||
|
||||
const accessibilityScanResults = await new AxeBuilder({ page })
|
||||
.withTags(['wcag2a', 'wcag2aa'])
|
||||
.analyze();
|
||||
|
||||
expect(accessibilityScanResults.violations).toEqual([]);
|
||||
});
|
||||
```
|
||||
|
||||
**Best For:** Integration testing, automated test suites
|
||||
|
||||
## Manual Testing Tools
|
||||
|
||||
### Screen Readers
|
||||
|
||||
#### NVDA (NonVisual Desktop Access)
|
||||
**Platform:** Windows (Free)
|
||||
**Website:** https://www.nvaccess.org/
|
||||
|
||||
**Basic Commands:**
|
||||
- **Insert + Down Arrow**: Read all
|
||||
- **Arrow Keys**: Navigate line by line
|
||||
- **Tab**: Navigate interactive elements
|
||||
- **H**: Jump to next heading
|
||||
- **Insert + F7**: List all elements
|
||||
- **Insert + Space**: Toggle browse/focus mode
|
||||
|
||||
**Testing Checklist:**
|
||||
- [ ] All images have meaningful alt text
|
||||
- [ ] Page title is announced
|
||||
- [ ] Headings structure makes sense
|
||||
- [ ] Form labels are announced
|
||||
- [ ] Error messages are read aloud
|
||||
- [ ] Dynamic content updates are announced
|
||||
- [ ] Navigation landmarks are identified
|
||||
|
||||
#### JAWS (Job Access With Speech)
|
||||
**Platform:** Windows (Paid, free demo)
|
||||
**Website:** https://www.freedomscientific.com/products/software/jaws/
|
||||
|
||||
**Basic Commands:**
|
||||
- **Insert + Down Arrow**: Say all
|
||||
- **H**: Next heading
|
||||
- **Insert + F5**: List form fields
|
||||
- **Insert + F6**: List headings
|
||||
- **Insert + F7**: List links
|
||||
- **Insert + Space**: Toggle virtual cursor
|
||||
|
||||
**Testing Focus:**
|
||||
- ARIA landmarks and roles
|
||||
- Dynamic content updates
|
||||
- Complex widgets (tabs, accordions)
|
||||
- Form validation announcements
|
||||
|
||||
#### VoiceOver
|
||||
**Platform:** macOS, iOS (Built-in)
|
||||
**Website:** https://www.apple.com/accessibility/voiceover/
|
||||
|
||||
**Mac Commands:**
|
||||
- **Cmd + F5**: Toggle VoiceOver
|
||||
- **VO**: Control + Option
|
||||
- **VO + Right/Left Arrow**: Navigate
|
||||
- **VO + Space**: Activate
|
||||
- **VO + A**: Read all
|
||||
- **VO + Command + H**: Next heading
|
||||
|
||||
**iOS Commands:**
|
||||
- **Triple-click Home/Side button**: Toggle VoiceOver
|
||||
- **Swipe right/left**: Navigate
|
||||
- **Double-tap**: Activate
|
||||
- **Two-finger swipe down**: Read all
|
||||
|
||||
**Testing Focus:**
|
||||
- Touch interface accessibility
|
||||
- Gesture alternatives
|
||||
- iOS-specific patterns
|
||||
|
||||
### Keyboard Testing
|
||||
|
||||
#### Keyboard Navigation Checklist
|
||||
|
||||
**Basic Navigation:**
|
||||
- [ ] **Tab**: Move forward through interactive elements
|
||||
- [ ] **Shift + Tab**: Move backward
|
||||
- [ ] **Enter**: Activate buttons and links
|
||||
- [ ] **Space**: Activate buttons, toggle checkboxes
|
||||
- [ ] **Arrow keys**: Navigate within components (menus, tabs)
|
||||
- [ ] **Escape**: Close modals, dropdowns, menus
|
||||
- [ ] **Home/End**: Jump to beginning/end of lists
|
||||
|
||||
**Testing Procedure:**
|
||||
1. Unplug mouse (or don't touch it)
|
||||
2. Start at top of page with Tab key
|
||||
3. Verify focus indicator is visible
|
||||
4. Ensure logical tab order
|
||||
5. Check all interactive elements are reachable
|
||||
6. Verify no keyboard traps
|
||||
7. Test custom components (modals, dropdowns)
|
||||
8. Verify shortcut keys work
|
||||
9. Ensure focus is managed properly (modals, SPAs)
|
||||
|
||||
**Common Issues:**
|
||||
- ❌ Focus indicator removed or invisible
|
||||
- ❌ Illogical tab order
|
||||
- ❌ Interactive elements not keyboard accessible
|
||||
- ❌ Keyboard trap in modal or widget
|
||||
- ❌ No way to close modal with keyboard
|
||||
- ❌ Custom controls don't respond to keyboard
|
||||
|
||||
### Color Contrast Tools
|
||||
|
||||
#### WebAIM Contrast Checker
|
||||
**Website:** https://webaim.org/resources/contrastchecker/
|
||||
|
||||
**Features:**
|
||||
- Checks contrast ratio
|
||||
- WCAG AA and AAA compliance
|
||||
- Suggestions for passing colors
|
||||
- Lightness slider
|
||||
|
||||
**How to Use:**
|
||||
1. Enter foreground color (text)
|
||||
2. Enter background color
|
||||
3. Review contrast ratio
|
||||
4. Adjust colors until passing
|
||||
5. Test for both normal and large text
|
||||
|
||||
**WCAG Requirements:**
|
||||
- Normal text: 4.5:1 (AA), 7:1 (AAA)
|
||||
- Large text (18pt+/14pt bold+): 3:1 (AA), 4.5:1 (AAA)
|
||||
- UI components: 3:1 (AA)
|
||||
|
||||
#### Stark
|
||||
**Platform:** Figma, Sketch, Adobe XD, Chrome
|
||||
**Website:** https://www.getstark.co/
|
||||
|
||||
**Features:**
|
||||
- Contrast checker
|
||||
- Color blindness simulator
|
||||
- Focus order tool
|
||||
- Typography analyzer
|
||||
- Real-time suggestions
|
||||
|
||||
**How to Use:**
|
||||
1. Install plugin/extension
|
||||
2. Select design elements or webpage
|
||||
3. Run contrast check
|
||||
4. Simulate different types of color blindness
|
||||
5. Export accessibility report
|
||||
|
||||
**Best For:** Design phase, Figma/Sketch workflows
|
||||
|
||||
#### Colour Contrast Analyser (CCA)
|
||||
**Platform:** Windows, macOS (Free)
|
||||
**Website:** https://www.tpgi.com/color-contrast-checker/
|
||||
|
||||
**Features:**
|
||||
- Eyedropper tool to sample colors
|
||||
- Foreground/background contrast check
|
||||
- WCAG 2.0/2.1 compliance
|
||||
- Color simulation
|
||||
|
||||
**How to Use:**
|
||||
1. Download and install application
|
||||
2. Use eyedropper to select colors from screen
|
||||
3. Review contrast ratios
|
||||
4. Adjust colors as needed
|
||||
|
||||
**Best For:** Desktop applications, pixel-perfect testing
|
||||
|
||||
### Color Blindness Simulators
|
||||
|
||||
#### Color Oracle
|
||||
**Platform:** Windows, macOS, Linux (Free)
|
||||
**Website:** https://colororacle.org/
|
||||
|
||||
**Features:**
|
||||
- Real-time color blindness simulation
|
||||
- Covers deuteranopia, protanopia, tritanopia
|
||||
- Full-screen overlay
|
||||
|
||||
**How to Use:**
|
||||
1. Install application
|
||||
2. Open your design/website
|
||||
3. Activate simulation mode
|
||||
4. Switch between different types
|
||||
5. Verify all information is conveyed without color alone
|
||||
|
||||
#### Sim Daltonism
|
||||
**Platform:** macOS, iOS (Free)
|
||||
**Website:** https://michelf.ca/projects/sim-daltonism/
|
||||
|
||||
**Features:**
|
||||
- Live preview window
|
||||
- Multiple color blindness types
|
||||
- Floating window you can position
|
||||
|
||||
**Testing Checklist:**
|
||||
- [ ] Links distinguishable without color
|
||||
- [ ] Form errors not relying on red color alone
|
||||
- [ ] Charts use patterns in addition to color
|
||||
- [ ] Status indicators use icons/text
|
||||
- [ ] Important information not color-only
|
||||
|
||||
## Browser Testing
|
||||
|
||||
### Cross-Browser Testing
|
||||
|
||||
#### BrowserStack
|
||||
**Website:** https://www.browserstack.com/
|
||||
|
||||
**Features:**
|
||||
- Real device testing
|
||||
- Desktop and mobile browsers
|
||||
- Automated testing
|
||||
- Local testing
|
||||
|
||||
**Testing Matrix:**
|
||||
- Chrome (latest, latest-1)
|
||||
- Firefox (latest, latest-1)
|
||||
- Safari (latest, latest-1)
|
||||
- Edge (latest, latest-1)
|
||||
- Mobile Safari (iOS)
|
||||
- Chrome Mobile (Android)
|
||||
|
||||
#### Responsinator
|
||||
**Website:** http://www.responsinator.com/
|
||||
|
||||
**Features:**
|
||||
- View site in multiple device sizes
|
||||
- Portrait and landscape orientations
|
||||
- Quick responsive testing
|
||||
|
||||
### Device Emulation
|
||||
|
||||
#### Chrome DevTools Device Mode
|
||||
**How to Access:**
|
||||
1. Open DevTools (F12)
|
||||
2. Click device icon (Ctrl+Shift+M)
|
||||
3. Select device or custom dimensions
|
||||
|
||||
**Features:**
|
||||
- Responsive viewport
|
||||
- Device emulation
|
||||
- Touch simulation
|
||||
- Network throttling
|
||||
- Sensor simulation (geolocation, orientation)
|
||||
|
||||
**Testing Checklist:**
|
||||
- [ ] 320px (small mobile)
|
||||
- [ ] 375px (iPhone)
|
||||
- [ ] 768px (tablet)
|
||||
- [ ] 1024px (small desktop)
|
||||
- [ ] 1440px (large desktop)
|
||||
|
||||
## Usability Testing
|
||||
|
||||
### Remote User Testing
|
||||
|
||||
#### UserTesting.com
|
||||
**Website:** https://www.usertesting.com/
|
||||
|
||||
**Features:**
|
||||
- Real users testing your site
|
||||
- Video recordings of sessions
|
||||
- Targeted demographics
|
||||
- Task-based testing
|
||||
|
||||
**Test Plan Example:**
|
||||
1. "Find and purchase a product"
|
||||
2. "Create an account"
|
||||
3. "Navigate to customer support"
|
||||
4. "Complete the checkout process"
|
||||
|
||||
#### Maze
|
||||
**Website:** https://maze.co/
|
||||
|
||||
**Features:**
|
||||
- Prototype testing
|
||||
- A/B testing
|
||||
- First-click testing
|
||||
- Heatmaps and analytics
|
||||
|
||||
**Metrics Tracked:**
|
||||
- Task completion rate
|
||||
- Time on task
|
||||
- Misclick rate
|
||||
- Path analysis
|
||||
|
||||
### Analytics & Session Recording
|
||||
|
||||
#### Hotjar
|
||||
**Website:** https://www.hotjar.com/
|
||||
|
||||
**Features:**
|
||||
- Heatmaps (click, move, scroll)
|
||||
- Session recordings
|
||||
- Feedback polls
|
||||
- Conversion funnels
|
||||
|
||||
**Insights:**
|
||||
- Where users click most
|
||||
- How far users scroll
|
||||
- Where users get confused
|
||||
- Drop-off points
|
||||
|
||||
#### FullStory
|
||||
**Website:** https://www.fullstory.com/
|
||||
|
||||
**Features:**
|
||||
- Session replay
|
||||
- Funnel analysis
|
||||
- Error tracking
|
||||
- Search and segment sessions
|
||||
|
||||
## Accessibility Testing Checklist
|
||||
|
||||
### Automated Testing (15 minutes)
|
||||
- [ ] Run axe DevTools scan
|
||||
- [ ] Run WAVE evaluation
|
||||
- [ ] Run Lighthouse accessibility audit
|
||||
- [ ] Check HTML validation
|
||||
- [ ] Test with Pa11y (CI/CD)
|
||||
|
||||
### Manual Keyboard Testing (15 minutes)
|
||||
- [ ] Navigate entire page with Tab key
|
||||
- [ ] Verify visible focus indicators
|
||||
- [ ] Check logical tab order
|
||||
- [ ] Test all interactive elements
|
||||
- [ ] Verify no keyboard traps
|
||||
- [ ] Test Escape key behavior
|
||||
- [ ] Check Enter/Space on buttons
|
||||
|
||||
### Screen Reader Testing (30 minutes)
|
||||
- [ ] Test with NVDA or JAWS (Windows)
|
||||
- [ ] Test with VoiceOver (macOS)
|
||||
- [ ] Verify alt text on images
|
||||
- [ ] Check form label associations
|
||||
- [ ] Test dynamic content updates
|
||||
- [ ] Verify ARIA labels on custom controls
|
||||
- [ ] Check heading structure makes sense
|
||||
|
||||
### Visual Testing (15 minutes)
|
||||
- [ ] Check color contrast ratios
|
||||
- [ ] Verify text resizes to 200%
|
||||
- [ ] Test with color blindness simulator
|
||||
- [ ] Check responsive design
|
||||
- [ ] Verify content reflows at 320px
|
||||
- [ ] Test zoom to 400%
|
||||
|
||||
### Mobile Testing (15 minutes)
|
||||
- [ ] Touch target sizes (44x44px minimum)
|
||||
- [ ] Test on actual mobile device
|
||||
- [ ] Verify zoom works
|
||||
- [ ] Test portrait and landscape
|
||||
- [ ] Check mobile navigation
|
||||
- [ ] Verify form usability on mobile
|
||||
|
||||
## Testing Schedule
|
||||
|
||||
### During Development
|
||||
- Automated testing on every build
|
||||
- Manual keyboard testing for new components
|
||||
- Color contrast checks in design phase
|
||||
|
||||
### Before Release
|
||||
- Full WCAG audit
|
||||
- Screen reader testing
|
||||
- Cross-browser testing
|
||||
- Mobile device testing
|
||||
- Usability testing with real users
|
||||
|
||||
### Ongoing
|
||||
- Monitor analytics for usability issues
|
||||
- Collect user feedback
|
||||
- Regular accessibility audits
|
||||
- Stay updated with WCAG standards
|
||||
|
||||
## Tools Quick Reference
|
||||
|
||||
| Category | Tool | Platform | Cost | Best For |
|
||||
|----------|------|----------|------|----------|
|
||||
| Automated | axe DevTools | Browser | Free/Paid | Comprehensive scans |
|
||||
| Automated | WAVE | Browser | Free | Visual feedback |
|
||||
| Automated | Lighthouse | Chrome | Free | CI/CD integration |
|
||||
| Automated | Pa11y | Node.js | Free | Bulk testing |
|
||||
| Screen Reader | NVDA | Windows | Free | Windows testing |
|
||||
| Screen Reader | JAWS | Windows | Paid | Professional testing |
|
||||
| Screen Reader | VoiceOver | macOS/iOS | Free | Apple ecosystem |
|
||||
| Contrast | WebAIM | Web | Free | Quick checks |
|
||||
| Contrast | Stark | Design tools | Free/Paid | Design workflow |
|
||||
| Color Blind | Color Oracle | Desktop | Free | Real-time simulation |
|
||||
| Browser | BrowserStack | Web | Paid | Cross-browser |
|
||||
| Usability | UserTesting | Web | Paid | User research |
|
||||
| Analytics | Hotjar | Web | Free/Paid | Behavior analysis |
|
||||
|
||||
## Resources
|
||||
|
||||
- [W3C WAI Testing Tools List](https://www.w3.org/WAI/test-evaluate/tools/list/)
|
||||
- [WebAIM Articles](https://webaim.org/articles/)
|
||||
- [A11Y Project Resources](https://www.a11yproject.com/resources/)
|
||||
- [Deque University](https://dequeuniversity.com/)
|
||||
- [Google Web Fundamentals - Accessibility](https://developers.google.com/web/fundamentals/accessibility)
|
||||
373
wcag-checklist.md
Normal file
373
wcag-checklist.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# WCAG 2.1/2.2 Compliance Checklist
|
||||
|
||||
A comprehensive checklist for evaluating Web Content Accessibility Guidelines compliance.
|
||||
|
||||
## How to Use This Checklist
|
||||
|
||||
- Check each item during design review
|
||||
- Note the WCAG level: A (minimum), AA (recommended), AAA (enhanced)
|
||||
- Document violations with specific examples
|
||||
- Provide remediation steps for each issue
|
||||
|
||||
## Perceivable
|
||||
|
||||
Information and user interface components must be presentable to users in ways they can perceive.
|
||||
|
||||
### 1.1 Text Alternatives (Level A)
|
||||
|
||||
Provide text alternatives for any non-text content.
|
||||
|
||||
- [ ] **1.1.1** All images have appropriate alt text
|
||||
- Informative images describe the content
|
||||
- Functional images (buttons, links) describe the action
|
||||
- Decorative images have empty alt="" attribute
|
||||
- Complex images have long descriptions
|
||||
|
||||
### 1.2 Time-based Media (Level A/AA)
|
||||
|
||||
Provide alternatives for time-based media.
|
||||
|
||||
- [ ] **1.2.1** Audio-only and video-only content has text alternatives (A)
|
||||
- [ ] **1.2.2** Captions are provided for all pre-recorded audio in video (A)
|
||||
- [ ] **1.2.3** Audio description or text alternative for pre-recorded video (A)
|
||||
- [ ] **1.2.4** Captions are provided for all live audio (AA)
|
||||
- [ ] **1.2.5** Audio description for all pre-recorded video (AA)
|
||||
|
||||
### 1.3 Adaptable (Level A/AA)
|
||||
|
||||
Create content that can be presented in different ways without losing information.
|
||||
|
||||
- [ ] **1.3.1** Info and relationships can be programmatically determined
|
||||
- Semantic HTML elements used correctly (headings, lists, tables)
|
||||
- Form labels are associated with inputs
|
||||
- ARIA landmarks identify page regions
|
||||
- Data tables use proper markup (th, scope, headers)
|
||||
|
||||
- [ ] **1.3.2** Meaningful sequence is preserved without CSS
|
||||
- Content order is logical when stylesheets are disabled
|
||||
- Reading order matches visual order
|
||||
- Tab order is logical
|
||||
|
||||
- [ ] **1.3.3** Instructions don't rely solely on sensory characteristics
|
||||
- Don't use "Click the round button" (use "Click the Save button")
|
||||
- Don't use "See the box on the right" (use "See the Related Articles section")
|
||||
- Don't rely only on color ("Click the green button" → "Click the Submit button")
|
||||
|
||||
- [ ] **1.3.4** Content works in portrait and landscape (AA)
|
||||
- No orientation lock (unless essential)
|
||||
- Content adapts to orientation changes
|
||||
|
||||
- [ ] **1.3.5** Input purpose can be programmatically determined (AA)
|
||||
- Autocomplete attributes used for common inputs
|
||||
- `autocomplete="name"`, `autocomplete="email"`, etc.
|
||||
|
||||
### 1.4 Distinguishable (Level A/AA/AAA)
|
||||
|
||||
Make it easier for users to see and hear content.
|
||||
|
||||
- [ ] **1.4.1** Color is not the only visual means of conveying information (A)
|
||||
- Links are distinguishable without color alone (underline or icon)
|
||||
- Form errors use icons or text, not just red color
|
||||
- Charts use patterns or labels in addition to color
|
||||
|
||||
- [ ] **1.4.2** Audio control is available (A)
|
||||
- Auto-playing audio can be paused, stopped, or muted
|
||||
- Auto-play lasts less than 3 seconds
|
||||
|
||||
- [ ] **1.4.3** Contrast ratio is at least 4.5:1 for normal text, 3:1 for large text (AA)
|
||||
- Normal text: 4.5:1 minimum
|
||||
- Large text (18pt+/14pt bold+): 3:1 minimum
|
||||
- UI components and graphics: 3:1 minimum
|
||||
|
||||
- [ ] **1.4.4** Text can be resized up to 200% without loss of content or functionality (AA)
|
||||
- No horizontal scrolling at 200% zoom
|
||||
- Content doesn't overlap or get cut off
|
||||
- All functionality remains available
|
||||
|
||||
- [ ] **1.4.5** Images of text are avoided (AA)
|
||||
- Use actual text instead of text in images
|
||||
- Exceptions: logos, essential images (charts, screenshots)
|
||||
|
||||
- [ ] **1.4.6** Contrast ratio is at least 7:1 for normal text, 4.5:1 for large text (AAA)
|
||||
|
||||
- [ ] **1.4.10** Content reflows without horizontal scrolling at 320px width (AA)
|
||||
- Content adapts to small viewports
|
||||
- No two-dimensional scrolling required
|
||||
- Exceptions: images, maps, data tables, complex interfaces
|
||||
|
||||
- [ ] **1.4.11** Non-text contrast is at least 3:1 (AA)
|
||||
- UI components (buttons, inputs, controls)
|
||||
- Graphical objects (icons, charts)
|
||||
- Focus indicators
|
||||
|
||||
- [ ] **1.4.12** Text spacing can be adjusted without loss of content (AA)
|
||||
- Line height: 1.5x font size minimum
|
||||
- Paragraph spacing: 2x font size minimum
|
||||
- Letter spacing: 0.12x font size minimum
|
||||
- Word spacing: 0.16x font size minimum
|
||||
|
||||
- [ ] **1.4.13** Content on hover or focus is dismissible, hoverable, and persistent (AA)
|
||||
- Tooltips/popovers can be dismissed (Esc key)
|
||||
- Mouse can hover over the tooltip content
|
||||
- Content remains visible until user dismisses it
|
||||
|
||||
## Operable
|
||||
|
||||
User interface components and navigation must be operable.
|
||||
|
||||
### 2.1 Keyboard Accessible (Level A)
|
||||
|
||||
Make all functionality available from a keyboard.
|
||||
|
||||
- [ ] **2.1.1** All functionality is keyboard accessible
|
||||
- No mouse-only interactions
|
||||
- Custom controls have keyboard support
|
||||
- All interactive elements can be activated via keyboard
|
||||
|
||||
- [ ] **2.1.2** No keyboard traps exist
|
||||
- Users can tab through all content and back out
|
||||
- If focus is trapped (e.g., modal), there's a documented way to escape
|
||||
- Instructions provided if non-standard keyboard navigation
|
||||
|
||||
- [ ] **2.1.4** Single-character keyboard shortcuts can be turned off or remapped (A)
|
||||
- Shortcuts only active when component has focus
|
||||
- Can be disabled or customized
|
||||
|
||||
### 2.2 Enough Time (Level A/AAA)
|
||||
|
||||
Provide users enough time to read and use content.
|
||||
|
||||
- [ ] **2.2.1** Time limits can be adjusted (A)
|
||||
- User can turn off, adjust, or extend time limits
|
||||
- Warning given before time expires
|
||||
- At least 20 seconds to respond to warning
|
||||
|
||||
- [ ] **2.2.2** Moving, blinking, scrolling content can be paused (A)
|
||||
- Carousels have pause button
|
||||
- Auto-scrolling can be stopped
|
||||
- Exceptions: essential animations under 5 seconds
|
||||
|
||||
### 2.3 Seizures and Physical Reactions (Level A/AAA)
|
||||
|
||||
Do not design content that can cause seizures.
|
||||
|
||||
- [ ] **2.3.1** Content doesn't flash more than 3 times per second (A)
|
||||
- No rapidly flashing content
|
||||
- Animation effects are below threshold
|
||||
|
||||
### 2.4 Navigable (Level A/AA/AAA)
|
||||
|
||||
Provide ways to help users navigate and find content.
|
||||
|
||||
- [ ] **2.4.1** Skip links allow bypassing repeated content (A)
|
||||
- "Skip to main content" link is first focusable element
|
||||
- Skip links to bypass navigation, search, etc.
|
||||
|
||||
- [ ] **2.4.2** Page titles are descriptive and unique (A)
|
||||
- Every page has a unique, descriptive `<title>`
|
||||
- Title identifies page purpose
|
||||
- Format: "Page Name - Site Name"
|
||||
|
||||
- [ ] **2.4.3** Focus order preserves meaning and operability (A)
|
||||
- Tab order is logical
|
||||
- Focus order matches visual order
|
||||
- No unexpected focus changes
|
||||
|
||||
- [ ] **2.4.4** Link purpose is clear from link text or context (A)
|
||||
- Avoid "Click here" or "Read more"
|
||||
- Link text describes destination
|
||||
- Context provides clarity if needed
|
||||
|
||||
- [ ] **2.4.5** Multiple ways to locate pages exist (AA)
|
||||
- Search functionality
|
||||
- Site map
|
||||
- Navigation menu
|
||||
- Breadcrumbs
|
||||
|
||||
- [ ] **2.4.6** Headings and labels are descriptive (AA)
|
||||
- Headings clearly describe content
|
||||
- Form labels are clear and descriptive
|
||||
|
||||
- [ ] **2.4.7** Focus indicator is visible (AA)
|
||||
- Clear outline or highlight on focused elements
|
||||
- 3:1 contrast ratio for focus indicators
|
||||
- Not removed with `outline: none` without replacement
|
||||
|
||||
- [ ] **2.4.8** Information about user's location is available (AAA)
|
||||
- Breadcrumbs show current location
|
||||
- Current nav item is highlighted
|
||||
- Page title indicates location
|
||||
|
||||
### 2.5 Input Modalities (Level A/AAA)
|
||||
|
||||
Make it easier for users to operate functionality through various inputs.
|
||||
|
||||
- [ ] **2.5.1** All functionality works with pointer gestures (A)
|
||||
- Multi-point or path-based gestures have single-pointer alternatives
|
||||
- Pinch-to-zoom has zoom buttons
|
||||
- Swipe gestures have button alternatives
|
||||
|
||||
- [ ] **2.5.2** Pointer cancellation prevents accidental activation (A)
|
||||
- Actions occur on up-event (mouseup/touchend), not down-event
|
||||
- Or action can be aborted/undone
|
||||
|
||||
- [ ] **2.5.3** Labels match accessible names (A)
|
||||
- Visible label text is included in accessible name
|
||||
- "Submit" button has accessible name "Submit"
|
||||
|
||||
- [ ] **2.5.4** Motion actuation can be disabled (A)
|
||||
- Shaking device to undo can be turned off
|
||||
- UI alternatives provided
|
||||
|
||||
- [ ] **2.5.5** Target size is at least 44x44 CSS pixels (AAA)
|
||||
- Touch targets meet minimum size
|
||||
- Sufficient spacing between targets
|
||||
|
||||
## Understandable
|
||||
|
||||
Information and user interface operation must be understandable.
|
||||
|
||||
### 3.1 Readable (Level A/AA/AAA)
|
||||
|
||||
Make text content readable and understandable.
|
||||
|
||||
- [ ] **3.1.1** Page language is identified (A)
|
||||
- `<html lang="en">` attribute is set
|
||||
- Correct language code used
|
||||
|
||||
- [ ] **3.1.2** Language changes are marked up (AA)
|
||||
- `lang` attribute used for content in different language
|
||||
- `<span lang="es">Hola</span>`
|
||||
|
||||
- [ ] **3.1.3** Unusual words are defined (AAA)
|
||||
- Jargon, idioms, and slang are explained
|
||||
- Glossary or inline definitions provided
|
||||
|
||||
### 3.2 Predictable (Level A/AA)
|
||||
|
||||
Make web pages appear and operate in predictable ways.
|
||||
|
||||
- [ ] **3.2.1** Focus doesn't trigger unexpected changes (A)
|
||||
- Receiving focus doesn't open popups
|
||||
- Focus doesn't redirect to another page
|
||||
- Focus doesn't change context without warning
|
||||
|
||||
- [ ] **3.2.2** Input doesn't trigger unexpected changes (A)
|
||||
- Entering data doesn't automatically submit forms
|
||||
- Selecting radio button doesn't redirect
|
||||
- Changes require explicit submit/save action
|
||||
- Or users are warned before context changes
|
||||
|
||||
- [ ] **3.2.3** Navigation is consistent across pages (AA)
|
||||
- Navigation appears in same location on each page
|
||||
- Menu items in same order
|
||||
|
||||
- [ ] **3.2.4** Components are identified consistently (AA)
|
||||
- Same icons/labels used for same functions
|
||||
- Search icon always means search
|
||||
- "Save" button always labeled "Save"
|
||||
|
||||
### 3.3 Input Assistance (Level A/AA/AAA)
|
||||
|
||||
Help users avoid and correct mistakes.
|
||||
|
||||
- [ ] **3.3.1** Form errors are identified (A)
|
||||
- Error messages clearly identify which field has error
|
||||
- Error is described in text, not just color
|
||||
|
||||
- [ ] **3.3.2** Labels and instructions are provided (A)
|
||||
- Every input has a label
|
||||
- Required fields are marked
|
||||
- Format requirements are explained
|
||||
|
||||
- [ ] **3.3.3** Error suggestions are offered (AA)
|
||||
- Provide helpful suggestions to fix errors
|
||||
- "Email format incorrect. Example: user@example.com"
|
||||
- Suggest corrections for misspellings
|
||||
|
||||
- [ ] **3.3.4** Critical actions can be reversed, checked, or confirmed (AA)
|
||||
- Financial transactions can be reversed
|
||||
- Data deletion requires confirmation
|
||||
- Form data can be reviewed before submission
|
||||
|
||||
## Robust
|
||||
|
||||
Content must be robust enough to work with current and future technologies.
|
||||
|
||||
### 4.1 Compatible (Level A/AA)
|
||||
|
||||
Maximize compatibility with current and future user agents, including assistive technologies.
|
||||
|
||||
- [ ] **4.1.1** HTML is valid and properly nested (A)
|
||||
- Opening and closing tags match
|
||||
- Elements nested correctly
|
||||
- IDs are unique
|
||||
|
||||
- [ ] **4.1.2** Name, role, value are programmatically determinable (A)
|
||||
- Form inputs have labels
|
||||
- Custom controls have ARIA roles
|
||||
- State changes are communicated (aria-expanded, aria-checked)
|
||||
|
||||
- [ ] **4.1.3** Status messages can be perceived without focus (AA)
|
||||
- Success messages use `role="status"` or `aria-live="polite"`
|
||||
- Urgent messages use `role="alert"` or `aria-live="assertive"`
|
||||
- Loading states announced to screen readers
|
||||
|
||||
## Additional Best Practices
|
||||
|
||||
Beyond WCAG requirements, consider these best practices:
|
||||
|
||||
### Screen Reader Support
|
||||
- [ ] ARIA landmarks define page structure (banner, navigation, main, contentinfo)
|
||||
- [ ] Headings are used hierarchically (h1 → h2 → h3, no skipping)
|
||||
- [ ] Images in links are given appropriate alt text
|
||||
- [ ] Icon-only buttons have accessible labels
|
||||
- [ ] Visually hidden text provides context where needed
|
||||
|
||||
### Keyboard Navigation
|
||||
- [ ] Tab order is logical and efficient
|
||||
- [ ] Escape key closes modals and dropdowns
|
||||
- [ ] Arrow keys navigate within component groups
|
||||
- [ ] Enter/Space activate buttons and links
|
||||
- [ ] Custom keyboard shortcuts are documented
|
||||
|
||||
### Forms
|
||||
- [ ] Field labels are above or left of inputs (not placeholder text)
|
||||
- [ ] Error messages appear near the field with the error
|
||||
- [ ] Required fields marked with asterisk AND text "(required)"
|
||||
- [ ] Success confirmation after form submission
|
||||
- [ ] Form data preserved if validation fails
|
||||
|
||||
### Focus Management
|
||||
- [ ] Focus moved to modal when opened
|
||||
- [ ] Focus returned to trigger when modal closes
|
||||
- [ ] Focus not lost when content updates dynamically
|
||||
- [ ] Focus visible and meets 3:1 contrast ratio
|
||||
|
||||
### Content Structure
|
||||
- [ ] Only one h1 per page
|
||||
- [ ] Headings don't skip levels
|
||||
- [ ] Lists used for list content (ul, ol, dl)
|
||||
- [ ] Tables used for tabular data only
|
||||
- [ ] Table headers (th) identify rows and columns
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [ ] Automated testing with axe DevTools
|
||||
- [ ] Automated testing with WAVE
|
||||
- [ ] Lighthouse accessibility audit
|
||||
- [ ] Keyboard-only navigation test
|
||||
- [ ] Screen reader test (NVDA/JAWS/VoiceOver)
|
||||
- [ ] Color contrast verification
|
||||
- [ ] 200% zoom test
|
||||
- [ ] Responsive design test (320px width minimum)
|
||||
- [ ] Color blindness simulation
|
||||
- [ ] Touch target size verification
|
||||
|
||||
## Resources
|
||||
|
||||
- [WCAG 2.1 Official Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
|
||||
- [WCAG 2.2 Updates](https://www.w3.org/WAI/WCAG22/quickref/)
|
||||
- [WebAIM WCAG Checklist](https://webaim.org/standards/wcag/checklist)
|
||||
- [A11Y Project Checklist](https://www.a11yproject.com/checklist/)
|
||||
- [axe DevTools Browser Extension](https://www.deque.com/axe/devtools/)
|
||||
Reference in New Issue
Block a user