Альтернативні описи (alt-тексти) та робота з зображеннями : як створювати доступний візуальний контент

Ілюстрація згенерована за допомогою ШІ

Цифровий контент став невід’ємною частиною нашого життя. Зображення допомагають зробити сайт, допис чи сторінку зрозумілішими, цікавішими та привабливішими. Фотографії, інфографіка, карти та афіші доповнюють текст і допомагають краще передати інформацію.

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

Alt-текст (альтернативний текст) – це короткий опис зображення, який передає його основний зміст людям, які не можуть його побачити. Він може озвучуватися за допомогою програм читання з екрана, якими користуються люди з порушеннями зору. Alt-текст не має описувати кожну деталь фотографії – його завдання полягає в тому, щоб стисло пояснити, що зображено, що на ньому відбувається та яку важливу інформацію воно передає.

Що таке Alt текст? Ілюстрація згенерована за допомогою ШІ

Хороший alt-текст починається не з опису всього, що потрапило в кадр, а з розуміння його головної ідеї. Передусім варто визначити, навіщо зображення розміщене на сторінці та яку інформацію воно має передати. У центрі уваги можуть бути люди та їхні дії, місце, подія або певна деталь. Саме це визначає, що варто включити до опису, а що можна залишити поза увагою.

Ілюстрація згенерована за допомогою ШІ

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

Щоб опис був справді корисним і доступним, дотримуйтеся кількох простих правил:

1. Не дублюйте зайву інформацію. Якщо важливі відомості вже є поруч у тексті або підписі, не потрібно повторювати їх в Alt-тексті.

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

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

4. Не перевантажуйте Alt-текст ключовими словами. Він створюється насамперед для людини, яка сприймає інформацію за допомогою скрінрідера, а не для пошукової системи.

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

Як правильно писати Alt текст. Ілюстрація згенерована за допомогою ШІ

Alt-текст і підпис до фото – це не одне й те саме. Ці елементи можуть доповнювати один одного, але мають різне призначення. Підпис до фотографії може повідомляти назву заходу, дату, місце проведення або автора фото. Alt-текст описує зміст самого зображення. Тому не рекомендовано копіювати підпис у поле альтернативного тексту.

Ілюстрація згенерована за допомогою ШІ

Додавання альтернативного тексту зазвичай не потребує спеціальних знань або складних налаштувань. Більшість сучасних редакторів сайтів мають окреме поле «Alt-текст», «Альтернативний текст» або «Опис зображення», яке можна знайти в налаштуваннях зображення. Назва цього поля може відрізнятися залежно від платформи, але принцип роботи залишається приблизно однаковим.

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

Алгоритм, який допоможе швидко знайти та додати Alt-текст на сайті. Ілюстрація згенерована за допомогою ШІ

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

1. Робить контент доступнішим. Для людини, яка не бачить зображення, Alt-текст може бути єдиним способом зрозуміти, що на ньому зображено. Програма читання з екрана озвучує цей опис.

2. Полегшує роботу пошукових систем. Alt-текст допомагає пошуковим системам зрозуміти зміст зображення та правильно його показати в результатах пошуку.

3. Допомагає в технічних ситуаціях. Якщо зображення не завантажилося через проблеми з інтернетом або технічну помилку, альтернативний текст може показати користувачеві, яка інформація мала бути на цьому місці.

Джерела:

https://prposting.com/uk/blog/102-alt-text

https://it-rating.ua/alt-dlya-zobrajen-scho-tse-i-yak-vikoristovuvati

https://google-seo.pro/blog/google-seo/alt-text-for-images

 

 

Українське законодавство та міжнародні стандарти вебдоступності WCAG 2.1/2.2 : що мають знати бібліотекарі та установи

Ілюстрація згенерована за допомогою ШІ

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

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

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

У країнах Європейського Союзу ці норми поширювалися переважно на вебсайти та мобільні застосунки державних установ.

2019 рік. Європейський Союз ухвалив Європейський акт про доступність (European Accessibility Act), який розширив правила доступності на низку товарів і послуг приватного сектору.

