Ссылки навигации и активные состояния
Создавайте навигацию с понятными активными состояниями, используя className и aria-current; делайте ссылки доступными и удобными на небольших экранах.
«Ссылки навигации и активные состояния» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Почему важны активные состояния
Цель: создайте небольшую панель навигации и чётко обозначьте активный маршрут для пользователей и программ чтения с экрана.
- Оформление активного элемента
- aria-current
- Компоновка для небольших экранов
Логика активного состояния и доступность
Определяйте активное состояние ссылки, сравнивая текущий путь. Добавьте выразительное визуальное оформление и установите aria-current="page" для активной ссылки.
Демонстрация: активная навигация
Мы реализуем небольшой маршрутизатор на основе хеша и компонент навигации, который оформляет активную ссылку и устанавливает aria-current.
<div id="root"></div>
Советы по доступности
Советы по доступности:
- Используйте настоящие ссылки <a> для навигации.
- Устанавливайте aria-current="page" для активной ссылки.
- Сохраняйте видимость фокуса после навигации.
Визуальная ясность
Делайте активные состояния заметными с помощью цвета и контраста; увеличьте области касания (минимум 40px) и оставьте достаточно места для небольших экранов.
Типичные ошибки
Избегайте следующего:
- Использования только стилей при наведении — пользователи сенсорных устройств их не увидят.
- Забывания установить aria-current для активных ссылок.
- Опоры только на URL без обновления интерфейса.
Рекомендации по активному состоянию
Итоги
Итоги: определяйте активные ссылки по текущему пути, чётко оформляйте их и устанавливайте aria-current="page", чтобы помочь программам чтения с экрана.
Часто задаваемые вопросы
Урок «Ссылки навигации и активные состояния» бесплатный?
Да — полный текст урока «Ссылки навигации и активные состояния» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Ссылки навигации и активные состояния»?
Создавайте навигацию с понятными активными состояниями, используя className и aria-current; делайте ссылки доступными и удобными на небольших экранах. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Ссылки навигации и активные состояния»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Концепции маршрутизации на стороне клиента
- Вложенные маршруты и параметры маршрутов
- Ссылки навигации и активные состояния