Інформаційна доступність — важлива складова, яку обов’язково треба враховувати під час публікації будь-якого контенту онлайн. Марина Сташина-Неймет — експертка з доступності «ГРУПИ ВПЛИВУ» — поділилася базовими порадами, які допоможуть зробити вебсайт доступнішим для людей з інвалідністю.
Чому важливо прописувати альтернативний текст для зображень на сайті й що саме там варто писати?
Уявімо собі, що ми купуємо якусь річ. Для нас, крім якісних характеристик, важливу роль відіграє форма, колір. Альтернативний текст — це так само про вибір. Людина може подивитися зображення, а може прочитати чи прослухати його опис. Адже бувають різні ситуації: поганий зв’язок і неможливо завантажити світлину, очі втомилися й дивитися ще щось немає сил, або ж людина читає виключно за допомогою програм екранного доступу. Останні, на жаль, не зчитують зображення.
Коли ми описуємо ілюстрації, варто пам’ятати про їхнє значення в цій публікації. Наприклад, картинка для привернення уваги потребує мінімальної інформації. Натомість світлини з події вимагають більше даних. Адже через них ми передаємо емоційну складову того, що відбувалося. Якщо світлина ілюструє те, що описали в тексті, то тут важливо вказати, що вона, наприклад, зображує подію, та додати, що саме на ній є. У цьому випадку важливі деталі, адже в них уся суть. Отже, якщо світлина з пейзажем засніжених Карпат, прикрашеною ялинкою, подарунками під нею, то все це необхідно докладно прописати.
Як треба структурувати довгий текст, щоб його було легше сприймати?
Одна ключова думка — один абзац. Погодьтеся, так навіть легше шукати очима, легше запам’ятати, зрозуміти логіку. Адже у своїй уяві ми складаємо частини в більшу смислову картину, ніби пазли. Відступи між абзацами — це також про структуру. Їх легко відділити візуально. Та й програми екранного доступу дають читачам зрозуміти, що перед ними не суцільна трьохметрова текстова ковдра. Розділи також допоможуть краще орієнтуватися в тексті. Раптом читачам треба зрозуміти про що цей текст лише в загальних рисах. Завдяки розділам, читач виділить для себе одразу найцікавіше, а вже згодом зможе повернутися до уважнішого читання.
Оптимально використовувати 15, максимум 20 слів у реченні. Так вони будуть короткими, простими і зрозумілішими. Однак, це за умови, якщо слова в реченні добре відомі, а слова іншомовного походження, абревіатури, терміни ми пояснили. У коротких реченнях легше знаходити окремі смислові одиниці, які ми вкладаємо в кожне з них. Уявіть речення із 45–60 слів, в яких ще й складна пунктуація (двокрапки, коми, тире тощо). Спробуйте проговорити вголос таке речення, не переводячи дихання. Так само важко сприймати велику довжину на слух, а зрозуміти — тим паче.
Які знаки можуть погано зчитуватися спеціальними програмами зчитування з екрану й чи є символи, які не варто використовувати в тексті на сайті?
Питання в труднощах сприйняття. Наприклад, якщо людина незряча від народження чи раннього дитинства, то емодзі з агресивним виразом обличчя програма екранного доступу зчитає, але не факт, що людина його уявить. Тому використовувати пояснення вкрай важливо. Більш прості емодзі — скажімо, серце — можна описати, що це серце конкретного кольору. Прапори країн краще вказувати за назвою країни. Водночас ніколи не заміняйте слова на емодзі. Вони підсилюють, а часом дають ширше розуміння тексту для тих, хто краще контактує через знаки та символи. Однак варто пам’ятати, що дрібні елементи буває складно роздивитися. Або ж через проблеми зі зв’язком замість емодзі ялинки можуть з’явитися нечитабельні символи.
Схожа ситуація з іконками-символами на сайтах. Здавалося б, візуально всі знають, як виглядає емблема ютуба, інстаграму чи фейсбука. Однак для користувачів програм екранного доступу вони є звичайними картинками. Тому їх також варто підписувати. Коли ми наводимо курсор на іконку, має з’явитися текст, що описує її. Що точно не варто використовувати — це зображення, які постійно змінюються. А ще — анімовані (живі) зображення. По-перше, їх непросто роздвитися через швидку зміну кадрів і неможливість приблизити ілюстрацію. По-друге, для людей із порушеннями сприйняття такі рухливі елементи не підходять, адже можуть викликати небажані реакції.
Рекомендації, щоби зробити доступнішим відео на сайті
Доступність відео має два важливі аспекти:
- Наявність аудіо- чи текстового опису. Чим більше візуальних елементів, тим докладнішим має бути опис. Тому простіше дати текстовий опис, ніж намагатися проговорити деталі в перервах між словами спікерів.
- Переклад на українську жестову мову й субтитрування. Не всі нечуючі володіють жестовою мовою, як і не всі можуть повною мірою зрозуміти сенс сказаного через субтитри.
Приклади доступних сайтів
Чи не зашкодить сприйняттю розміщення на сайті діаграм, графіків, інфографіки? Як їх варто оформити, щоб зробити інформаційно доступними?
Такі елементи не зашкодять, але можуть ускладнити сприйняття. Тому їх потрібно обов’язково описувати. Зробити це можна по-різному, залежно від того, що вже є в тексті публікації. Наприклад, якщо там докладно описані всі кроки нового порядку отримання певних документів, то в описі до інфографіки можна вказати: «Опис зображення: На картинці схематично зображено алгоритм дій при оформленні таких-то документів». Так само з діаграмами. Якщо в публікації йдеться про певну тенденцію чи зміни, в описі пояснюємо, що це за зміни на діаграмі й за який період. Якщо текст публікації не дає цих пояснень і ви покладаєтеся виключно на зображення, доведеться прописати все alt текстом.
Підсилити візуальну доступність можна таким чином:
- Не намагайтеся на прямокутне зображення 2×3 см умістити текст із трьох сторінок А4. Це буде нечитабельно.
- Не робіть надто різнокольорову інфографіку чи діаграми. Оберіть 3–4 базові кольори, відмінні від кольору тексту. Допустимо використовувати перехід від більш інтенсивного до менш інтенсивного кольору (наприклад, у діаграмі).
- Пам’ятайте про контраст. Світло-жовтий фон зі світло-блакитними літерами на ньому — красиво, але нечитабельно. Світло зелені літери на темно-зеленому фоні – також. Останній варіант прийнятний для діаграми, де ви позначаєте зміну інтенсивності. Найкращий контраст — чорно-білий. Водночас текст білого кольору може набувати підтон кольору фону. Також добре контрастують між собою теплі темні та холодні світлі кольори, так само теплі світлі та холодні темні.
- Текст завжди має бути на однотонному контрастному фоні.
- Неонові відтінки небажані. Їх можна використати як окремий декоративний елемент, але в жодному разі не як основний фон чи колір тексту.
Які є міжнародні стандарти доступності, з якими можна ознайомитися і оцінити доступність свого сайту?
Є міжнародні настанови з доступності вебвмісту WCAG (Web Content Accessibility Guidelines) 2.1. Україномовна версія доступна за посиланням. Однак важливо пам’ятати, що автоматичне текстування може не показати всі нюанси порушень принципів доступності. Проте якщо ви прагнете почати свій шлях до доступності контенту на вашому сайті — з цього можна стартувати.
