Несколько ссылок пропуска для больших страниц
Предлагайте быстрые переходы к поиску, навигации и содержимому.
«Несколько ссылок пропуска для больших страниц» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Когда одной ссылки недостаточно
На небольшой странице достаточно одной ссылки для пропуска. Но в сложных макетах есть несколько повторяющихся областей, и пользователи могут захотеть перейти не только к main.
Подумайте о целях пользователей
Кому-то может понадобиться поле поиска, основная навигация или нижний колонтитул, а не статья. Предложите именно те места, к которым пользователи действительно хотят перейти.
Предложите несколько ярлыков
Распространённый набор: Перейти к содержимому, Перейти к навигации, Перейти к поиску. Список должен быть коротким, чтобы сам переход по нему не стал утомительным.
Объедините их в навигацию
Оберните ссылки для пропуска в небольшую область nav, чтобы они воспринимались как единый связный набор ярлыков в начале страницы.
<nav aria-label="Skip links"> ... </nav>Назовите эту область
Задайте оболочке aria-label, например «Ссылки для пропуска». Без названия две области nav на одной странице звучат для пользователя средства чтения с экрана одинаково.
Для каждой ссылки нужна цель
Каждому ярлыку по-прежнему нужен настоящий id, на который можно перейти. «Перейти к поиску» указывает на область поиска, «Перейти к навигации» — на меню и так далее.
<a href="#search">Skip to search</a>Цели должны оставаться доступными для фокуса
Как и раньше, добавьте tabindex минус один каждой цели, чтобы при активации соответствующей ссылки фокус надёжно перемещался туда.
Не переусердствуйте
Не добавляйте ярлык для каждого элемента. Слишком большое количество ссылок для пропуска само превращается в повторяющийся блок, по которому приходится перемещаться с помощью Tab.
Ориентиры берут на себя основную работу
Помните: хорошо заданные ориентиры уже позволяют пользователям средств чтения с экрана переходить от одной области к другой. Дополнительные ссылки для пропуска в основном нужны зрячим пользователям клавиатуры.
Здесь порядок тоже важен
Расположите ярлыки в логичном порядке, обычно начиная с содержимого, поскольку именно за ним пришло большинство пользователей. Редко используемые варианты разместите в конце.
Проверьте каждый переход
Перемещайтесь по набору с помощью Tab и активируйте каждый ярлык. Каждый раз убеждайтесь, что фокус оказывается в нужной области, а не на элементе рядом. ✅
Быстрая проверка
Как следует объединить несколько ссылок для пропуска на большой странице?
Итоги
На больших страницах предложите несколько ссылок для пропуска в именованной области nav, каждая со своей целью, доступной для фокуса. Набор должен быть коротким, а содержимое — стоять первым. 🎯
Часто задаваемые вопросы
Урок «Несколько ссылок пропуска для больших страниц» бесплатный?
Да — полный текст урока «Несколько ссылок пропуска для больших страниц» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Несколько ссылок пропуска для больших страниц»?
Предлагайте быстрые переходы к поиску, навигации и содержимому. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Несколько ссылок пропуска для больших страниц»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Зачем нужен переход к основному содержимому
- Создание действительно работающей ссылки пропуска
- Скрыт визуально до получения фокуса
- Несколько ссылок пропуска для больших страниц