WCAG 2.4.1 Пропуск блоков

Критерий успеха 2.4.1 избавляет пользователей клавиатуры и программ экранного доступа (скринридеров) от необходимости на каждой странице проходить одну и ту же шапку, меню и рекламную полосу, прежде чем добраться до контента. В магазине с большим мегаменю это может означать десятки нажатий Tab на каждой странице. Это уровень A, он входит в EN 301 549 (пункт 9.2.4.1). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Доступен механизм для пропуска блоков контента, которые повторяются на нескольких веб-страницах.

WCAG не предписывает одну конкретную технику. Среди достаточных техник, которые перечисляет W3C:

• ссылка в начале страницы, ведущая к основному контенту («Перейти к основному содержимому»);
• ссылка в начале повторяющегося блока, ведущая к его концу;
• ARIA-ориентиры (<header>, <nav>, <main>, <footer> или соответствующие роли) для обозначения областей страницы;
• заголовки в начале каждого раздела контента;
• раскрывающиеся и сворачиваемые меню.

На практике skip-ссылка вместе с правильным ориентиром <main> покрывает и тех, кто пользуется только клавиатурой (без дополнительных инструментов они не могут переходить по ориентирам), и пользователей программ экранного доступа.

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

• нет skip-ссылки, а перед контентом стоит шапка с поиском, кабинетом, избранным, корзиной, переключателем валюты и мегаменю на 40 ссылок;
• skip-ссылка ведёт на несуществующий якорь или на элемент, который не может получить фокус;
• skip-ссылка остаётся невидимой, когда получает фокус;
• нет ориентира <main>, или вся страница собрана из элементов <div>;
• длинная боковая панель фильтров на страницах категорий без возможности перейти сразу к товарам.

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

Автоматически: наша проверка определяет, есть ли на странице хотя бы один механизм пропуска — skip-ссылка, ориентир или заголовок (правило bypass). Она не может оценить, видна ли ссылка в фокусе и ведёт ли она в нужное место.

Вручную: откройте страницу и нажмите Tab один раз. Должна появиться ссылка «Перейти к содержимому». Нажмите Enter, затем снова Tab: фокус должен оказаться в начале основного контента, а не снова в меню. С программой экранного доступа выведите список ориентиров и убедитесь, что область main ровно одна.

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

• Добавьте skip-ссылку первым фокусируемым элементом в шаблон темы, ведущую на <main id="main-content">.
• Убедитесь, что цель может получить фокус (при необходимости добавьте tabindex="-1"), чтобы фокус действительно переместился.
• Показывайте skip-ссылку в фокусе, с хорошим контрастом.
• Используйте семантические ориентиры: <header>, <nav>, <main>, <footer>.
• Начинайте каждый раздел контента с настоящего заголовка.

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

• 2.4.3 Порядок фокуса — skip-ссылка должна быть первой в порядке фокуса.
• 2.4.6 Заголовки и подписи — заголовки должны описывать раздел.
• 2.4.7 Видимый фокус — skip-ссылка должна быть видна в фокусе.

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

Обязательна ли skip-ссылка по WCAG 2.4.1?

Не строго. WCAG требует механизм для пропуска повторяющихся блоков. Ссылка «Перейти к основному содержимому» — самый распространённый вариант; ARIA-ориентиры, такие как main и nav, и заголовки в начале разделов тоже являются достаточными техниками.

Можно ли скрыть skip-ссылку?

Её можно визуально скрыть до тех пор, пока она не получит фокус клавиатуры, но затем она должна стать видимой. Ссылка, которая остаётся невидимой в фокусе, сбивает с толку зрячих пользователей клавиатуры.

Какие блоки нужно пропускать в магазине?

Контент, который повторяется на многих страницах: шапку, полосу объявлений, главную навигацию и мегаменю, а иногда и длинные боковые панели фильтров перед списком товаров.