28 червня 2025 року. Акт набрав чинності в усіх країнах ЄС. Відтоді норми цифрової доступності стали обов'язковими не лише для державних установ, а й для багатьох приватних компаній, які надають товари та послуги громадянам ЄС.

В Україні за останні два роки також значно оновили законодавство в цій сфері згідно європейських стандартів.

2021 рік. Урядом була схвалена Національна стратегія зі створення безбар'єрного простору в Україні на період до 2030 року. Вона закріпила цифрову доступність як один із пріоритетних напрямів державної політики.

2022 рік. Набув чинності національний стандарт «Інформаційні технології. Вимоги щодо доступності продуктів та послуг ІКТ». Він впровадив європейські вимоги інклюзії як до сайтів, так і до мобільних застосунків.

2023 рік. Набрала чинності Постанова Кабінету Міністрів України «Деякі питання доступності інформаційно-комунікаційних систем та документів в електронній формі». Вона зобов'язала органи виконавчої влади суворо дотримуватися вимог цифрової доступності.

2026 рік. Верховна Рада розглядає проєкт Закону України «Про цифрову доступність». Після його ухвалення норми цифрової доступності поступово поширяться не лише на державні установи, а й на приватний сектор (медичні заклади, освітні установи, інтернет-магазини та інші цифрові сервіси).

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

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

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

Ілюстрація згенерована за допомогою ШІ

WCAG (Web Content Accessibility Guidelines) – це міжнародний стандарт, розроблений Консорціумом Всесвітньої павутини (W3C). Саме на нього орієнтуються державні установи та компанії у всьому світі під час створення доступних вебсайтів і мобільних застосунків. Український ДСТУ та вимоги ЄС, базуються саме на рекомендаціях WCAG.

Усі вимоги WCAG будується на чотирьох принципах (POUR):

Ілюстрація згенерована за допомогою ШІ

Стандарт WCAG постійно оновлюється, щоб враховувати розвиток цифрових технологій і нові потреби користувачів. Основні етапи його розвитку виглядають так:

2008 рік. Створено базовий фундамент (WCAG 2.0): з'явилися обов'язкові підписи до картинок, робота сайту без мишки та контрастні кольори текстів.

2018 рік. Адаптація під смартфони (WCAG 2.1): додано правила для зручного користування сайтами з мобільних телефонів та планшетів.

2023 рік. Впровадження сучасних вимог (WCAG 2.2): спрощено вхід на сайти без складних перевірок безпеки, покращено видимість кнопок і навігацію.

Це означає, що дотримання лише WCAG 2.0 чи навіть 2.1 вже недостатнє. Законодавство ЄС прямо посилається на WCAG 2.2, і саме він на сьогоднішній день є актуальним стандартом.

Кожна вимога WCAG має один із трьох рівнів відповідності. На сьогоднішній день рівень AA є основним орієнтиром для державних сайтів і більшості нормативних документів.

Рівні відповідності WCAG. Ілюстрація згенерована за допомогою ШІ

До базових рекомендацій WCAG 2.0 та 2.1 належать такі:

Альтернативний текст для зображень. Незрячі люди не можуть побачити зображення, тому для них важливо створити текстовий опис – альтернативний текст. Його мета – надати незрячим користувачам таку ж інформацію, яку отримують зрячі при перегляді зображення. Він не відображається на сторінці, а доступний лише користувачам скринрідерів – спеціального програмного забезпечення, яким користується ця категорія користувачів. Бажано, щоб альтернативний текст був не більше 150 символів. Варто описувати тільки те, що зображено, і не додавати суб’єктивну оцінку.

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

Контрастність. Текст і фон повинні мати достатній контраст (мінімум 4,5:1), щоб їх було легко читати (наприклад, під час перегляду контенту під яскравим сонцем).

Зрозумілі форми. Усі поля для введення інформації повинні мати чіткі назви або підказки, щоб користувач розумів, які дані потрібно ввести. Якщо на сайті є форма реєстрації, біля полів мають бути підписи. Наприклад: прізвище; електронна пошта; номер телефону. За наявності особливих вимог, їх теж потрібно пояснити: пароль (не менше 8 символів); дата народження (День. Місяць. Рік).

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

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

