neo
76c4c5b4fe
- 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
40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
---
|
|
title: Web Accessibility
|
|
created: 2026-06-02
|
|
updated: 2026-06-02
|
|
type: concept
|
|
tags: [web-design, accessibility]
|
|
sources:
|
|
- raw/articles/web-design-research.md
|
|
- raw/articles/crawford-new-rules-2026.md
|
|
- raw/articles/crawford-20-principles.md
|
|
confidence: high
|
|
---
|
|
|
|
# Web Accessibility — Доступность веб-дизайна (WCAG)
|
|
|
|
## Стандарт
|
|
**WCAG 2.2** (W3C) — международный стандарт ISO. Уровни A, AA, AAA.
|
|
Для бизнес-сайтов достаточно AA. Для госсайтов — обязательно.
|
|
|
|
## Crawford: не чеклист, а фундамент
|
|
- Accessibility не «галочка в конце проекта», а часть дизайна с первого дня
|
|
- Растущие юридические риски за недоступность
|
|
- Доступный дизайн и хороший дизайн совпадают на 80%
|
|
|
|
## Ключевые практики
|
|
- **Контраст**: текст < 18px → 4.5:1 (AA), > 18px → 3:1
|
|
- **Alt-текст**: все изображения с информационным наполнением
|
|
- **Клавиатурная навигация**: все интерактивные элементы доступны с Tab/Enter/
|
|
- **Focus indicators**: видимый фокус при Tab
|
|
- **ARIA-атрибуты**: для динамических элементов
|
|
- **Prefers-reduced-motion**: уважать настройки пользователя
|
|
- **Semantic HTML5**: header, nav, main, section, article, footer
|
|
- **Heading hierarchy**: один H1, вложенные H2-H6
|
|
|
|
## Инструменты проверки
|
|
- WAVE (wave.webaim.org)
|
|
- Axe (deque.com/axe)
|
|
- Lighthouse — встроен в Chrome
|
|
- colour contrast analyzer
|