Видимі індикатори фокуса: що вимагають AODA Онтаріо і WCAG, і один рядок CSS, який їх ламає (2026)

Більшість бар'єрів доступності будують випадково. Цей зазвичай будують навмисно. Розробник дивиться на світний контур, який браузер малює довкола кнопки під час переходу на неї клавішею Tab, вирішує, що він не вписується в дизайн, пише один рядок CSS, outline: none, і йде далі, нічого не повернувши натомість. Авторові сторінка здається чистішою, бо він користується мишею й контуру однаково ніколи не бачить. Але для клієнта, який пересувається з клавіатури, для користувача екранної лупи, для людини з тремором, яка не може користуватися тачпадом, цей контур був єдиним на екрані, що казало, де вона. Видаліть його, і вони рухаються наосліп, натискаючи Enter і сподіваючись. Бар'єр невидимий саме тій людині, яка найімовірніше могла б його помітити, і це одне з найчастіших порушень, які ми знаходимо на сайтах Онтаріо.

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

• Критерій успіху WCAG (Web Content Accessibility Guidelines) 2.4.7 Видимий фокус - рівень AA, входить до стандарту з WCAG 2.0. Для Онтаріо це важливо: він перебуває всередині обов'язкового юридичного мінімуму, а не вище за нього (W3C).
• WCAG 2.2 додала ще два правила про фокус: 2.4.11 Фокус не закритий (мінімум) рівня AA (нове у 2.2) і 2.4.13 Помітність фокуса рівня AAA (нове у 2.2), яке задає мінімальний розмір і контраст самого індикатора (W3C).
• WCAG 2.2 запровадила 9 нових критеріїв успіху порівняно з WCAG 2.1, і 6 із 9 - рівнів A чи AA (W3C).
• Розділ 14 IASR Онтаріо (Регламент про інтегровані стандарти доступності, O. Reg. 191/11) вимагає від організацій із 50 і більше працівниками відповідності WCAG 2.0 рівня AA на публічних сайтах (ontario.ca).
• Наступний ACR (звіт про відповідність вимогам доступності) для організацій із 20 і більше працівниками треба подати до 31 грудня 2026 року (ontario.ca).

Що WCAG насправді вимагає для фокуса клавіатури?

Простими словами 2.4.7 Видимий фокус звучить так: коли клієнт пересувається сторінкою з клавіатури, елемент, на якому він опинився, має показувати видиму позначку фокуса. Кнопка, посилання, поле форми, пункт меню, коли вони активні, мають помітно відрізнятися від сусідніх. WCAG 2.0 не диктує точного стилю, лише те, що фокус видно. Це близнюк проходу з клавіатури: керованість із клавіатури доводить вас до кожного елемента, а видимий індикатор фокуса каже, на якому ви опинилися. Одне без іншого - половина дверей.

WCAG 2.2 посилила довколишні правила. 2.4.11 Фокус не закритий (мінімум) (рівень AA) каже, що коли елемент отримує фокус, бодай частина його має лишатися видимою й не бути повністю схованою за липкою шапкою, банером cookie чи плаваючою бульбашкою чату, - реальна проблема сучасних сайтів, де закріплена панель може лежати просто поверх поля, на яке ви щойно перейшли. 2.4.13 Помітність фокуса (рівень AAA) іде далі й визначає, наскільки великим і контрастним має бути індикатор, тож кільце фокуса, яке формально є, але має вигляд блідої сірої лінії в один піксель, однаково порушує дух правила.

Чому один рядок CSS це ламає і чи поширюється на це AODA?

Ось чесна юридична картина, і вона суворіша, ніж для деяких нових критеріїв. AODA (Accessibility for Ontarians with Disabilities Act) Онтаріо називає обов'язковим стандартом WCAG 2.0 рівня AA. Видимий фокус - критерій WCAG 2.0 рівня AA. Тож, на відміну від доступної автентифікації, яка з'явилася у WCAG 2.2 і перебуває вище юридичного мінімуму, відсутній індикатор фокуса - порушення саме тієї версії WCAG, на яку вказує IASR Онтаріо. Це не прогалина найкращої практики, до якої варто прагнути; це всередині межі - та сама різниця, що проведена в статті WCAG 2.0 чи 2.2 в Онтаріо.

Де це ламається? Майже завжди в одному з цих місць:

• Глобальна таблиця стилів з outline: none чи outline: 0 для посилань, кнопок чи полів без поверненого стилю :focus чи :focus-visible натомість.
• Нестандартний компонент (випадний список, модальне вікно, повзунок), зібраний на JavaScript, який узагалі не дає своїм інтерактивним частинам стилю фокуса.
• Скидання стилів у дизайн-системі, яке прибирає стандарт браузера по всьому сайту, тож кільце зникає одразу на всіх сторінках.
• Кільце фокуса, яке є, але сховане за липкою шапкою чи оверлеєм, - саме той випадок, для якого написано 2.4.11.

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

Як перевірити індикатори фокуса і чим ризикуєте, якщо їх немає?

Суть можна перевірити приблизно за хвилину, без інструментів:

1. Один раз натисніть в адресний рядок, потім багато разів натискайте Tab, щоб пройти сторінку самою клавіатурою.
2. На кожній зупинці поставте одне питання: чи бачу я, де перебуваю? Чітке кільце, рамка чи підсвічування мають рухатися разом із вами від елемента до елемента.
3. Стежте, чи не зникає позначка в нестандартних меню, модальних вікнах чи після відкриття спливного вікна і чи не закриває її липка шапка вгорі екрана.
4. Перевірте, що індикатор досить помітний, а не бліда волосяна лінія, яку клієнт зі слабким зором пропустить.

Ставки ті самі, що за будь-якого бар'єра доступу. В Онтаріо в AODA немає права приватного позову, тож напряму за ним ніхто не судиться; чинний шлях для приватної особи - HRTO (Трибунал із прав людини Онтаріо), який розглядає скарги за Кодексом прав людини Онтаріо, і клієнтові, який не може зрозуміти, яку кнопку зараз натисне, відмовляють у тому рівному доступі, про який кажуть такі скарги. Якщо ви продаєте в США, невидимий фокус - звичайне звинувачення в позовах за ADA (Americans with Disabilities Act) щодо сайтів. Довговічна відповідь та сама, що потрібна будь-якій прогалині: задокументоване виправлення, датований запис того, що ви знайшли й виправили, - і це має відображати чесний ACR до 31 грудня 2026 року. А оскільки машина може підтвердити, що outline: none існує, але не може оцінити, чи може реальний користувач клавіатури стежити за фокусом у ваших нестандартних компонентах, це ще одна причина, чому сканування - не аудит.

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

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