---
title: Accessibility (WCAG) Standards
description: Web accessibility guidelines for premium design.
tags: [accessibility, wcag, contrast, screen-reader, keyboard]
---

# Accessibility (WCAG) Standards

## WCAG 2.1 Level AA Requirements

### 1. Perceivable
- Text alternatives for non-text content
- Captions for multimedia
- Content adaptable (1 column, no scroll)
- Color contrast: 4.5:1 (normal), 3:1 (large)

### 2. Operable
- Keyboard accessible
- Enough time to read/use
- No flashing >3 times/second
- Navigable (skip links, headings, focus)

### 3. Understandable
- Readable text
- Predictable navigation
- Input assistance (labels, placeholders)

### 4. Robust
- Compatible with assistive tech
- Valid HTML
- ARIA labels where needed

## Focus Management

```css
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
```

## Screen Reader Patterns

```html
<!-- Skip link -->
<a href="#main" class="skip-link">Skip to content</a>

<!-- Landmarks -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>

<!-- Live regions -->
<div aria-live="polite" role="status">Loading...</div>
```

## Anti-Patterns
- Never rely on color alone
- Never remove focus outlines without replacement
- Never use `display: none` for hiding content that should be accessible
- Never skip heading hierarchy (h1 → h2 → h3)