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