Модуль 30

Accessibility (a11y) та контрастність

Ось урок, створений за твоїм майстер-промптом. Це CS50-style занурення в тему доступності. 🚀

🎓 УРОК: Accessibility (a11y) та Контрастність

(CS50 Style Edition)

1. 🔥 Вступ: Коли світ стає невидимим

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

Знайомо, правда?

А тепер уявіть, що ви відчуваєте це не тільки на сонці, а щоразу, коли відкриваєте вебсайт. Для мільйонів людей з порушеннями зору це — щоденна реальність.

Але доступність (Accessibility) — це не лише про людей з інвалідністю. * 📦 Це як пандус біля входу в під'їзд. Він створений для візків, так? Але ним користуються кур'єри з вантажем, батьки з дитячими колясками та велосипедисти. * 🌓 Це як субтитри в серіалі. Вони для тих, хто не чує? Так. Але вони також для вас, коли ви їсте чипси і не хочете пропустити діалог, або коли дивитесь відео в метро без навушників.

Питання до вас: Як ви думаєте, якщо ваш код ідеально працює, але користувач фізично не може прочитати текст на кнопці "Купити" — чи вважається ваша робота виконаною?

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

2. 🧠 Теоретична база: Що "під капотом"?

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

1. Що таке a11y?

Ви побачите це скорочення скрізь. a11y. Це просто слово Accessibility. Між першою літерою "a" і останньою "y" — рівно 11 літер. Програмісти — ледачі люди, ми не любимо писати довгі слова.

2. Контрастність (Contrast Ratio)

Тут починається магія (і трохи математики, про яку не треба хвилюватись).

Комп'ютер бачить кольори як цифри (RGB). Але людське око сприймає світимість (luminance). Зелений для нас яскравіший за синій, навіть якщо цифрові значення схожі.

Коефіцієнт контрастності — це різниця яскравості між найсвітлішим кольором (фоном) і найтемнішим (текстом), або навпаки.

  • 1:1 — Це білий текст на білому фоні. Невидимість. 👻
  • 21:1 — Це чорний текст на білому фоні. Максимальний контраст. ⚫️⚪️

📐 Золотий стандарт (WCAG)

Існує "біблія" доступності — WCAG (Web Content Accessibility Guidelines). Запам'ятайте ці цифри, вони стануть вашими найкращими друзями:

  1. AA (Мінімальний рівень): Коефіцієнт 4.5:1 для звичайного тексту.
  2. AAA (Ідеальний рівень): Коефіцієнт 7:1.
  3. Великий текст (18pt+): Можна 3:1 (бо великі букви легше читати).

Інтуїтивно: Якщо ви мружитеся, щоб прочитати текст — контрастність погана. Якщо текст "ріже око" — можливо, занадто висока, але це рідко проблема. Мета — комфортне читання без напруги.

3. 🧪 Приклади: Від жаху до ідеалу

Приклад 1: "Дизайнерський" сірий

Уявіть, що ви зайшли на сайт модного бренду.

/* ❌ ПОГАНО */
background-color: #FFFFFF; /* Білий */
color: #D1D1D1;            /* Світло-сірий */

Питання до вас: Ви зможете прочитати цей текст на дешевому моніторі або екрані телефону з низькою яскравістю? Відповідь: Ні. Коефіцієнт тут десь 1.5:1. Це провал. Текст зіллється з фоном.

Приклад 2: Класична кнопка

Типова кнопка "Скасувати".

/* ⚠️ СУМНІВНО */
background-color: #E0E0E0; /* Світло-сірий фон */
color: #999999;            /* Темніший сірий текст */

Аналіз: Контраст тут близько 2.5:1. Це все ще менше за заповітні 4.5:1. Користувач може подумати, що кнопка неактивна (disabled), хоча вона робоча.

Приклад 3: Правильний підхід (WCAG AA)

/* ✅ ДОБРЕ */
background-color: #FFFFFF; /* Білий */
color: #595959;            /* Темно-сірий */

