Ссылки, открывающиеся в новой вкладке или окне
Обновлено 14 октября 2026 г. · 5 мин чтения
Открывать ссылки в новой вкладке — привычка многих магазинов: страницы платёжных провайдеров, таблицы размеров, ссылки на соцсети, иногда каждая внешняя ссылка. WCAG этого не запрещает, но неожиданная новая вкладка — реальный барьер для некоторых людей. На этой странице объясняется, что говорит WCAG, когда новая вкладка уместна и как правильно предупредить пользователей. Она входит в серию доступных UI-паттернов.
Что говорит WCAG
Критерия успеха уровня A или AA, запрещающего target="_blank", нет. Соответствующие материалы W3C:
- Техника G201, «Предупреждение пользователей заранее при открытии нового окна». W3C перечисляет её как рекомендательную технику для 2.4.4 Назначение ссылки (в контексте), 2.4.6 Заголовки и подписи, 2.4.9 «Назначение ссылки (только ссылка)» и 3.2.5 «Изменение по запросу». Она «не обязательна» для выполнения этих критериев — это хорошая практика.
- 3.2.5 «Изменение по запросу» (уровень AAA) — критерий, по которому новые окна должны открываться, только когда пользователь об этом просит.
- 3.2.2 При вводе данных (уровень A) важен, когда новое окно открывается не по ссылке, а когда кто-то меняет переключатель, флажок или выпадающий список. Ошибка W3C F37 — «открытие нового окна без предварительного предупреждения при изменении выбора переключателя, флажка или списка».
G201 объясняет причину: неожиданные новые окна могут дезориентировать людей, которым трудно воспринимать визуальное содержимое, и некоторых людей с когнитивными нарушениями, а кнопка «Назад» не вернёт их на предыдущую страницу.
Когда новая вкладка оправдана
- Пользователь в середине задачи, и ссылка открывает справку, которая нужна ему параллельно: таблицу размеров или условия при оформлении заказа, где уход со страницы привёл бы к потере введённых данных.
- Сторонняя страница, с которой пользователь вернётся, например отслеживание посылки, если пользователь предупреждён.
Когда это обычно не помогает: обычная навигация внутри вашего магазина, значки соцсетей в подвале, статьи блога, каждая внешняя ссылка «чтобы пользователи не уходили». Пользователь, которому нужна новая вкладка, может открыть её сам; обратное невозможно.
Пример кода
<!-- Warning in the visible link text: works for everyone -->
<a href="/ru/size-guide" target="_blank">Таблица размеров (откроется в новой вкладке)</a>
<!-- Icon with a text alternative referenced by 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 file: say what it is instead of forcing a new tab -->
<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/