Медіаконтент. Відео супроводжується субтитрами, аудіо – текстовими версіями, а мерехтливі ефекти уникаються.

Основні вимоги WCAG 2.0 та 2.1. Ілюстрація згенерована за допомогою ШІ

WCAG 2.2 додає нові критерії до вже існуючих, які спрямовані на те, щоб охопити більше аспектів доступності. Серед ключових нововведень:

Видимий фокус. Під час навігації за допомогою клавіатури користувач повинен чітко бачити, який елемент сайту (кнопка, посилання чи поле) зараз активний.

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

·       людина користується лише клавіатурою;

·       використовує програму керування голосом;

·       має порушення моторики рук;

·       працює зі смартфона, де перетягування теж не завжди зручне.

Тому WCAG вимагає, щоб окрім перетягування був інший спосіб виконати ту саму дію:

·       замість перетягування файлу можна натиснути кнопку «Вибрати файл»;

·       замість перетягування елементів списку є кнопки «Вгору» і «Вниз»;

·       замість перетягування маркера на карті можна ввести адресу або координати.

Мінімальний розмір інтерактивних елементів. Кнопки та посилання повинні мати достатній розмір (приблизно 24×24 пікселі), щоб їх було легко активувати.

Стала допомога. Чат підтримки, розділ «Допомога» мають розміщуватися в одному й тому самому місці на всіх сторінках сайту.

Відсутність повторного введення. Користувач не повинен вводити одні й ті самі дані кілька разів у багатокрокових формах.

Доступна автентифікація. Процес входу не може вимагати складних когнітивних тестів (наприклад, розгадування загадок чи запам’ятовування образів).

Легкий пошук допомоги. Якщо сайт пропонує чат підтримки, довідку чи контактну інформацію, користувач повинен швидко їх знайти.

Ці критерії доповнюють попередні вимоги та роблять цифрові сервіси ще зручнішими.

Що нового у WCAG 2.2. Ілюстрація згенерована за допомогою ШІ

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

Використані джерела:

https://dou.ua/forums/topic/46499/

https://obukhiv.info/news/mintcifri-ukrainski-rozrobniki-zmozhut-stvoriuvati-bilshe-onlain-resursiv-dostupnikh-dlya-liudei-z-porushennyam-zoru-chi-slukhu/

https://business.diia.gov.ua/history-of-success/shcho-biznesu-potribno-znaty-pro-wcag

 

Web Accessibility: про вебдоступність для користувачів і бібліотекарів

Ілюстрація згенерована за допомогою ШІ

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

Ви дізнаєтся:

•         що таке вебдоступність і чому вона важлива;

•         як зробити цифрові ресурси зручними для всіх користувачів, зокрема людей з інвалідністю;

•         які сучасні інструменти та рекомендації допомагають створювати доступний вебконтент;

•         яку роль бібліотеки відіграють у забезпеченні рівного доступу до інформації.

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

Долучайтеся до нашого віртуального проєкту та відкривайте світ доступної інформації разом із бібліотекою!

Основи вебдоступності: що це таке, навіщо потрібно та які групи користувачів охоплює

Ілюстрація згенерована за допомогою ШІ

Сьогодні Україна є одним із світових лідерів цифрової трансформації. Смартфон став головним інструментом для взаємодії з державою та світом. Люди звикли отримувати довідки за кілька кліків, відкривати бізнес «у два етапи», сплачувати податки онлайн чи замовляти ліки, не виходячи з дому. Держава у смартфоні – це зручно, швидко та беззаперечно полегшує життя. Цифрові технології вже давно перестали бути лише засобом комунікації чи розваг – вони стали важливою частиною повсякденного життя та фактично новою інфраструктурою сучасного суспільства.

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

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

Саме тому рівний доступ до технологій – це не просто питання комфорту, а питання людської гідності та рівних прав. Ключем до подолання цієї ізоляції є вебдоступність (Web Accessibility).

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

Основою вебдоступності є міжнародний стандарт WCAG (Web Content Accessibility Guidelines). Він визначає чіткі вимоги для створення цифрового контенту. В основі WCAG лежать чотири принципи, які допомагають усунути бар'єри в інтернеті та зробити вебресурси доступними для всіх.