Результат: Коефіцієнт 4.6:1. Ми пройшли поріг! Текст виглядає м'яким, стильним, але він читабельний.

Приклад 4: Складний випадок (Текст на фото)

Ви хочете написати білий заголовок поверх фотографії.

Проблема: Фотографія строката. Десь вона темна, десь світла. Якщо текст потрапить на світлу хмаринку — він зникне. Рішення: Досвідчений розробник додає напівпрозору підкладку (overlay) або тінь тексту.

.hero-text {
  color: #FFFFFF;
  text-shadow: 0px 0px 5px rgba(0,0,0, 0.8); /* Тінь рятує ситуацію */
}

4. 🛠 Практична частина

Час забруднити руки кодом! Відкрийте свій улюблений редактор або просто уявіть рішення.

Завдання 1: Детектив контрасту Зайдіть на WebAIM Contrast Checker (або схожий інструмент). Перевірте пару: Фон #3498db (блакитний) і текст #ffffff (білий). * Який коефіцієнт? * Чи проходить він тест для дрібного тексту?

Завдання 2: "Полагодити" бренд Дизайнер надіслав вам макет, де жовтий текст #FFFF00 лежить на білому фоні #FFFFFF. * Чому це погана ідея? * Знайдіть колір фону (темний), на якому цей жовтий текст матиме контраст мінімум 7:1 (рівень AAA).

Завдання 3: Дальтонізм Близько 8% чоловіків мають порушення сприйняття кольору (найчастіше — червоний/зелений). У вас є форма, де помилка підсвічується лише червоною рамкою border-color: red. * Як це виправити? Додайте ще один індикатор, який не залежить від кольору (наприклад, іконку або текст).

Завдання 4: Міні-кейс Ви робите "Dark Mode" (темну тему). Фон: #000000 (Чорний). Текст: #FFFFFF (Білий). Контраст: 21:1. Питання: Чи не буде це занадто "різко" для очей вночі? Спробуйте знайти відтінок "Off-white" (трохи сіруватий) для тексту, щоб знизити контраст до комфортних 12-15:1.

5. 💡 Мислення як у розробника

Як думає новачок?

"О, цей пастельний рожевий такий гарний! Я зроблю ним увесь текст."

Як думає Senior Developer (тобто ви, скоро):

"Цей рожевий гарний, але він має низький контраст. Я використаю його для фону або великих декоративних елементів, а для основного тексту візьму темніший відтінок або чорний. І обов'язково перевірю це в Chrome DevTools."

🚀 Поради з окопів:

  1. Не довіряйте своїм очам. Ваші монітори зазвичай кращі, ніж у середнього користувача. Довіряйте цифрам (Contrast Checker).
  2. DevTools — ваш друг. У Chrome натисніть F12, виберіть елемент і подивіться на палітру кольорів. Там є лінія, яка показує рівень контрасту.
  3. Колір — це не єдиний спосіб передачі інформації. Ніколи не пишіть "Натисніть на зелену кнопку". Пишіть "Натисніть кнопку 'Старт'".

6. 🧩 Підсумок

Сьогодні ми не просто вивчили кольори. Ми навчилися емпатії через код.

Що ви тепер вмієте: 1. Розумієте, що таке a11y і чому це важливо для бізнесу та людей. 2. Знаєте магічне число 4.5:1 (WCAG AA). 3. Вмієте перевіряти контрастність і виправляти "невидимий" текст.

Вам це знадобиться: Коли ви будете робити свій перший серйозний проєкт, і замовник запитає: "Чому ми не можемо зробити світло-сірий текст?", ви скажете: "Тому що ми втратимо 20% аудиторії, і це порушує стандарти веб-доступності". Шах і мат.

🔜 У наступній серії: Ми зробили текст видимим, але як щодо тих, хто не бачить екран взагалі? Наступного разу ми поговоримо про Семантичний HTML та Скрінрідери (програми, що читають сайт вголос).

А поки — зробіть цей світ трохи контрастнішим! 👋

← До списку уроків Наступний урок →