Чеклісти

На цій сторінці зібрані чеклісти з основними вимогами доступності для різних фахівців, які працюють над цифровими продуктами. Вони допоможуть під час розробки дизайну чи коду, а також стануть у пригоді для самоперевірки перед запуском. Водночас ці чеклісти не охоплюють усі 50 критеріїв успішності WCAG рівнів A та AA. Для більш повного занурення рекомендуємо дослідити наш повний чекліст ↗

Детальніше
П’ять елементів списку з проставленими галочками в прямокутнику, навкруги якого розташовані в колах такі іконки: силует людини з кодом, силует людини з літерами Аа, силует людини зі збільшувальним склом, силует людини з шестернею, силует людини з абстрактним символом, наконечник перової ручки.
На початок
Для дизайнерів
Контрастність, кольори
Динамічний вміст, медіафайли
Зображення, графіка
Заголовки, тексти
Фокусування, читання
Верстка, адаптивність
Поля, форми
Інше
Для розробників
Загальні налаштування, мова
Заголовки
Структура, навігація
Кнопки, посилання
Поля, форми
Керування, клавіатура, фокус
Адаптивність
Інше

Для дизайнерів

Контрастність, кольори

  • Коефіцієнт контрастності невеликих текстів не менше, ніж 4.5 : 1
  • Коефіцієнт контрастності великих текстів не менше, ніж 3 : 1
  • Коефіцієнт контрастності кнопок, меж полів форм, всіх інших інтерактивних елементів та індикаторів їхніх станів не менше, ніж 3 : 1
  • Коефіцієнт контрастності маркерів фокуса у всіх елементів, які здатні отримувати фокус клавіатури, не менше, ніж 3 : 1
  • Коефіцієнт контрастності тієї графіки, яка передає інформацію (наприклад, сектори кругових діаграм, лінії лінійних графіків) не менше, ніж 3 : 1
  • Колір не має бути єдиним засобом, щоб передати інформацію або пояснити значення елемента. Наприклад, якщо зелений означає «так», а червоний — «ні», це має бути зрозуміло не лише за кольором, а й завдяки тексту, іконці чи іншому візуальному позначенню.

Динамічний вміст, медіафайли

  • На сторінці немає елементів, які блимають або спалахують частіше ніж 3 рази на секунду.
  • Не використовуються раптові червоні спалахи або великі червоні області, що несподівано з'являються на екрані.
  • Анімацію чи відео, які запускаються автоматично та тривають понад 5 секунд, користувач повинен мати змогу зупинити або поставити на паузу. Наприклад, кнопкою відеопрогравача чи спеціальною кнопкою поряд з анімацією.
  • Якщо у відео є озвучка, то вона має супроводжуватися субтитрами.

Зображення, графіка

  • Зображення не перевантажені великою кількістю тексту. Якщо зображення містить важливу інформацію, вона має бути доступна і в текстовому вигляді. Виняток — скриншоти, фотографії вивісок, документів тощо.
  • Зображення, які виконують суто декоративну функцію, приховані від скринридерів.
  • Зображення, які передають якусь інформацію (як суттєво важливу, так і просто ілюстрації) мають альтернативний текст, який достатньо точно і якісно описує суть зображеного.
  • Зображення, які передають складну інформацію (діаграми, графіки, мапи, тощо), мають доступну текстову альтернативу (наприклад, у формі таблиці), доступ до якої можливий через розміщену поруч кнопку-розгорталку чи посилання.

Заголовки, тексти

  • Сторінка має заголовок <title>, який описує її тему або призначення.
    Заголовки побудовані за патерном «конкретне / загальне», а не навпаки:
«Новини / Міністерство» Закреслений текст«Міністерство / Новини»
  • Вміст сторінки сторінки логічно структурований за допомогою заголовків, зовнішній вигляд яких дозволяє сприймати їх саме як заголовки, вони семантично позначені відповідними тегами і не мають пропусків (наприклад, після <h1> не йде <h5>).
  • Гіперпосилання, розміщені в тексті, мають постійне підкреслення (за замовчуванням або кастомне).
  • Підкреслення в текстах не застосовується до слів, які не є гіперпосиланнями.
  • Міжрядковий інтервал є достатнім для комфортного читання текстів (рекомендоване значення — 1.5).
  • Тексти вирівнюються по лівому краю.

