design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,63 @@
|
||||
---
|
||||
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)
|
||||
Reference in new issue
Block a user