64 lines
1.4 KiB
Markdown
64 lines
1.4 KiB
Markdown
---
|
|
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)
|