Фокусування, читання

  • Кожен елемент, який можна вибрати за допомогою клавіші Tab, має добре помітний маркер фокуса. Він має чітко виділятися завдяки контрастності, товщині або відступу від елемента, щоб користувач легко бачив, де саме зараз перебуває фокус. Зокрема, під час роботи зі спадними списками, меню та іншими складними елементами.
  • Під час переходу клавішею Tab фокус переміщується сторінкою в логічному порядку — від першого елемента до останнього.
  • Якщо кнопка відкриває додатковий вміст, він з'являється поруч із нею (праворуч або нижче) та є наступним у порядку читання для скринридера.
  • На сторінці є можливість швидко перейти до основного вмісту, пропустивши шапку сайту. Це посилання стає помітним, коли на нього переходять за допомогою клавіатури.

Верстка, адаптивність

  • Вміст сторінки коректно відображається (елементи перебудовуються, не зникають, не виходять за межі вікна, не налазять одне на одного тощо) у цих трьох випадках:
    • зменшення ширини вікна браузера, включно до 320 пікселів;
    • збільшення масштабу до 200% включно (вихідною шириною вікна перед початком масштабування є 1280 пікселів);
    • у вертикальній та горизонтальній орієнтаціях мобільного пристрою.
  • Розташування елементів відносно одне одного (відступи по вертикалі і по горизонталі) явно передає взаємозв’язки між ними (наприклад, текстова мітка поля розташована поряд з цим полем, а не іншим).
  • Якщо дані подані у вигляді таблиці, використовується тег <table>, а не звичайна сітка з блоків. Якщо в таблиці є головний рядок, то його комірки створені за допомогою тега <th>. Рядки чи стовпці не об’єднуються без нагальної потреби.

Поля, форми

  • Кожне поле у формі має видиму текстову мітку, видимість якої не залежить від наявності даних у полі.
  • Обов’язкові поля мають відповідну візуальну індикацію (наявність зірочки * у назві є допустимою практикою).
  • Якщо вимагається введення даних в конкретному форматі, то в полі чи поруч з ним надається чітке пояснення або приклад такого формату.
  • Якщо при спробі користувача надіслати форму виникли помилки, то суть помилок та/або поради щодо виправлення описані біля кожного відповідного поля.

Інше

  • Повідомлення про статус виконаної дії чи помилку не зникає самостійно по таймеру, а відображається доти, поки користувач його не закриє.
  • Якщо наявні підказки, які відображаються при наведенні курсора на відповідний елемент (наприклад, кружечок зі знаком питання), то появу цієї підказки можна викликати і клавіатурою.

Для розробників

Загальні налаштування, мова

  • У коді сторінки є елемент <title>, в якому описано тему чи призначення сторінки, а не загальну назву всього сайту.
  • У коді сторінки вказано правильну мову (для української це <html lang="uk">).
  • Якщо в окремому блоці написано текст іншою мовою, то ця мова вказана в атрибуті lang цього блоку.

Заголовки

  • На сторінці є один основний заголовок <h1>
  • Немає пропусків рівнів заголовків (після <h1> не йде одразу <h3> чи <h5>).
  • Теги заголовків не використовуються для кнопок, цілих абзаців, суто стилізації текстів, а лише за призначенням (описують тему чи призначення частин сторінок).
  • Якщо замість тегів заголовків використовується атрибут role="heading", то лише в поєднанні з атрибутом aria-level, в якому вказано потрібний рівень заголовка.

