WCAG 2.4.4 Назначение ссылки (в контексте)

Критерий успеха 2.4.4 помогает людям решить, переходить ли по ссылке, не угадывая. Пользователи программ экранного доступа (скринридеров) часто выводят список всех ссылок на странице, а пользователи клавиатуры переходят от ссылки к ссылке; список из десяти ссылок «Нажмите здесь» им ничего не говорит. Это уровень A, он входит в EN 301 549 (пункт 9.2.4.4). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Назначение каждой ссылки можно определить:

• по одному тексту ссылки или
• по тексту ссылки вместе с её программно определяемым контекстом —

за исключением случаев, когда назначение ссылки было бы неоднозначным для пользователей в целом.

Контекст ссылки — это информация, которую вспомогательные технологии могут связать со ссылкой: то же предложение, абзац, пункт списка или ячейка таблицы, заголовок столбца или строки этой ячейки или текст, указанный через aria-describedby. Доступное имя ссылки тоже учитывается — для ссылки-изображения это альтернативный текст изображения.

Исключение касается ссылок, назначение которых никто не может понять из страницы, например ссылки в головоломке; тогда дополнительный контекст не требуется.

Типичные ошибки в интернет-магазине

• ссылки только с иконкой (корзина, кабинет, избранное, соцсети) без текста и без aria-label;
• ссылки-изображения товаров, где у изображения нет альтернативного текста, поэтому у ссылки вообще нет имени;
• несколько ссылок «Подробнее», «Купить» или «Детали» в сетке, никак не связанных с названием товара;
• область карты изображения со ссылкой (<area>) без alt;
• ссылки, текст которых — голый URL или код отслеживания.

Как проверить

Автоматически: наша проверка сообщает о ссылках без различимого текста (правило link name) и об областях карт изображений без альтернативного текста. Она не может оценить, понятно ли имя вроде «Ещё» в контексте, поэтому неоднозначный текст ссылок требует ручной проверки.

Вручную: откройте список ссылок в программе экранного доступа (или в расширении браузера, которое выводит ссылки) и прочитайте каждую ссылку вне контекста. Если ссылка непонятна, проверьте, проясняет ли её предложение, пункт списка, ячейка таблицы или заголовок. Особенно внимательно проверьте ссылки-иконки и ссылки-изображения.

Как исправить

• Пишите текст ссылки, который говорит, куда она ведёт: «Посмотреть стоимость доставки» вместо «Нажмите здесь».
• В карточках товаров делайте ссылкой название товара или добавляйте контекст к повторяющимся ссылкам: Купить<span class="visually-hidden"> – Льняная рубашка</span>.
• Давайте ссылкам-иконкам доступное имя — видимым текстом, визуально скрытым текстом или через aria-label.
• Пишите для изображений-ссылок альтернативный текст, который описывает цель перехода, а не только картинку.
• Добавьте alt к каждому <area> в карте изображения.

Связанные критерии

• 2.5.3 Подпись в имени — доступное имя должно содержать видимый текст.
• 2.4.6 Заголовки и подписи — заголовки и подписи должны быть описательными.
• 1.1.1 Нетекстовый контент — изображениям нужны текстовые альтернативы.

Частые вопросы

Допустимы ли ссылки «Подробнее» по WCAG 2.4.4?

Да, если их назначение понятно из программно определяемого контекста, например из того же предложения, абзаца, пункта списка или ячейки таблицы либо из заголовка, под которым стоит ссылка. Но текст ссылки, понятный сам по себе, всё равно лучше.

Что такое программно определяемый контекст ссылки?

Информация, которую вспомогательные технологии могут связать со ссылкой: окружающее предложение, абзац, пункт списка или ячейка таблицы либо текст, привязанный к ссылке через aria-describedby или aria-labelledby.

Нарушают ли ссылки-иконки 2.4.4?

У ссылки-иконки без доступного имени, например иконки корзины или соцсети без текста и aria-label, назначение определить невозможно. Дайте ей имя, например «Корзина» или «Instagram».