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

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

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

Програми екранного доступу (англ. screen readers) – це спеціальне програмне забезпечення, яке допомагає людям із порушеннями зору користуватися комп’ютерами, смартфонами та іншими цифровими пристроями. Для людей із дислексією (особливістю, яка може ускладнювати читання та розпізнавання слів) корисними також можуть бути інструменти озвучення тексту.

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

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

NVDA (NonVisual Desktop Access) – безкоштовна програма для комп’ютерів і ноутбуків з операційною системою Windows. Має українськомовний інтерфейс, підтримує роботу з офісними програмами, браузерами та сучасними синтезаторами мовлення.

TalkBack – вбудована функція доступності для смартфонів і планшетів на базі Android, що забезпечує озвучення інформації на екрані та підтримує керування жестами.

VoiceOver – вбудована технологія екранного доступу для пристроїв Apple (iPhone, iPad, Mac, Apple Watch), яка забезпечує озвучення елементів інтерфейсу та навігацію українською мовою.

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

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

Як зробити інформацію доступною

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

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

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

Приклад використання кольору для передавання інформації. Діаграма: Дія. Бізнес

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

Приклад використання текстових підписів для позначення кольорів. Діаграма: Дія. Бізнес

Перевіряйте контрастність тексту. Для цього можна скористатися спеціальними онлайн-інструментами, які визначають, чи достатньо відрізняються кольори тексту та фону. За рекомендаціями WCAG 2.2, мінімальна контрастність звичайного тексту має становити 4,5:1, а великого – 3:1.

Як налаштувати текст для зручного читання

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

Як збільшити текст

На комп’ютері. У багатьох браузерах можна натиснути Ctrl і +, щоб збільшити масштаб сторінки, або Ctrl і -, щоб зменшити його. Щоб повернути початковий масштаб, натисніть Ctrl і 0.

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

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

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

Важливо, щоб після збільшення текст не обрізався, абзаци залишалися читабельними, а кнопки та посилання були доступними. За рекомендаціями WCAG 2.2, текст має збільшуватися до 200 % без втрати змісту чи функціональності сторінки.

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

Джерела:

https://chuguiv-gromada.gov.ua/bezkoshtovni-tehnologiyi-ekrannogo-dostupu-dlya-lyudej-z-porushennyamy-zoru/

https://brovary-rada.gov.ua/news/bezbariernist-u-tsyfrovomu-prostori-hromadianam-rekomenduiut-korystuvatysia-bezkoshtovnymy-prohramamy-ekrannoho-dostupu

https://mpmr.gov.ua/news/1783414700/

 

Біла тростина: символ незалежності, свободи та рівних можливостей

Ілюстрація: Генерація успішної дії

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

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

На глобальному рівні 15 жовтня як День білої тростини було затверджено у 1970 році з ініціативи Міжнародної федерації сліпих. В Україні Міжнародний день білої тростини почали активно відзначати на громадському та державному рівнях на початку 1990-х років, після здобуття незалежності.

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

Навичкам впевненого використання тростини навчають фахівці з орієнтування та мобільності (O&M). Це ціле мистецтво, що охоплює слухову орієнтацію, просторову уяву та відчуття балансу. Біла тростина залишається базовим інструментом мобільності, але сьогодні її доповнюють такі технологічні рішення:

1. Програми читання з екрана (Screen Readers): NVDA, TalkBack, VoiceOver озвучують текст на комп'ютерах і смартфонах.

2. Розумні додатки: сервіси на базі штучного інтелекту (наприклад, Be My Eyes, Seeing AI) допомагають зчитувати текст на упаковках, розпізнавати купюри, перешкоди та навіть описувати навколишню обстановку.

3. GPS-навігатори для незрячих: спеціальні додатки (DotWalker, Lazarillo) голосовими підказками повідомляють про перехрестя, зупинки та заклади поруч.

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

Безпечне середовище створюють не лише тротуари з тактильною плиткою чи звукові світлофори, а й уважність та культура суспільства.

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

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

Як правильного супроводжувати. Якщо людина погодилася на допомогу, запропонуйте їй взяти вас під лікоть (не хапайте її самі). Ідіть на пів кроку попереду, щоб вона відчувала ваші рухи. Попереджайте про перешкоди, говоріть чітко та конкретно: «Попереду сходи вниз», «Праворуч двері» замість абстрактного «Обережно, там!».

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

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

Джерела:

https://littera.zt.ua/all-news/mizhnarodnyy-den-biloyi-trostyny

https://news.hochu.ua/ukr/cat-prazdniki/all/article-123711-15-oktyabrya-mezhdunarodnyiy-den-beloy-trosti-uznayte-istoriyu-etogo-prazdnika-i-ego-znachenie/

 

 

Альтернативні описи (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