Структура, навігація

  • Для основних областей сторінки використовуються семантичні елементи
    (<header>, <nav>, <main>, <footer>, тощо) або їхні коректні ARIA-відповідники.
  • Є механізм швидкого переходу до основного вмісту (першого елемента області <main>), який як стає візуально видимим при отриманні фокуса клавіатури, так і є доступним для скринридерів у режимі «Browse» (приклад реалізації). Він реально переносить фокус, а не просто проскролює сторінку.
  • Якщо трапляються контейнери з великою кількістю однотипних елементів (чат, новини, фотографії), то з обох боків таких контейнерів є механізм швидкого пропуску їхнього вмісту, за логікою роботи схожий на вищеописаний механізм.
  • Таблиці реалізовані на базі тегів <table>, <tr>, <th>, <td>, а не верстки, яка нагадує таблицю лише візуально. Таблицям вказано заголовок через <caption> або атрибут aria-label.
  • Списки реалізовані не просто переносом рядків з дефісами чи іншими маркерами, а на базі тегів <ol> чи <ul>, прямими нащадками яких є <li>
  • Елементам <iframe> програмно вказано заголовок.
  • Мінімізовано застосування тега <br>, зокрема, він не використовується просто для візуального перенесення рядків абзаца чи створення розривів між абзацами.
  • Елементи, які не повинні читатися скринридером, приховані за допомогою атрибута aria-hidden="true"

Кнопки, посилання

  • Кнопки (маються на увазі НЕ клавіші клавіатури) виконують дію всередині сторінки, не пов’язану з переміщенням користувача в інше місце.
  • Всі кнопки реалізовані на базі нативного тега <button> АБО мають атрибути role="button" і tabindex="0"
  • Всі кнопки-розгорталки мають атрибут aria-expanded, значення якого змінюється між true і false залежно від стану кнопки.
  • Всі кнопки без видимого тексту (кнопки-іконки, кнопки-зображення) мають атрибут aria-label, який містить чіткий опис функції кнопки («Видалити», «Закрити», «Переглянути деталі», тощо).
  • Елемент <a> не застосовується як кнопка АБО в разі подібного застосування має атрибути role="button" і tabindex="0"
  • Посилання виконують переміщення користувача в інше місце (сайт, сторінку, секцію сторінки, документ тощо).
  • Текст посилань не має складатися зі слів на кшталт «тут» і «там», а повинен чітко описувати цільовий ресурс (назву сторінки, назву соцмережі, назву документа із зазначенням формату тощо).
  • Всі посилання без видимого тексту (посилання-іконки, посилання-зображення) мають атрибут aria-label, який містить чіткий опис цільового ресурсу.
  • Посилання, що ведуть на ту ж сторінку, на якій розміщені (поточну сторінку), мають атрибут aria-current="page"
  • Кнопки і посилання не вкладені одне в одного чи в інші інтерактивні елементи, кожен елемент є самостійним.
  • Всі вищезгадані атрибути кнопок і посилань вказані в межах їхніх власних тегів, а не в межах їхніх батьківських чи дочірніх елементів.
  • Посилання, розміщені в тексті, мають легко відрізнятися від звичайного тексту. Для цього використовується підкреслення (це найкраща практика) або інше помітне оформлення, а не лише колір.

Поля, форми

  • Всі поля (<input>, <textarea>, <select> тощо) мають як візуально видиму назву, так і програмно визначену назву (наприклад, через <label>, aria-label або aria-labelledby).
  • Обов’язкові поля програмно позначені атрибутом required
  • Деактивовані поля програмно позначені атрибутом disabled
  • Помилково заповнені поля програмно позначені атрибутом aria-invalid="true" та відповідною візуальною індикацією.
  • Повідомлення про помилки пов’язані з відповідними полями через атрибут aria-describedby
  • Поля в доречних випадках мають атрибут autocomplete (див. список коректних значень).
  • Якщо наявні інструкції чи підказки до полів, то вони доступні для скринридерів.
  • Якщо поле реалізоване не на базі нативного тега (наприклад, спадний список не на базі <select>), то воно:
    • повністю підтримує керування клавіатурою (зокрема, має атрибут tabindex="0");
    • має маркер фокуса (як загальний, так і на своїх окремих складових за потреби);
    • надає всі потрібні дані для скринридерів (озвучує не лише назву і роль, а й обране чи введене значення).
  • За потреби для забезпечення доступності ненативних полів (включаючи чекбокси, слайдери тощо) застосовано ARIA-атрибути відповідно до їхніх специфікацій.
  • Всі вищезгадані атрибути полів вказані в межах їхніх власних тегів, а не в межах їхніх батьківських чи дочірніх елементів (якщо конкретна специфікація не вимагає іншого).
  • Елементи складних форм згруповані за допомогою тега <fieldset>

