WCAG 2.2

Що це таке

WCAG 2.2 (Web Content Accessibility Guidelines, версія 2.2) — це стандарт W3C, який у вигляді перевірних вимог описує, що має робити вебвміст, щоб ним могли користуватися люди з інвалідністю. Рекомендацією W3C він став у жовтні 2023 року, а чинна редакція датована 12 грудня 2024 року. Йому передували WCAG 2.0 з 2008 року та 2.1 з 2018-го, а в розмові його здебільшого називають просто WCAG. Паралельно W3C розробляє WCAG 3 як окремий багаторічний проєкт; договори й аудити сьогодні спираються саме на 2.2.

Стандарт побудовано шарами. Нагорі стоять чотири принципи: вміст має бути сприйнятним, керованим, зрозумілим і надійним. Під ними — 13 настанов, які формулюють цілі й самі не підлягають перевірці. Під кожною настановою містяться критерії успіху, і вага саме в них: кожен має номер на кшталт 1.4.3, коротку назву на кшталт Contrast (Minimum), рівень і речення, яке сторінка або виконує, або порушує. Довкола нормативного тексту W3C публікує документ Understanding для кожного критерію та бібліотеку технік і задокументованих помилок. Ці матеріали мають довідковий характер: сторінка, що виконує критерій іншим шляхом, однаково його виконує.

Рівнів три. A — мінімум, AA додає критерії, яких найчастіше вимагають від організацій, а AAA — найсуворіший. Рівень накопичувальний і виконується повністю або зовсім ні. Для AA стандарт каже це прямо: сторінка виконує всі критерії успіху рівнів A і AA або має альтернативну версію, що відповідає AA. Відповідність стосується цілих сторінок, ніколи не частини сторінки, і цілих процесів. Якщо покупка тягнеться через п’ять сторінок, усі п’ять мають відповідати рівню, щоб йому відповідала бодай одна з них.

У версії 2.2 додано дев’ять критеріїв і вилучено один. На рівнях A і AA з’явилися 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.2.6 Consistent Help, 3.3.7 Redundant Entry і 3.3.8 Accessible Authentication (Minimum). Інші три, 2.4.12, 2.4.13 і 3.3.9, належать до AAA. Критерій 4.1.1 Parsing визнано застарілим і вилучено, бо допоміжні технології вже не розбирають HTML самостійно. Решта перейшла з 2.1 практично без змін, тож сайт, який відповідає 2.2, відповідає й 2.1.

Чому це важливо

WCAG перетворює «зробіть доступно» на перелік, який можна перевірити, і стандарт сам називає, для чого існують його перевірні критерії: для проєктних специфікацій, закупівель, регулювання й договорів. Тож для замовника вирішальним стає одне речення в договорі. Про «доступність» можна сперечатися безкінечно. «WCAG 2.2 рівня AA для цих сторінок, перевірено ось так, відомі прогалини перелічено» можна перевірити, і постачальник знає, що входить у роботу, ще до того, як назвуть ціну.

Вибір рівня — справжній компроміс. Саме AA найчастіше згадують правила для державного сектору й закупівельна документація, і майже будь-який вміст здатен його досягти. З AAA інакше: сам стандарт не радить вимагати AAA як загальну політику для цілих сайтів, бо частина вмісту не може виконати всіх його критеріїв. Один приклад — переклад жестовою мовою для кожного попередньо записаного відео зі звуком (1.2.6). Інший — спрощена версія будь-якого тексту, що потребує навичок читання, вищих за рівень базової середньої освіти (3.1.5). Робочий підхід — AA всюди плюс окремі критерії AAA, доречні для продукту: контраст 7:1 для довгого тексту або виразніший індикатор фокуса в інструменті, яким керують із клавіатури.

З версією простіше. Робоча група радить брати за мету 2.2 навіть там, де зобов’язання досі називає давнішу версію, а оскільки 2.2 містить 2.1, сумісність від цього нічого не втрачає. Єдиний нюанс — 4.1.1: організації, яку внутрішня політика прив’язує до 2.0 чи 2.1, може й далі знадобитися тестувати Parsing і звітувати про нього.

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

Як це виглядає на практиці

Для цього сайту мірилом є WCAG 2.2 рівня AA, і дві його сторінки показують, як це влаштовано. Сторінка про те, як увесь сайт підтягнули до WCAG 2.2 рівня AA, окреслює мету широко: кожна сторінка, кожна з трьох мов і обидві колірні теми. Відповідність тут має триматися на перевірках, а не на рядку в документі.

