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.