Урок 5: Доступность — фокус, клавиатура и ARIA
Вы стилизовали `<div>` с `onClick`, который выглядит как идеальная кнопка. Но пользователь клавиатуры не может до него добраться, а программа чтения с экрана не знает, что он кликабелен. Этот урок научит вас создавать доступные компоненты в дизайн-системе: семантические элементы управления, кольцо ф
Настоящая кнопка — как дверь с ручкой: её открывает любой, рукой или с клавиатуры. Кликабельный `<div>` — это стена, расписанная под дверь: выглядит правильно, но взяться не за что.
- семантический элемент управления
- HTML-элемент со встроенным смыслом — `<button>`, `<a>`, `<input>`, — который бесплатно даёт поддержку клавиатуры, фокус и роль доступности, без дополнительного кода.
- focus-visible
- Состояние, которое показывает кольцо фокуса только при навигации с клавиатуры, а не при кликах мышью. В Tailwind: `focus-visible:ring-2` — понятный сигнал для пользователей клавиатуры, не мешающий пользователям мыши.
- aria-label
- Атрибут, дающий доступное имя элементу без видимого текста — например, кнопке только со значком, — чтобы программа чтения с экрана могла объявить, что он делает.
- управляемость с клавиатуры
- Способность управлять каждым элементом управления только с клавиатуры — Tab для фокуса, Enter/Space для активации — базовое требование доступности.
