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> або відповідні ролі), що позначають області сторінки;
• заголовки на початку кожного розділу вмісту;
• меню, що розгортаються й згортаються.

На практиці посилання для пропуску разом із правильним орієнтиром <main> охоплює і тих, хто користується лише клавіатурою (вони не можуть переходити за орієнтирами без додаткових інструментів), і користувачів програм зчитування з екрана.

Типові помилки в інтернет-магазині

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

Як перевірити

Автоматично: наш сканер перевіряє, чи пропонує сторінка щонайменше один механізм пропуску — посилання для пропуску, орієнтир чи заголовок (правило bypass). Він не може оцінити, чи посилання стає видимим у фокусі і чи переносить у правильне місце.

Вручну: завантажте сторінку й натисніть Tab один раз. Має з'явитися посилання «Перейти до вмісту». Натисніть Enter, потім знову Tab: фокус має опинитися на початку основного вмісту, а не знову в меню. За допомогою програми зчитування з екрана перегляньте список орієнтирів і перевірте, що область main рівно одна.

Як виправити

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

Пов'язані критерії

• 2.4.3 Порядок переміщення фокуса — посилання для пропуску має бути першим у порядку фокуса.
• 2.4.6 Заголовки та маркування — заголовки мають описувати розділ.
• 2.4.7 Видимий фокус — посилання для пропуску має бути видимим у фокусі.

Часті запитання

Чи вимагає WCAG 2.4.1 посилання для пропуску (skip link)?

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

Чи можна приховати посилання для пропуску?

Його можна візуально приховати, доки воно не отримає фокус клавіатури, а тоді воно має ставати видимим. Посилання, що залишається невидимим у фокусі, плутає зрячих користувачів клавіатури.

Які блоки треба пропускати в магазині?

Вміст, що повторюється на багатьох сторінках: шапку, рядок оголошень, головну навігацію і мегаменю, а інколи й довгі бічні панелі фільтрів перед списком товарів.