wow-design-wiki/concepts/accessibility-standards.md

title, description, tags

title	description	tags
Accessibility (WCAG) Standards	Web accessibility guidelines for premium design.	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

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

Screen Reader Patterns

<!-- 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)