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».