Як оптимізувати сайт для кращої доступності

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

Як додати текст заміщення

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

Як додавати або змінювати текст заміщення для вставлених зображень

Виберіть зображення або логотип.
Натисніть значок Додати текст заміщення.
Введіть текст заміщення в полі опису.

Як додавати або змінювати текст заміщення на фонових зображеннях

На комп’ютері відкрийте сайт у Google Сайтах.
Додайте текст заміщення до фонового зображення.
- У заголовок сайту. Унизу ліворуч від заголовка натисніть значок .
- У розділ. Праворуч від розділу натисніть значок .
Натисніть Текст заміщення.
У полі опису введіть текст заміщення.

Як додати або змінити текст заміщення для логотипа чи банера спеціальної теми

Як додати текст заміщення до нових спеціальних тем

На комп’ютері відкрийте сайт у Google Сайтах.
Праворуч натисніть панель Теми.
У розділі "Спеціальна" натисніть значок .
Щоб завантажити логотип або банер, натисніть значок Завантажити.
Щоб додати текст заміщення, натисніть завантажене зображення Текст заміщення.

Як додати або змінити текст заміщення для заголовків спеціальної теми

На комп’ютері відкрийте сайт у Google Сайтах.
Праворуч натисніть панель Теми.
У розділі "Спеціальна" у верхньому правому куті спеціальної теми натисніть значок Редагувати.
У розділі "Зображення" натисніть зображення заголовка Текст заміщення.
У полі опису введіть текст заміщення.

Докладніше про спеціальні теми.

Як використовувати високий контраст кольорів

Високий контраст кольорів полегшує перегляд і розуміння тексту й зображень. У правилах щодо доступності веб-контенту (WCAG) 2.0 мінімальне рекомендоване співвідношення яскравості для великих текстів становить 4,5:1, а для текстів і зображень інших розмірів – 7:1. Наприклад, радимо уникати розміщення світло-сірого тексту на білому фоні.

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

Як використовувати інформативні посилання

Програми зчитування з екрана можуть сканувати посилання, тому краще робити їх текст змістовним. Рекомендуємо використовувати назву сторінки як текст посилання. Наприклад, посилання на сторінку вашого профілю краще назвати "Мій профіль", а не "Натисніть тут". Незручно буде й просто залишити повну URL-адресу сторінки як назву.

Як перевірити розмір і вирівнювання тексту

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

Як доповнити форматування текстом

Не варто покладатися лише на форматування тексту, щоб донести додатковий зміст. Програми зчитування з екрана можуть не озвучувати зміни форматування, як-от жирний шрифт або виділення. Наприклад, щоб привернути увагу до певного фрагмента тексту, додайте слово "Важливо".

Як використовувати нумеровані й марковані списки

У Google Документах і Google Презентаціях деякі типи списків визначаються й форматуються автоматично для кращої доступності. Наприклад, якщо ви починаєте новий рядок із цифри 1 і крапки, його автоматично буде оформлено як перший пункт списку. Дізнайтесь, як форматувати марковані й нумеровані списки.