Доступність сайту простими словами: чому це вигідно всім

Клієнтка дзвонить і питає, чому не може оформити замовлення. Дивимося — усе працює. Просимо надіслати скріншот, і все стає ясно: вона на вулиці, сонце б'є в екран, а підказка під полем набрана світло-сірим по білому кеглем 12. Для неї цього тексту просто не існує.

Ось що таке доступність насправді. Не окрема версія сайту «для людей з інвалідністю», не значок із вушком у кутку, а якість звичайної версії — така, щоб нею могла скористатися людина з поганим зором, людина без миші, людина в метро, людина на сонці й людина зі старим телефоном. Виявляється, це майже всі ваші клієнти в той чи інший момент.

Контраст: найчастіша й найдешевша помилка

Світло-сірий текст на білому тлі — улюблений прийом дизайну останніх років. Виглядає повітряно на макеті в затемненій кімнаті на хорошому моніторі. І зникає на телефоні при денному світлі.

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

Що ламається найчастіше:

• Сірий текст замість чорного «щоб було мʼякше».
• Білі підписи поверх фотографії — на світлих ділянках знімка вони зникають.
• Кнопки в блідих кольорах бренду, де напис ледь читається.
• Плейсхолдери в полях форми світлішими, ніж сам текст.

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

Розмір тексту й простір для очей

Другий базовий шар — читабельність. Тут працюють прості орієнтири: основний текст від 16 пікселів, міжрядковий інтервал приблизно півтора, довжина рядка не на всю ширину монітора, а десь 60-80 символів.

Окрема біда — дрібні написи в підвалі, у примітках і в підказках форм. Логіка «це другорядне, хай буде маленьким» помилкова: якщо текст неважливий, приберіть його; якщо важливий — дайте прочитати.

І ще одне, що часто ламають навмисне: не забороняйте масштабування на телефоні. Зустрічається налаштування, яке блокує зум «щоб дизайн не поїхав». Для людини, яка звикла збільшити дрібний фрагмент двома пальцями, це перетворює сайт на глуху стіну.

Керування з клавіатури

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

Перевірка займає хвилину: відкрийте свій сайт і, не торкаючись миші, спробуйте дійти до форми та відправити заявку.

На що дивитися:

• Чи видно фокус. Має бути помітна рамка навколо активного елемента. Її часто вимикають у стилях, бо «некрасива» — і людина миттєво втрачає розуміння, де вона знаходиться.
• Чи логічний порядок. Перехід має йти зверху вниз, а не стрибати хаотично.
• Чи доступні всі елементи. Меню, що розкривається, слайдер, модальне вікно — усе це має відкриватися й закриватися без миші.
• Чи можна вийти з вікна. Спливаюче вікно, яке не закривається клавіатурою, — це пастка.

Найпоширеніша технічна причина проблем — кнопки, зроблені з чужих для цього елементів. Звичайна кнопка й посилання працюють із клавіатурою самі, без жодного коду; саморобний «клікабельний блок» — ні.

Alt до зображень

Alt — це текстовий опис картинки. Його читає програма екранного читання для незрячої людини, його ж показує браузер, коли зображення не завантажилося, і його враховує пошук.

Правила прості:

• Змістовна картинка отримує опис того, що на ній і чому вона тут: не «фото», а «майстер наносить захисне покриття на кузов авто».
• Декоративна картинка — фон, візерунок, лінія — отримує порожній alt, щоб програма її просто пропустила й не заважала слухати.
• Кнопка-іконка обовʼязково має підпис: іконка конверта без тексту для екранного читача — це нічого.
• Текст на зображенні дублюється в alt, інакше він недоступний нікому, крім тих, хто його бачить.

Не пишіть у alt перелік ключових слів — це не допомагає в пошуку й перетворює прослуховування сторінки на тортури.

Форми: де губиться найбільше заявок

Форма — найвужче місце будь-якого сайту, і в доступності теж.

• Підпис має бути окремо від поля, а не тільки всередині сірим текстом. Щойно людина почала вводити дані, підказка зникає — і вона забуває, що тут потрібно.
• Помилки треба пояснювати словами. Червона рамка без тексту нічого не повідомляє тому, хто не розрізняє червоний, і тому, хто слухає сторінку. «Вкажіть номер у форматі 0XX XXX XX XX» — повідомляє.
• Не покладайтеся лише на колір. Колір має дублюватися текстом або значком: приблизно кожен дванадцятий чоловік має те чи інше порушення розрізнення кольорів.
• Не ставте жорстких обмежень часу на заповнення. Людині може знадобитися більше хвилин, ніж ви думаєте.

Тексти теж частина доступності

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

Що допомагає: короткі абзаци, підзаголовки через кожні кілька абзаців, списки замість суцільного полотна, звичайні слова замість термінів.

Окремо — тексти посилань. Посилання «детальніше», «тут», «читати» нічого не означають, якщо їх читати поза контекстом, а програми екранного читання дозволяють переглядати список усіх посилань сторінки. Пишіть «умови доставки», а не «натисніть тут». Ці ж принципи ми докладніше розбирали в матеріалі про те, як написати текст для сайту.

Чому це вигідно всім

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

• Незрячий користується екранним читачем — але й людина за кермом слухає, а не дивиться.
• Людина без руки користується однією — але й та, що тримає дитину, теж.
• Слабозорий не бачить блідий текст — але й будь-хто на сонці не бачить.
• Глухій людині потрібні субтитри — але й тому, хто дивиться відео без звуку в транспорті.

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

Чесні межі

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

Реалістичний план: закрити базовий рівень — контраст, розміри тексту, фокус і клавіатуру, alt, підписи й помилки у формах. Це вже прибирає більшість реальних барʼєрів. І ще: автоматичні перевірки знаходять лише частину проблем. Найкорисніший тест — вимкнути мишу й пройти сайт самому.

Коротко

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

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

Ми в Obliko перевіряємо ці речі як частину звичайної роботи, а не як окрему послугу. Напишіть — подивимося ваш сайт на контраст, клавіатуру й форми та скажемо, що виправляється швидко.