accessibility-a11y

What this skill does

# Accessibility (a11y) Best Practices

You are an expert in web accessibility and inclusive design. Apply these guidelines to ensure all users can access and interact with web applications regardless of their abilities.

## Core Accessibility Principles

- Follow WCAG (Web Content Accessibility Guidelines) standards
- Use semantic HTML to improve accessibility and screen reader compatibility
- Ensure high accessibility standards using ARIA roles and native accessibility props
- Design for all users including those with visual, auditory, motor, and cognitive disabilities
- Test with various assistive technologies

## Semantic HTML

### Structural Elements
- Use semantic elements like `<header>`, `<main>`, `<footer>`, `<nav>`, `<article>`, `<section>`, `<aside>`
- Employ `<button>` for interactive elements, not `<div>` or `<span>`
- Use proper heading hierarchy (h1-h6) without skipping levels
- Use landmarks (e.g., `<nav>`, `<main>`, `<aside>`) for screen reader navigation
- Avoid deprecated markup

### Form Accessibility
- Associate labels with form inputs using `for` and `id` attributes
- Group related form elements with `<fieldset>` and `<legend>`
- Provide clear error messages and validation feedback
- Use appropriate input types (email, tel, number, etc.)
- Include placeholder text as supplementary hints, not replacements for labels

## ARIA Implementation

### When to Use ARIA
- Use ARIA roles and attributes to enhance accessibility where semantic HTML is insufficient
- Prefer native HTML elements over ARIA when possible
- Use `aria-label` for elements without visible text labels
- Implement `aria-describedby` for additional context
- Use `aria-live` regions for dynamic content updates

### Common ARIA Patterns
- Use `role="button"` only when a non-button element must act as a button
- Implement `aria-expanded` for collapsible content
- Use `aria-hidden="true"` for decorative elements
- Apply `aria-current="page"` for navigation highlighting
- Use `aria-labelledby` to reference visible labels

## Visual Accessibility

### Color and Contrast
- Ensure sufficient color contrast for text (minimum 4.5:1 for normal text, 3:1 for large text)
- Never use color as the only means of conveying information
- Provide alternative indicators (icons, patterns, text) alongside color
- Test designs with color blindness simulators

### Focus Management
- Use focus styles to indicate focus state clearly
- Ensure visible focus indicators on all interactive elements
- Manage focus appropriately when content changes dynamically
- Avoid removing outline styles without providing alternatives
- Implement logical tab order

## Keyboard Navigation

### Navigation Requirements
- Provide keyboard navigation for all interactive elements
- Ensure all functionality is accessible via keyboard alone
- Use tabindex appropriately (0 for natural order, -1 for programmatic focus)
- Implement keyboard shortcuts for complex interactions
- Avoid keyboard traps

### Interactive Elements
- Ensure interactive elements are large enough for touch (minimum 44x44 pixels)
- Implement keyboard event handlers (`onKeyDown`, `onKeyPress`) alongside click handlers
- Support Enter and Space keys for activating buttons
- Implement arrow key navigation for complex widgets

## Content Accessibility

### Images and Media
- Ensure all images have descriptive alt text
- Use empty alt="" for decorative images
- Provide captions for videos
- Include transcripts for audio content
- Use descriptive link text (avoid "click here")

### Text and Typography
- Use relative units (rem, em) for typography
- Ensure text can be resized up to 200% without loss of functionality
- Maintain adequate line height and letter spacing
- Avoid justified text which can create uneven spacing
- Support user preferences for reduced motion

## Responsive and Adaptive Design

### Mobile-First Approach
- Design mobile-first, then scale upward
- Implement responsive layouts that work across devices
- Ensure touch targets are appropriately sized
- Support both portrait and landscape orientations

### User Preferences
- Respect `prefers-reduced-motion` for animations
- Support `prefers-color-scheme` for dark/light modes
- Consider `prefers-contrast` for high contrast needs
- Implement `prefers-reduced-transparency` when applicable

## Testing and Validation

### Automated Testing
- Use tools like Lighthouse for accessibility audits
- Integrate axe-core for automated accessibility testing
- Run accessibility checks in CI/CD pipelines
- Address all critical and serious accessibility issues

### Manual Testing
- Test with screen readers (NVDA, JAWS, VoiceOver)
- Navigate entirely by keyboard
- Test with browser zoom at 200%
- Use browser accessibility inspection tools
- Test with actual users who have disabilities when possible

## CSS Best Practices for Accessibility

- Use external stylesheets; avoid inline styles for maintainability
- Leverage Flexbox and Grid for robust layouts
- Use class selectors for styling (BEM naming methodology recommended)
- Implement responsive design with media queries
- Ensure hover states also have focus equivalents