# 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](/uk/portfolio/took-wcag-2-2-level-aa-across-the-whole-site-130/), окреслює мету широко: кожна сторінка, кожна з трьох мов і обидві колірні теми. Відповідність тут має триматися на перевірках, а не на рядку в документі. Опорою слугує реєстр: для кожного критерію в ньому окремий рядок, де сказано, чим сайт його виконує і яка перевірка за цим стежить. Понад мету додано два критерії AAA — візуальне подання цілком і вигляд фокуса, — причому другий сторінка лише пропонує й не вносить до заяви. Рушій правил запускає, крім правил відповідності, ще й правила найкращих практик, тобто на тридцять правил більше, і одне з нових правил виявило порушення з першого ж запуску: на кожній внутрішній сторінці знак бренду лежав за межами всіх орієнтирів (landmarks). Інша, повільніша перевірка проходить 32 репрезентативні сторінки в обох колірних схемах і на двох ширинах. Видимість фокуса вона встановлює на рівні пікселів: натискає Tab і зіставляє знімки екрана. Крім того, вона шукає на кожній сторінці клавіатурні пастки, вмикає збільшені інтервали тексту та задає вдвічі більший кореневий розмір шрифту. Результат сторінка підбиває так: заява про відповідність на рівні AA для трьох мов і двох тем, два критерії AAA додатково й один критерій, винесений як виняток. Сторінка [«Подяки»](/uk/credits/) відкрито показує цей виняток читачеві. Рівень 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](https://www.w3.org/TR/WCAG22/) — нормативний текст: принципи, настанови, критерії успіху та вимоги до відповідності. - [What's New in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/) — дев'ять нових критеріїв по черзі, з прикладами користувачів, і причина вилучення 4.1.1 Parsing. - [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG22/quickref/) — налаштовуваний перелік усіх критеріїв із техніками й задокументованими помилками. - [Understanding Conformance](https://www.w3.org/WAI/WCAG22/Understanding/conformance.html) — рівні, цілі сторінки, цілі процеси і що означає accessibility supported. - [WCAG 2 Overview](https://www.w3.org/WAI/standards-guidelines/wcag/) — як пов'язані версії та які супровідні документи оточують стандарт.