Сприйнятність (Perceivable). Уся інформація на сайті повинна бути подана так, щоб користувач міг її сприйняти незалежно від особливостей зору чи слуху. Для цього зображення супроводжуються альтернативним текстом, текст має достатній контраст із фоном, його можна збільшувати без втрати змісту, а відео та аудіоматеріали доповнюються субтитрами або текстовими описами.

Керованість (Operable). Усі елементи сайту мають бути зручними для взаємодії. Користувач повинен мати можливість користуватися сайтом не лише за допомогою миші, а й клавіатури чи допоміжних технологій. Також важливо уникати автоматичного відтворення звуку та надавати достатньо часу для виконання дій, наприклад під час заповнення форм.

Зрозумілість (Understandable). Інформація та навігація повинні бути простими й передбачуваними. Для цього використовують зрозумілу мову, логічну структуру сторінок, однакове розташування елементів інтерфейсу та чіткі повідомлення про помилки під час введення даних.

Надійність (Robust). Вебконтент повинен коректно працювати в різних браузерах і бути сумісним із допоміжними технологіями, зокрема програмами екранного озвучення. Це досягається завдяки правильній семантичній HTML-розмітці, яка дозволяє спеціальним програмам точно визначати та відтворювати вміст сторінки.

Ілюстрація згенерована за допомогою ШІ

Цифрова безбар’єрність потрібна значно більшій кількості людей, ніж здається на перший погляд. Вона орієнтована на:

Людей із порушеннями зору: повністю незрячі користувачі (які керують інтерфейсом за допомогою програм екранного доступу – скрінрідерів), а також люди з частковою втратою зору, дальтонізмом чи катарактою.

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

Людей із порушеннями опорно-рухового апарату: ті, хто через травми або параліч не можуть користуватися комп'ютерною мишкою і здійснюють навігацію сайтом виключно за допомогою клавіатури чи голосових команд.

Людей із ментальними та когнітивними особливостями: користувачі з розладами аутистичного спектра (РАС), синдромом Дауна, дислексією чи труднощами концентрації. Для них важлива зрозуміла мова, передбачувана логіка інтерфейсу та відсутність агресивного миготливого контенту.

Ключ до рівних прав у мережі. Фото: Linkedin

Вона також допомагає користувачам із короткотривалими труднощами:

Тимчасові обмеження: зламана рука, відновлення після операції на очах або тимчасова втрата слуху.

Ситуативні обмеження: коли ви тримаєте на руках немовля, їдете у гучному транспорті без навушників (і рятують субтитри) або намагаєтеся прочитати текст на екрані телефона під прямим сонцем (і тут рятує висока контрастність).

Вікові зміни: у людей старшого віку природно погіршуються зір та координація. Доступний сайт дозволяє їм залишатися самостійними.

Ілюстрація згенерована за допомогою ШІ

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

Повага та рівність. Доступ до інформації – це базове право людини. Цифрова безбар'єрність демонструє повагу до гідності кожного користувача.

Закон та стандарти. В Україні та світі вимоги до доступності публічних і державних вебресурсів закріплені на законодавчому рівні.

Зручність для всіх (UX). Сайти, розроблені за стандартами доступності, мають чітку структуру, логічну навігацію та високу швидкість завантаження. Вони просто зручніші для будь-якого користувача.

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

Зробити контент чи сайт доступнішим можна вже зараз:

Додавайте альтернативний текст (Alt-text) до зображень, щоб скрінрідери могли озвучити, що на них зображено.

Дотримуйтеся контрастності між текстом та фоном.

Створюйте чітку ієрархію заголовків (H1, H2, H3), щоб інформацію було легко сканувати очима.

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

Ілюстрація згенерована за допомогою ШІ

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

Джерела:

https://career.softserveinc.com/uk-ua/stories/web-accessibility-a-progressing-trend

https://www.undp.org/sites/g/files/zskgke326/files/2023-06/korotkiy_posibnik_z_cifrovoi_dostupnosti_-_ukr.pdf

https://career.beetroot.co/uk/web-accessibility-guidelines-understanding-the-basics/