intermediate
Screen readers
Проектируйте names, descriptions, announcements, порядок чтения и live regions, понятные в workflow screen reader.
Screen readers (NVDA, JAWS, VoiceOver, TalkBack) превращают accessibility tree в речь или braille. На интервью — accessible names, descriptions, порядок чтения, навигация по заголовкам и live regions, а не заучивание настроек verbosity.
<button aria-label="Close dialog">×</button>
<div role="status" aria-live="polite" id="cart-status"></div>
| Понятие | Практика | |---------|----------| | Accessible name | Видимый текст, `aria-label` или `aria-labelledby` | | Description | `aria-describedby` для подсказок и ошибок | | Порядок чтения | Порядок DOM совпадает с визуальным | | Live regions | `aria-live="polite"` для некритичных обновлений |
Тестируйте минимум один desktop и один mobile screen reader на критичных flow — автоматика не озвучивает контент.
На интервью: name vs description; когда уместен `aria-hidden`; polite vs assertive; virtual cursor vs focus.
Типовые ошибки: дублировать видимый текст в `aria-label`; объявлять каждое нажатие; пустые кнопки; декоративные картинки с длинным alt.
Компромисс — многословность объявлений против своевременного feedback в динамическом UI.
Чеклист:
- У каждого контрола осмысленное accessible name.
- Динамический статус через live regions осознанно.
- Декор скрыт от дерева.
- Smoke checkout/login с VoiceOver или NVDA.