Рекомендації Безбарєрності з веб доступності. Загальні рекомендації

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

Медіаальтернатива для тексту. Нетекстовий вміст сайту (зображення, ілюстрації, графіки) може бути бар’єром для незрячих користувачів, адже скринридери не здатні прочитати вміст зображення. Відповідно до стандарту, треба додавати альтернативний текст для всіх інформа­тивних зображень, текстовий опис має бути еквівалентним зображенню. Тоді скринридер зможе прочитати цей опис, і незрячий користувач отримає стільки ж інформації, скільки і зрячий.

Розмір шрифту. Забезпечте достатній розмір шрифту для полегшення читання. Рекомендовані мінімальні розміри шрифтів на десктопних пристроях — не менше 16 пікселів (або еквівалентний розмір шрифту).

Контраст кольорів. Забезпечте достатню контрастність між фоном і текстом, щоб зробити останній легкочитабельним. Згідно з рекомен­даціями WCAG 2.1 (рівень АА), контрастне співвідношення між текстом і фоном повинно бути не менше 4,5:1 для звичайного розміру шрифту та 3:1 для великого (14 пікселів або більше, або ж жирного шрифту 18 пікселів або більше).

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

•          Звертайте увагу на контрастність не тільки тексту, а й інших важ­ливих елементів інтерфейсу, таких як кнопки, посилання тощо.

•          Використовуйте інструменти для перевірки контрастності, які допо­можуть вам оцінити контрастність між кольорами на вашому веб­сайті. Це можуть бути, наприклад, такі інструменти, як Color Contrast Analyzer або Contrast Checker, що використовують формулу WCAG.

Додатково

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

•          Забезпечте достатній контраст між текстом і фоном, щоб текст був видимим і чітким.

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

•          Не варто використовувати тільки колір як єдиний спосіб передавання інформації. Використовуйте також текстові підказки або символи для зрозумілості.

•          Пам’ятайте, що деякі люди мають порушення сприйняття кольорів, тому не покладайтеся суто на відтінки кольорів для передавання важливої інформації.

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

Не забувайте про мобільні пристрої

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

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