Когнітивна доступність — як зробити сайт зрозумілим для всіх
Когнітивна доступність — найменш висвітлена, але найширша форма цифрової доступності. Вона стосується людей з дислексією, СДУГ (синдромом дефіциту уваги та гіперактивності), аутизмом, тривожними розладами, депресією, черепно-мозковими травмами та іншими когнітивними особливостями.
Масштаб: близько 17% населення планети має ту чи іншу форму когнітивних відмінностей. В Україні з урахуванням ветеранів з ЧМТ та ПТСР ця частка значно зросла після 2022 року.
Ключовий принцип: Когнітивна доступність покращує UX для всіх. Зрозуміліша навігація, простіший текст, менше відволікань — це кращий продукт для кожного користувача.
Хто потребує когнітивної доступності?
Постійні когнітивні особливості:
- Дислексія — труднощі з читанням і обробкою тексту (10-15% населення)
- СДУГ — труднощі з концентрацією і виконанням послідовних дій
- Аутизм — чутливість до сенсорного навантаження, переваги передбачуваності
- Інтелектуальні відмінності — різні рівні сприйняття і обробки інформації
Ситуативні когнітивні обмеження (стосуються всіх):
- Стрес і тривога (особливо актуально для України під час війни)
- Втома
- Мультизадачність
- Незнайоме середовище або мова
Набуті (особливо актуально для ветеранів):
- Черепно-мозкові травми
- ПТСР
- Когнітивні зміни після інсульту або тривалого стресу
Принципи когнітивної доступності
1. Ясна і проста мова
Правило: пишіть на рівні 6-8 класу. Це не означає "примітивно" — це означає "зрозуміло".
❌ "Здійснення процедури авторизації засобами двофакторної автентифікації
є обов'язковою умовою для отримання доступу до функціоналу особистого кабінету."
✅ "Для входу в акаунт підтвердіть особу. Ми надішлемо код на ваш телефон."
Чеклист мови:
- Активний стан замість пасивного ("Ми надішлемо" замість "Буде надіслано")
- Конкретні слова замість абстрактних ("натисніть синю кнопку" замість "виконайте відповідну дію")
- Речення до 20 слів
- Уникайте жаргону, абревіатур без розшифровки
- Пояснюйте технічні терміни
2. Передбачувана навігація
✅ Хороші практики:
- Навігація в одному місці на всіх сторінках
- Хлібні крихти (breadcrumbs) для орієнтування
- Чіткі заголовки сторінок
- Послідовна розмітка (ліво = назад, право = вперед)
❌ Погані практики:
- Навігація, що змінює порядок на різних сторінках
- Несподівані переадресації
- Автооновлення сторінки
- Зміна мови без попередження
3. Ясні підказки та інструкції
<!-- ❌ Незрозуміле поле -->
<label for="date">Дата</label>
<input type="text" id="date" />
<!-- ✅ Зрозуміле поле з форматом -->
<label for="date">
Дата народження
<span class="hint">(формат: ДД.ММ.РРРР, наприклад: 15.03.1990)</span>
</label>
<input
type="text"
id="date"
placeholder="15.03.1990"
aria-describedby="date-format"
/>
<p id="date-format" class="field-hint">Введіть дату у форматі ДД.ММ.РРРР</p>
4. Допомога при помилках
<!-- ❌ Незрозуміла помилка -->
<p class="error">Помилка в полі email</p>
<!-- ✅ Конкретна і корисна помилка -->
<p class="error" id="email-error">
<strong>Невірний формат email.</strong>
Введіть адресу у форматі [email protected]. Ви ввели: "myemail" — відсутні "@"
і ".com"
</p>
Доступність для дислексії
Дислексія — труднощі з розшифровкою тексту, правописом, читанням. Стосується ~10% населення (за деякими дослідженнями — до 15-17%).
Шрифт і текст:
/* ✅ Рекомендовані налаштування */
body {
font-family: "Arial", "Verdana", "Tahoma", sans-serif;
/* Без засічок (serif) для основного тексту */
font-size: 1rem; /* мінімум 16px */
line-height: 1.5; /* збільшений міжрядковий інтервал */
letter-spacing: 0.05em; /* незначний міжбуквений простір */
word-spacing: 0.1em;
}
/* Ширина рядка — оптимум 60-80 символів */
.content {
max-width: 70ch; /* 70 символів ширина */
}
/* Вирівнювання по лівому краю (НЕ по ширині) */
p {
text-align: left; /* не text-align: justify */
}
Чому justify (по ширині) поганий для дислексії: нерівні проміжки між словами роблять рядки "річками" білого простору, що утруднює відстеження рядка.
Кольори і фон:
/* Для людей з дислексією яскраво-білий фон може бути проблемою */
/* Кремовий або ледь сірий фон зменшує ефект "рябіння" */
body {
background-color: #fafaf8; /* замість чистого #ffffff */
color: #1a1a1a; /* не чорний #000000 */
}
Структура контенту:
✅ Правильна структура для людей з дислексією:
- Короткі абзаци (3-4 речення)
- Маркери і нумеровані списки замість довгих абзаців
- Виділення жирним для ключових фактів
- Підзаголовки кожні 200-300 слів
- Одна ідея на абзац
Доступність для СДУГ
Люди з СДУГ мають труднощі з концентрацією і схильні відволікатись на рухомі, яскраві, непередбачувані елементи.
Що допомагає:
/* Прибрати відволікаючі анімації */
@media (prefers-reduced-motion: reduce) {
* {
animation: none;
transition: none;
}
}
/* Мінімалістичний інтерфейс — не захаращуйте сторінку */
/* Достатній whitespace між секціями */
.section {
margin-bottom: 3rem;
}
UX-принципи:
- Прогрес-індикатори для довгих форм ("Крок 2 з 4")
- Автозбереження введених даних (не треба все вводити заново)
- Чіткий primary action (одна головна кнопка, а не п'ять однакових)
- Відсутність pop-up, що перекривають контент несподівано
Доступність для тривожних розладів
У контексті воєнного часу в Україні — особливо актуально.
Тригери на сайтах:
- Незрозумілі наслідки дії ("Що станеться якщо я натисну?")
- Незворотні дії без попередження
- Короткий таймаут сесії без попередження
- Надмірні повідомлення про помилки
Рекомендації:
<!-- Підтвердження незворотних дій -->
<button onclick="confirmDelete()">Видалити акаунт</button>
<!-- Діалог підтвердження -->
<dialog>
<h2>Ви впевнені?</h2>
<p>Видалення акаунту незворотне. Всі ваші дані будуть видалені.</p>
<button>Так, видалити</button>
<button autofocus>Скасувати (рекомендовано)</button>
</dialog>
Когнітивне навантаження — практична таблиця
| Проблема | Рішення |
|---|---|
| Довгі стіни тексту | Короткі абзаци, заголовки, списки |
| Складний жаргон | Прості слова, пояснення термінів |
| Незрозумілі помилки | Конкретний текст з інструкцією |
| Занадто багато вибору | Прогресивне розкриття, ієрархія |
| Несподівані зміни | Попередження, анімації за consent |
| Часовий тиск | Продовження сесії, збереження прогресу |
| Автовідтворення | Завжди з muted або без autoplay |