Керування, клавіатура, фокус

  • Всі інтерактивні елементи доступні для клавіатури, тобто не потребують участі курсора миші (клавішами клавіатури на них можна сфокусуватися, активувати, розгорнути і згорнути тощо).
  • Маркер фокуса клавіатури у всіх фокусабельних елементів не прихований, його чітко видно.
  • Порядок руху фокуса клавіатури логічно співвідноситься з візуальним порядком розташування елементів.
  • Візуально приховані елементи не отримують фокус клавіатури (окрім механізмів швидкого переходу до основного вмісту чи пропускання блоків).
  • Деактивовані кнопки і поля не отримують фокус клавіатури.
  • Поки є відкрите модальне/діалогове вікно, рух фокуса клавіатури обмежений лише вмістом цього вікна.
  • Відсутні пастки фокуса (штучне обмеження руху фокуса у модальному/діалоговому вікні чи іншій ділянці сторінки), які не можна побороти засобами клавіатури.
  • Елементи і компоненти реагують на клавішу Esc, якщо це не суперечить конкретній задачі (спадні списки згортаються, віджети і модальні/діалогові вікна закриваються тощо).
  • Після закриття модального/діалогового вікна чи компонента фокус стає на той елемент, який попередньо викликав появу такого вікна чи компонента.
  • Сам факт фокусування на жодному елементі не викликає надмірних змін контексту (таких як автоматичне переміщення фокуса на інший елемент).
  • Сам факт введення даних у поля, перемикання прапорців тощо не викликає надмірних змін контексту (таких як перезавантаження сторінки, автоматичне переміщення фокуса на інший елемент), якщо користувач про це не був попереджений.
  • Виконуються описані в пункті 2.5.2 WCAG вимоги щодо скасування дій курсором.

Адаптивність

  • У коді сторінки відсутні метатеги, які забороняють масштабування вмісту користувачем.
  • Якщо встановити сторінці ширину 1280 пікселів і масштаб 100%, а після цього почати збільшувати масштаб до 200% включно, то не відбувається безслідне зникнення вмісту або його спотворення так, що ускладнює чи унеможливлює роботу з ним.
  • Якщо встановити сторінці ширину 320 пікселів, то не виникають вищезгадані проблеми, а також поява горизонтальної прокрутки, за винятком випадків, описаних у WCAG.
  • На мобільному пристрої як у вертикальній, так і в горизонтальній орієнтації весь вміст залишається доступним (не виникають вищезгадані проблеми), за винятком випадків, коли конкретна орієнтація дисплея є важливою.
  • Текст не обрізається при збільшенні міжрядкового інтервалу, відступів між літерами, словами й абзацами (букмарклет, який застосовується для цієї перевірки).

Інше

  • На сторінці відсутні випадки, коли кілька елементів мають однаковий id
  • Повідомлення про статус виконання дій, виникнення помилок та інші важливі повідомлення автоматично озвучуються скринридерами.
  • Для функціоналу drag-and-drop є доступна альтернатива для користувачів, які не використовують курсор.
  • Якщо спливна підказка реалізована не через атрибут title, вона має відповідати вимогам пункту 1.4.13 WCAG (простими словами, бути доступною для взаємодії, не зникати несподівано та легко закриватися).
  • На сторінці немає нічого, що блимає чи спалахує більше ніж 3 рази протягом секунди.
  • Якщо разом з відео були надані файли з субтитрами, то вони коректно підключені в коді і доступні для вмикання за допомогою відповідної кнопки у відеоконтейнері.
  • Сторінку на сайті можна знайти більш як одним способом, крім випадків, коли сторінка є результатом процесу або його кроком.