Посилання, що відкриваються в новій вкладці чи вікні
Оновлено 14 жовтня 2026 · 6 хв читання
Відкривати посилання в новій вкладці — звичка багатьох магазинів: сторінки платіжних провайдерів, таблиці розмірів, посилання на соцмережі, інколи взагалі всі зовнішні посилання. WCAG цього не забороняє, але несподівана нова вкладка для декого — справжній бар'єр. На цій сторінці — що каже WCAG, коли нова вкладка доречна і як правильно попередити користувачів. Сторінка входить до серії доступні UI-патерни.
Що каже WCAG
Жоден критерій успіху рівня A чи AA не забороняє target="_blank". Відповідні матеріали W3C:
- Техніка G201, «Giving users advanced warning when opening a new window» (завчасне попередження користувачів про відкриття нового вікна). W3C наводить її як рекомендовану техніку для 2.4.4 Призначення посилання (в контексті), 2.4.6 Заголовки та маркування, 2.4.9 «Призначення посилання (лише посилання)» і 3.2.5 «Зміна на вимогу». Для виконання цих критеріїв вона «не є обов'язковою» — це добра практика.
- 3.2.5 «Зміна на вимогу» (рівень AAA) — критерій, який передбачає відкриття нових вікон лише на запит користувача.
- 3.2.2 Під час введення (рівень A) важливий тоді, коли нове вікно відкривається не з посилання, а коли людина змінює перемикач, прапорець чи select. Помилка W3C F37 — це «відкриття нового вікна без попередження, коли змінюється вибір перемикача, прапорця або списку select».
G201 пояснює причину: несподівані нові вікна можуть дезорієнтувати людей, яким важко сприймати візуальний вміст, і деяких людей з когнітивними порушеннями, а кнопка «Назад» не поверне їх на попередню сторінку.
Коли нова вкладка доречна
- Користувач посеред завдання, а посилання відкриває потрібну йому довідку поруч: таблицю розмірів чи умови під час оформлення замовлення, коли перехід зі сторінки призвів би до втрати введених даних.
- Стороння сторінка, з якої користувач повернеться, наприклад сторінка відстеження посилки, якщо користувача попереджено.
Коли це зазвичай не допомагає: звичайна навігація всередині вашого магазину, іконки соцмереж у футері, статті блогу, кожне зовнішнє посилання, «щоб користувачі не йшли». Користувачі, яким потрібна нова вкладка, можуть відкрити її самі; навпаки — неможливо.
Приклад коду
<!-- Попередження у видимому тексті посилання: працює для всіх -->
<a href="/uk/size-guide" target="_blank">Таблиця розмірів (відкриється в новій вкладці)</a>
<!-- Іконка з текстовою альтернативою, пов'язаною через aria-describedby -->
<a href="https://tracking.example.com/123" target="_blank" aria-describedby="new-tab-note">
Відстежити посилку
<svg aria-hidden="true" focusable="false" class="icon"><use href="#icon-external"></use></svg>
</a>
<span id="new-tab-note" class="visually-hidden">Відкриється в новій вкладці</span>
<!-- Файл: скажіть, що це, замість примусової нової вкладки -->
<a href="/files/returns-form.pdf">Форма повернення (PDF, 120 КБ)</a>
Примітки:
- G201 показує обидва підходи: попередження в тексті посилання або іконку, приховану через
aria-hidden, плюс текстовий опис, пов'язаний черезaria-describedby, щоб його почули й користувачі програм зчитування з екрана. - Іконка без текстової альтернативи допомагає лише зрячим користувачам, які знають цю іконку. Лише текстова альтернатива допомагає лише користувачам програм зчитування з екрана. G201 перевіряє обидва: допоміжні технології озвучують нове вікно, і є візуальний індикатор.
- Попередження стає частиною призначення посилання, тож робіть його коротким і однаковим на всьому сайті.
Клавіатура і взаємодія
| Дія | Очікуваний результат |
|---|---|
| Tab до посилання | Фокус видно; програма зчитування з екрана озвучує назву і примітку «відкриється в новій вкладці» |
| Enter | Відкривається нова вкладка; користувач знав про це заздалегідь |
| Кнопка «Назад» у новій вкладці | Недоступна: щоб повернутися, користувач закриває вкладку, і саме тому попередження важливе |
G201 стосується звичайної активації (клік, Enter). Відкриття посилання в новій вкладці через контекстне меню чи клік середньою кнопкою — власний вибір користувача, і попередження тут не потрібне.
Типові помилки в інтернет-магазинах
- Усі посилання у футері та на соцмережі відкривають нові вкладки без жодного позначення.
- Іконка зовнішнього посилання без текстової альтернативи або декоративна іконка з
alt, що каже «іконка». - Попередження лише в атрибуті
title. Браузери показують його при наведенні миші, тож користувачі клавіатури й сенсорних екранів його не бачать. - Кроки оплати чи 3-D Secure, що відкриваються в новому вікні, якого користувачі програм зчитування з екрана не помічають і думають, що оформлення замовлення зависло.
- Перемикачі мови чи країни у вигляді
select, що відкриває нове вікно при зміні, — це помилка F37 для 3.2.2. - Посилання на товари у відгуках чи статтях блогу з
target="_blank", які ламають кнопку «Назад» на мобільних.
Що знаходить автоматична перевірка, а що — ручне тестування
Наші автоматичні перевірки не позначають target="_blank", бо вимоги рівня A чи AA немає, а попередження можна написати багатьма способами. Пов'язані картки в бібліотеці правил:
| Автоматично (правило axe-core) | Що знаходить |
|---|---|
link-name |
Посилання без доступної назви, наприклад зовнішнє посилання лише з іконкою |
svg-img-alt, image-alt |
Іконки чи зображення як вміст посилання без текстової альтернативи |
identical-links-same-purpose |
Посилання з однаковою назвою, що ведуть у різні місця (порада) |
Ручне тестування: складіть список усіх посилань з target="_blank" (їх можна знайти в інструментах розробника браузера), вирішіть, яким справді потрібна нова вкладка, і перевірте з програмою зчитування з екрана, що попередження озвучується і його видно. З ручною частиною допоможуть розширення для браузера і кроки зі статті як тестувати WCAG.
Почніть із безкоштовної перевірки однієї сторінки. Це автоматична перевірка, а не повний аудит.
Часті запитання
Чи забороняє WCAG посилання, що відкриваються в новій вкладці?
Ні. Жоден критерій успіху рівня A чи AA не забороняє target="_blank". WCAG наводить попередження користувачів перед відкриттям нового вікна як рекомендовану техніку (G201), а відкриття нових вікон стосується критерію AAA 3.2.5 «Зміна на вимогу».
Чому нова вкладка може бути проблемою?
Згідно з технікою W3C G201, несподіване нове вікно може дезорієнтувати людей, які не бачать, що воно відкрилося, і деяких людей з когнітивними порушеннями. Кнопка «Назад» більше не повертає їх на сторінку, з якої вони прийшли.
Як попередити, що посилання відкривається в новій вкладці?
Додайте попередження в текст посилання, наприклад «Таблиця розмірів (відкриється в новій вкладці)», або покажіть іконку і дайте їй текстову альтернативу, яку озвучують допоміжні технології. Попередження потрібне і зрячим користувачам, і користувачам програм зчитування з екрана.
Чи мають посилання на PDF відкриватися в новій вкладці?
Не обов'язково. Зазвичай краще вказати в тексті посилання, що це PDF і який його розмір, і дати користувачу самому вирішити, як його відкрити.
Чи може автоматична перевірка знайти посилання в новій вкладці без попередження?
Наші автоматичні перевірки не позначають target="_blank". Чи є попередження і чи його озвучують, має перевірити людина.
Джерела
- W3C, Technique G201 Giving users advanced warning when opening a new window: https://www.w3.org/WAI/WCAG22/Techniques/general/G201
- W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
- W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/