Опорою слугує реєстр: для кожного критерію в ньому окремий рядок, де сказано, чим сайт його виконує і яка перевірка за цим стежить. Понад мету додано два критерії AAA — візуальне подання цілком і вигляд фокуса, — причому другий сторінка лише пропонує й не вносить до заяви. Рушій правил запускає, крім правил відповідності, ще й правила найкращих практик, тобто на тридцять правил більше, і одне з нових правил виявило порушення з першого ж запуску: на кожній внутрішній сторінці знак бренду лежав за межами всіх орієнтирів (landmarks). Інша, повільніша перевірка проходить 32 репрезентативні сторінки в обох колірних схемах і на двох ширинах. Видимість фокуса вона встановлює на рівні пікселів: натискає Tab і зіставляє знімки екрана. Крім того, вона шукає на кожній сторінці клавіатурні пастки, вмикає збільшені інтервали тексту та задає вдвічі більший кореневий розмір шрифту. Результат сторінка підбиває так: заява про відповідність на рівні AA для трьох мов і двох тем, два критерії AAA додатково й один критерій, винесений як виняток.

Сторінка «Подяки» відкрито показує цей виняток читачеві. Рівень AA там подано як такий, що його стережуть перевірки, а не просто проголошено, а винятком названо 1.4.13 Content on Hover or Focus. Коли на знак наводять вказівник або переводять на нього фокус, з’являється підпис, і прибрати його клавішею неможливо: це потребувало б скрипта, а скрипт на сайті тільки один. Там же згадано аудит axe-core: репрезентативні сторінки, де кожен шаблон у кожній мові представлено однією, звіряють із WCAG 2.2 A і AA в обох колірних схемах, і цей аудит є частиною обов’язкової перевірки якості. Машина, як зазначає сторінка, вловлює десь третину вимог WCAG, тож у реєстрі кожен критерій має власний рядок замість спільного підсумку.

Де виникають проблеми

Автоматичний аудит зелений, а користувач клавіатури застряг у виборі дати. Рушії правил читають те, що каже розмітка, тоді як значна частина WCAG — це судження про те, що сторінка робить: чи альтернативний текст передає суть, чи порядок фокуса відповідає порядку читання, чи можна вийти з віджета клавіатурою. Сприймайте рушій як нижню межу. Пройдіть кожен шаблон лише з клавіатурою, за збільшення тексту до 200% і на ширині 320 CSS-пікселів, і для кожного критерію запишіть, хто його перевірив і як.

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

Крок входу вимагає щось запам’ятати або передрукувати. 3.3.8 забороняє тест когнітивної функції, як-от запам’ятовування пароля чи розв’язування головоломки, на будь-якому кроці автентифікації, якщо немає альтернативи чи допоміжного механізму або не діє один із двох вузьких винятків. Поле пароля, що блокує вставлення, або CAPTCHA з вимогою передрукувати текст — типові місця, де це ламається. Дозвольте вставлення й менеджери паролів, запропонуйте passkey чи посилання електронною поштою, а якщо без тесту не обійтися, віддайте перевагу розпізнаванню об’єктів, а не передруковуванню.

Заява обіцяє «повну відповідність», а перший аудит знаходить помилку. Рівень виконується повністю або зовсім ні, тож один пропущений критерій AA робить хибною всю заяву. Натомість напишіть заяву, яку описує стандарт: дата, назва, версія й URI настанов, рівень, сторінки, яких вона стосується, і технології, на які вона спирається. Заявляйте лише те, що виконує кожна сторінка в межах заяви, а кожен критерій, що недотягує, називайте за номером, із причиною та планом, замість того щоб округлювати рівень угору.

Що почитати далі

• Web Content Accessibility Guidelines (WCAG) 2.2 — нормативний текст: принципи, настанови, критерії успіху та вимоги до відповідності.
• What’s New in WCAG 2.2 — дев’ять нових критеріїв по черзі, з прикладами користувачів, і причина вилучення 4.1.1 Parsing.
• How to Meet WCAG (Quick Reference) — налаштовуваний перелік усіх критеріїв із техніками й задокументованими помилками.
• Understanding Conformance — рівні, цілі сторінки, цілі процеси і що означає accessibility supported.
• WCAG 2 Overview — як пов’язані версії та які супровідні документи оточують стандарт.