Vayle
← Статті

Коли липка шапка ховає від вас користувачів клавіатури: «Фокус не закрито» й AODA Онтаріо (2026)

У WCAG 2.2 з'явилося правило для проблеми, яку ви, найпевніше, створили, не помітивши: липка шапка чи банер cookie закриває елемент, на який щойно перейшов користувач клавіатури. Що означає 2.4.11 «Фокус не закрито», чи вимагає його вже Онтаріо і як знайти й виправити це в коді.

Ілюстрація: липка шапка сайту наїжджає на посилання з фокусом клавіатури, поруч названо критерій WCAG 2.2 2.4.11 «Фокус не закрито» (текст на зображенні англійською)

Спробуйте на своєму сайті: приберіть мишу й пересувайтеся сторінкою самою клавішею Tab. Фокус стрибає від одного посилання чи кнопки до наступного, і сторінка прокручується слідом. А потім на багатьох сайтах Онтаріо щось тихо ламається. Липка шапка з'їжджає поверх верхньої частини сторінки, або банер cookie висить, прикріплений до низу, або бульбашка живого чату плаває в куті, і вона закриває саме той елемент, на який ви щойно потрапили. Ви більше не бачите, де перебуваєте. Для того, хто пересувається без миші, це момент, коли сайт перестає бути придатним. WCAG 2.2 дав цьому збою ім'я, і його варто зрозуміти до дати звітності Онтаріо в грудні 2026 року.

Ключові факти

  • 2.4.11 «Фокус не закрито (мінімум)» - критерій успіху рівня AA, новий у WCAG 2.2 (Web Content Accessibility Guidelines), яку W3C опублікував у жовтні 2023 року (W3C).
  • Критерій вимагає, щоб елемент, який отримав фокус клавіатури, не був повністю прихований контентом, який додав автор сайту, наприклад липкою шапкою, липким підвалом чи банером cookie (W3C).
  • Розділ 14 IASR Онтаріо (Регламент про інтегровані стандарти доступності, O. Reg. 191/11) нині вимагає WCAG 2.0 рівня AA, а не 2.2, від організацій із 50 і більше працівниками (ontario.ca).
  • Наступний ACR (звіт про відповідність вимогам доступності) треба подати до 31 грудня 2026 року організаціям із 20 і більше працівниками (ontario.ca).
  • В AODA (Accessibility for Ontarians with Disabilities Act) немає права приватного позову; шлях для приватної особи - скарга до HRTO (Трибунал із прав людини Онтаріо) за Кодексом прав людини Онтаріо (ontario.ca).

Що насправді означає «фокус не закрито»?

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

Слово «мінімум» важливе. Це правило вимагає лише, щоб бодай частина елемента з фокусом лишалася видимою. Суворіший родич, 2.4.12 «Фокус не закрито (розширений)», належить до рівня AAA й вимагає, щоб його не закривало взагалі ніщо. Для більшості бізнесів Онтаріо практична ціль - версія рівня AA: ніщо з того, що ви побудували, не має ковтати елемент із фокусом цілком.

Де це ламається в реальному житті? Майже завжди на контенті, який лишається на місці, поки сторінка прокручується:

  • Липка шапка навігації, яка під час прокручування наїжджає на посилання з фокусом і ховає його.
  • Смуга cookie чи згоди, прикріплена до низу вікна й покладена поверх останнього елемента керування на сторінці.
  • Віджет живого чату чи плавуча кнопка «угору», припаркована в куті.

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

Чи вимагає цього Онтаріо вже зараз?

Ось чесна відповідь, бо тут легко перебільшити. Вимога IASR до сайтів вказує на WCAG 2.0 рівня AA. Критерій 2.4.11 - доповнення WCAG 2.2, тож сам по собі провал за 2.4.11 не порушує нинішнього формулювання IASR. Той, хто каже вам, що саме цей номер сьогодні «закон» в Онтаріо, забігає наперед регламенту.

Але дві речі не дають цьому лишитися теорією.

По-перше, мета 2.4.11 уже обов'язкова. WCAG 2.0 рівня AA - та версія, якої Онтаріо вимагає, - містить керування з клавіатури (2.1.1) і видимий індикатор фокуса (2.4.7). Фокус, якого ви буквально не бачите, бо поверх нього банер, підриває обидві вимоги. Новий критерій не вигадав обов'язку давати користувачам клавіатури працювати; він точніше описав один поширений спосіб, яким сайти його порушують. Якщо ви вже виконуєте вимоги до роботи з клавіатури, закритий фокус - прогалина в тому самому охопленні.

По-друге, стандарт рухається. Онтаріо сьогодні посилається на WCAG 2.0, але 2.2 - поточна планка найкращої практики, і якщо будувати за нею зараз, не доведеться переробляти роботу потім. Ми окремо розбираємо, що змінилося між 2.0 і 2.2 і чому провінція рухається до 2.2. Спільна думка: той, хто подає скаргу до HRTO, - реальний клієнт, який не зміг зробити того, по що прийшов, а не регулятор, що перевіряє номер версії.

Як це знайти й виправити?

Знайти безкоштовно, і це займає кілька хвилин. Вимкніть мишу. Пройдіть клавішею Tab від верху сторінки до низу й дивіться, чи не зникає фокус за закріпленим елементом. Зробіть це з відкритим банером cookie, із завантаженим віджетом чату й на екрані завширшки з телефон, бо там липкі смуги найагресивніші.

Виправленню місце у вашому вихідному коді, а не у віджеті. Звичайне лагодження - CSS: задайте контейнеру, що прокручується, scroll-padding-top, рівний висоті липкої шапки, і додайте scroll-margin елементам, що отримують фокус, щоб браузер прокручував кожен елемент із фокусом на вільне місце, а не під шапку. Оверлей доступності не може надійно переставити ваших власних липких елементів, бо не знає їхньої висоти й вашої верстки. Це виправлення верстки, а виправлення верстки живуть у таблиці стилів.

Коли закінчите, збережіть датовану нотатку про те, що ви перевірили й змінили. Якщо скарга колись прийде, цей запис вартий набагато більше, ніж значок.

Хочете дізнатися, на що користувач клавіатури натрапляє на вашому сайті, раніше за клієнта? Безкоштовний звіт Vayle, приблизно 30 секунд: vayle.art. Він виявляє віджети-оверлеї, показує реальні порушення WCAG і точно каже, що юридично стосується вашої організації в Онтаріо. Без зобов'язань.

Vayle працює віддалено й займається інженерною доступністю сайтів для бізнесу Онтаріо. Загальна інформація, а не юридична консультація.

Дізнайтеся, що тихо забирає у вас продажі

Надішліть нам свій сайт, і ми повернемо 3-5 виправлень за пріоритетом щодо дизайну, швидкості, конверсії й доступності. Безкоштовно, протягом 2 робочих днів.