EN UA

Чекліст вебдоступності для сайтів

Інтерфейс аналітичної панелі для перевірки доступності вебсайту, що містить абстрактні графіки, індикатори прогресу, списки завдань у вигляді геометричних фігур та ліній.

Більшість сайтів мають проблеми з вебдоступністю. Навіть на ресурсах з високим рівнем доступності зазвичай можна виявити зони для покращення.

Водночас не всі компанії готові замовляти комплексний аудит вебдоступності сайтів.

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

Чекліст вебдоступності сайту буде корисним:

  • Власникам сайтів
  • CEO, CTO, менеджерам
  • Продуктовим командам
  • Розробникам
  • Тестувальникам (QA-інженерам)
  • Дизайнерам
  • Всім, хто цікавиться вебдоступністю або хоче базово оцінити рівень доступності сайту

Детальніше про те, Кому потрібен аудит вебдоступності читайте у статті нашого блогу.

Чекліст вебдоступності включає перевірку:

  • HTML-структури сторінок
  • Клавіатурної доступності
  • Форм, інструкцій, повідомлень про помилки
  • Контрасту кольорів і читабельності текстів
  • Зображень та інших медіа-елементів
  • Інтерактивних елементів

Далі розглянемо кожен з цих пунктів детальніше.

Цей чекліст не є заміною повного аудиту. Він допоможе зрозуміти, на що слід звертати увагу, коли ви не знаєте, з чого почати.

Ми з радістю проведемо повноцінний аудит вебдоступності вашого сайту.

Для цього залишайте заявку через форму.

Перейдемо до детального опису кожного з етапів базової оцінки доступності вебсайту.

Структура сторінки (HTML і семантика)

Коректна структура HTML-документа є вкрай важливою для забезпечення вебдоступності. Саме завдяки їй користувачі скринрідера зможуть швидко орієнтуватися на сторінці та знаходити потрібну інформацію.

Що варто перевірити:

  • Атрибут lang в тегу <html> та його значення
  • Наявність коректного і унікального для сторінки <title>
  • Наявність зрозумілого заголовка першого рівня (<h1>), який описує сторінку
  • Чи збережено логіку в структурі заголовків наступних рівнів (<h2>-<h6>)
  • Семантичні теги. Як структурні (<header>, <nav>, <main>, <footer>), так і теги інтерактивних елементів (<button>, <a>)

Наприклад, якщо відсутній атрибут мови, можуть виникнути проблеми з розумінням контенту в користувачів скринрідера. Якщо немає title чи h1 або ж вони не є унікальними для сторінки, то буде важко зрозуміти, яка це сторінка серед інших сторінок сайту. Відсутність або неправильне використання семантичних тегів значно ускладнює навігацію, а також може впливати на SEO та розуміння сторінки пошуковими системами.

Тому коректна структура сторінки є одним із стовпів вебдоступності.

Клавіатурна доступність

Під час тестування вебдоступності перевірка користування сайтом лише за допомогою клавіатури є обов’язковою. Серед вимог WCAG є критерій 2.1.1, який говорить про те, що сайт має бути доступний для користування з клавіатури, тобто без використання мишки. Водночас миша, тачпад та інші засоби введення інформації не забороняються.

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

Що варто перевірити:

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

Комбінації клавіш, які будуть корисними при тестуванні сайту клавіатурою:

  • Tab — перехід до наступного елемента (посилання, кнопки, поля)
  • Shift + Tab — повернення до попереднього інтерактивного елемента
  • Enter — перейти за посиланням або натиснути кнопку
  • Space (пробіл) — активувати чекбокс, радіокнопку

Форми та повідомлення

Як правило, форми на сайті є ключовими елементами в user flow. Доступність форм важлива для бізнесу, адже саме через форми користувачі часто взаємодіють із продуктом: реєструються, залишають контактні дані, оформлюють замовлення або надсилають запити. Тому перевірка доступності форм є обов’язковою під час аудиту вебдоступності.

Що варто перевірити:

  • Наявність видимих підписів полів (<label>), а не лише плейсхолдерів
  • Зрозумілість і правильність підписів до полів
  • Наявність видимого фокусу в активному полі
  • Наявність повідомлень про помилки у формах
  • Повноту опису та зрозумілість помилки у повідомленні
  • Чіткість інструкцій для виправлення помилок
  • Назви кнопок та те, як їх озвучує скринрідер

Враховуючи важливість форм для бізнес-цілей продукту, перевірці їх доступності варто приділяти особливу увагу.

Контраст і читабельність

Одним із етапів аудиту вебдоступності є перевірка візуальної доступності. Доволі поширеною проблемою є порушення вимог контрастності кольорів фону і тексту. Наприклад, часто можна зустріти світло-сірий текст на білому фоні. Або темний текст на темному фоні.

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

Що варто перевірити:

  • Чи достатній контраст кольорів тексту та фону (мінімум 4,5:1 для звичайного тексту)
  • Чи достатній розмір тексту і чи читабельний шрифт
  • Видимість і контрастність рамки фокусу на сфокусованих елементах
  • Чи для передачі інформації не використовується тільки колір
  • Чи можна збільшити масштаб сторінки або тексту без втрати інформації та функціональності

Зображення та медіа

Одне з найвідоміших правил вебдоступності говорить про те, що зображення повинні мати атрибут alt в тегу <img>. Крім того, цей альтернативний текст повинен містити доречний опис у конкретному контексті. Декоративні елементи повинні мати порожній alt. Що стосується інших медіа-елементів, то відеоконтент зі звуковою доріжкою повинен мати субтитри, а аудіоконтент — текстову транскрипцію.

Що варто перевірити:

  • Наявність альтернативних описів для важливих зображень
  • Коректність значень alt у <img>
  • Наявність порожніх alt="" у декоративних елементів
  • Субтитри для відео зі звуком
  • Текстову транскрипцію для аудіо

Інтерактивні елементи

Елементи, з якими взаємодіє користувач, повинні бути доступними для всіх відвідувачів сайту. До таких елементів можна віднести кнопки, посилання, поля форм, випадні списки, меню тощо.

Що варто перевірити:

  • Чи кнопки реалізовані за допомогою семантичних тегів (наприклад, <button>, а не <div>)
  • Чи посилання використовують тег <a> і містять атрибут href
  • Чи працюють меню, випадні списки, модальні вікна з клавіатури
  • Чи кнопки мають зрозумілий текст і коректно озвучуються скринрідером
  • Чи мають кнопки-іконки та інші елементи без видимого тексту доступні назви (наприклад, aria-label)

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

Для більш глибокої оцінки варто провести комплексний аудит вебдоступності. Звертайтеся — ми допоможемо із повною перевіркою доступності сайту.

Також вам може бути корисним матеріал з нашого блогу Як підготувати сайт до аудиту вебдоступності.

Хочете покращити доступність вашого сайту?

Залиште запит із коротким описом вашого проєкту та цілей, і ми зв’яжемося з вами.

Залишити запит

Наші сервіси

Доступні UI-компоненти

Доступні UI-компоненти з семантичним HTML, з підтримкою навігації з допомогою клавіатури та скринрідерів.

Переглянути компоненти

Послуги з вебдоступності

Практичні аудити доступності, консультації та супровід для продуктових команд, дизайнерів і розробників

Дізнатися про послуги