Именование нескольких областей с помощью aria-label
Различайте два элемента nav, чтобы пользователи понимали назначение каждого
«Именование нескольких областей с помощью aria-label» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Две навигации — одна проблема
На многих страницах есть основное меню и меню в нижнем колонтитуле. Оба элемента являются ориентирами nav, и без названий для программы чтения с экрана они звучат одинаково.
Назовите область
Добавьте aria-label, чтобы задать ориентиру короткое произносимое название. Теперь программа чтения с экрана сможет различать две области nav.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Делайте названия короткими
Значение aria-label должно состоять из пары слов, например «Основная» или «Хлебные крошки». Пользователи слышат это объявление, поэтому краткость экономит их время.
Не повторяйте роль
Напишите «Нижний колонтитул», а не «Навигация нижнего колонтитула». Программа чтения с экрана уже произносит navigation, поэтому повторение лишь создаёт лишний шум.
<nav aria-label="Footer">...</nav>Используйте видимый заголовок повторно
Если у области уже есть видимый заголовок, укажите на него с помощью aria-labelledby, вместо того чтобы дважды вводить название.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label и labelledby
Используйте aria-label, когда видимого текста нет, а aria-labelledby — когда заголовок или текст на экране может служить названием.
Работает с любым ориентиром
Именование нужно не только для nav. Назовите aside или секцию, чтобы пользователи понимали содержимое каждой области.
<aside aria-label="Related">...</aside>Одна область — название не нужно
Если на странице есть только один nav, ему не нужно название. Названия особенно важны, когда две области имеют одну и ту же роль.
Важны разные названия
Дайте каждой области отличающееся название. Если оба элемента nav названы «Меню», цель не достигнута: пользователи всё ещё не смогут их различить.
Услышьте разницу
После добавления названий список ориентиров содержит «Основная навигация» и «Навигация нижнего колонтитула», поэтому пользователи сразу выбирают нужную область. 🔊
Названия не видны
Значение aria-label объявляется вслух, но никогда не показывается на экране. Визуально ничего не меняется, зато оно помогает всем пользователям программ чтения с экрана.
Быстрая проверка
У вас есть две области nav. Как лучше всего назвать нижнюю?
Итоги: называйте свои области
Вы научились называть повторяющиеся ориентиры с помощью aria-label или aria-labelledby, делая названия короткими, разными и не содержащими роль. 🙌
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Именование нескольких областей с помощью aria-label» бесплатный?
Да — полный текст урока «Именование нескольких областей с помощью aria-label» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Именование нескольких областей с помощью aria-label»?
Различайте два элемента nav, чтобы пользователи понимали назначение каждого Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Именование нескольких областей с помощью aria-label»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- header, nav, main, footer: большая четвёрка
- Размещение содержимого в main и только в одном main
- Именование нескольких областей с помощью aria-label
- Навигация по ориентирам: как пользователи перемещаются по странице