Завдяки поточним оновленням Onepage орієнтується на вимоги WCAG 2.1 Level AA та суттєво покращує безбар’єрність ваших сайтів.
Onepage впровадив комплексні технічні вдосконалення у сфері безбар’єрності. Більшість із них працюють автоматично у фоновому режимі, тож ваші наявні проєкти отримають ці покращення після наступної публікації.
📌 Примітка: Вам потрібно один раз повторно опублікувати свій сайт, щоб усі покращення стали активними. Дизайн вашого сайту при цьому не зміниться.
Технічні вдосконалення
Було оптимізовано багато важливих технічних аспектів:
Покращена підтримка скрінрідерів (кнопки мають коректні підписи, поточна сторінка в навігації позначається, Alt-тексти доповнені)
Повна керованість із клавіатури (усі пункти меню, кнопки та посилання доступні з клавіатури, додано посилання «Skip to content»)
Помітні фокус-індикатори для всіх інтерактивних елементів
Покращена доступність форм (лейбли правильно пов’язані, помилки озвучуються, обов’язкові поля оголошуються завчасно)
Оновлені віджети (випадні списки, повзунки, календарі, завантаження файлів тощо)
Покращені модальні вікна та оверлеї (фокус залишається всередині діалогу, клавіша Escape закриває вікно, cookie-банер став доступним)
Семантична структура сторінки (HTML-структура з використанням справжніх елементів-ландмарок замість загальних div-блоків)
Безбар’єрні шаблони (із перевіреним контрастом кольорів, логічною структурою заголовків, коректними Alt-текстами та попередньо налаштованою структурою сторінки)
📌 Примітка: Заплановано подальші вдосконалення, зокрема нові покращення безбар’єрності в редакторі та постійне розширення технічних стандартів.
Структура сторінки: Header, основний вміст і Footer
Тепер Ви можете призначати окремим секціям Вашої сторінки семантичну роль:
Верхній колонтитул (Шапка)
Основний вміст (Основна частина)
Нижній колонтитул (Підвал)
Це покращує зокрема:
навігацію для користувачів screen reader
керування за допомогою клавіатури
семантичну HTML-структуру Вашої сторінки
відповідність стандартам WCAG
Налаштування знаходиться безпосередньо в потрібній секції редактора в розділі «Розташування».
Для цього натисніть на три крапки у правому верхньому куті потрібної секції та виберіть відповідну роль, наприклад «Шапка» для Меню.
та «Підвал» для Футеру.
Також можна визначити кілька секцій одночасно як верхній колонтитул (Шапка) або нижній колонтитул (Футер).
У структурі сторінки Ви тепер можете бачити, як Ваші секції семантично побудовані та організовані з точки зору доступності (Безбар'єрності).
Також у налаштуваннях сторінки, на вкладці «SEO» в розділі «Структура landmark», відображається структура Вашої сторінки.
Це додатково допомагає пошуковим системам краще розуміти структуру та організацію Вашого вебсайту.
📌 Примітка: Ці налаштування слід виконати на всіх підсторінках Вашого вебсайту.
Масштабування жестом (Pinch-to-Zoom) на мобільних пристроях
Тепер відвідувачі Вашого вебсайту знову можуть вільно збільшувати та зменшувати масштаб сторінки за допомогою жестів пальцями на мобільних пристроях.
Це особливо важливо для:
людей із порушеннями зору;
забезпечення доступності на мобільних пристроях.
Цюфункцію реалізовано навмисно для покращення доступності.
Щоб зміни стали помітними для відвідувачів, опублікуйте Ваш вебсайт.
Зменшення руху (Reduce Motion)
Onepage автоматично враховує системне налаштування відвідувача «Зменшення руху» (Reduce Motion).
Якщо це налаштування активоване на пристрої користувача, анімації та відео автоматично будуть зменшені або вимкнені. Це стосується, наприклад:
анімацій під час прокручування сторінки;
ефектів появи елементів;
анімацій чисел і статистики;
ефектів слайдерів;
а також відео, які відтворюються автоматично.
Вам не потрібно налаштовувати це вручну, усе відбувається автоматично.
Щоб зміни набули чинності, просто повторно опублікуйте Ваш вебсайт, якщо з моменту останньої публікації (оновлення) минуло вже певний час.
Доступні шаблони (безбар'єрні шаблони)
Наші нові шаблони спеціально розроблені для того, щоб вебсайти з самого початку будувалися зі структурно правильною та доступною архітектурою. Вони забезпечують надійну основу для кращої зручності користування та більшого охоплення аудиторії, а також відповідають важливим стандартам вебдоступності.
Перевага полягає в тому, що Вам не потрібно самостійно турбуватися про технічні деталі, такі як правильна структура орієнтирів (landmarks), контрастність кольорів або ієрархія заголовків — усе це вже враховано в шаблоні. Завдяки цьому сторінки відразу краще читаються програмами зчитування з екрана (screen readers), мають більш зрозумілу структуру для користувачів і загалом виглядають професійніше.
Крок 1: Створення проєкту
Щоб створити новий проєкт, перейдіть до списку Ваших проєктів у своєму акаунті та натисніть синю кнопку «Створити проєкт» у верхньому правому куті.
Або ж Ви можете створити нову сторінку в уже існуючому проєкті.
Крок 2: Вибір шаблону
Перейдіть на вкладку «Оптимізовано для доступності». Там Ви знайдете 10 шаблонів, спеціально створених нашою командою дизайнерів. Ви можете спокійно переглянути всі варіанти та вибрати той шаблон, який Вам найбільше підходить.
Після цього Ви можете, як зазвичай, розпочати редагування та додати власний контент.
📌 Примітка: Шаблони вже структурно та технічно оптимізовані з урахуванням вимог доступності (контрастність кольорів, логіка заголовків, структура орієнтирів (landmarks)).
Однак якщо Ви згодом внесете значні зміни до макета, кольорової гами або структури сторінки, частина цих переваг щодо доступності може бути втрачена.
Тому ми рекомендуємо під час налаштування шаблону стежити за тим, щоб контрастність і логічна структура сторінки залишалися зрозумілими та зручними для користувачів.
Користувацькі атрибути (для досвідчених користувачів)
Тепер Ви можете призначати окремим секціям власні ID, класи та data-атрибути.
Ця функція насамперед призначена для досвідчених користувачів, які використовують власні програмні рішення та хочуть цілеспрямовано працювати з певними частинами свого вебсайту, наприклад для кастомних скриптів, анімацій або зовнішніх інструментів.
Це особливо корисно для:
налаштувань доступності (безбар'єрності);
власного коду та зовнішніх скриптів;
створення точок прокрутки (scroll targets) або якірних посилань;
AI / Vibe Coding / інтеграцій.
За допомогою цих атрибутів окремі секції або елементи можна однозначно ідентифікувати та використовувати у власному коді.
Для цього натисніть на три крапки у правому верхньому куті потрібної секції, потім виберіть «Користувацькі атрибути» та додайте свій ID, клас або data-атрибут.
📌 Примітка: Onepage надає цю функцію, але не займається створенням індивідуального кастомного коду.
Ви можете або скористатися нашою ШІ-функцією (Vibe Coding) для цільового налаштування окремих елементів, або створити власний код самостійно.
Зверніть увагу, що ми можемо лише обмежено допомагати з індивідуальними реалізаціями та налаштуванням власного коду.
Масштабування viewport
У Налаштуваннях проєкту → SEO → Доступність → Масштабування viewport Ви можете керувати поведінкою масштабування (zoom) на мобільних пристроях.
Це впливає на:
масштабування на смартфонах;
поведінку браузера Safari під час роботи з полями форм;
безбар'єрність на мобільних пристроях.
📌 Примітка: Увімкнене масштабування значно покращує доступність сайту для користувачів.
Додаткові заходи для покращення ,безбар'єрності
Окрім технічних покращень, які надає Onepage, Ви також можете самостійно підвищити доступність свого вебсайту за допомогою:
хорошого контрасту кольорів;
логічної структури заголовків;
альтернативних текстів (Alt-текстів) для зображень;
зрозумілого та доступного змісту.
Більше інформації Ви знайдете тут: Поради щодо створення доступного контенту.
Поширені питання та їх вирішення
Чи потрібно заново опублікувати мій вебсайт?
Чи потрібно заново опублікувати мій вебсайт?
Так, після внесення змін до налаштувань безбар'єрності або інших параметрів сайту рекомендується повторно опублікувати вебсайт, щоб усі зміни стали активними та були застосовані до опублікованої версії сторінки.
Чи зміниться через це дизайн мого сайту?
Чи зміниться через це дизайн мого сайту?
Ні, усі зміни мають виключно технічний характер. Дизайн, макет і зовнішній вигляд Вашого сайту залишаться без змін.
Чи є мій вебсайт тепер повністю безбар'єрним?
Чи є мій вебсайт тепер повністю безбар'єрним?
Технічну основу було значно покращено. Однак відповідальність за контент (тексти, зображення, кольори) і надалі залишається за Вами.
Що означає WCAG 2.1 AA?
Що означає WCAG 2.1 AA?
WCAG означає Web Content Accessibility Guidelines (Рекомендації щодо доступності вебконтенту). У цьому випадку йдеться про версію 2.1, рівень AA.
Це міжнародний стандарт цифрової доступності для вебсайтів та вебзастосунків.
Чому відео, анімації або рухомі елементи на моєму сайті раптом не відображаються?
Чому відео, анімації або рухомі елементи на моєму сайті раптом не відображаються?
У більшості випадків це пов’язано з увімкненим системним налаштуванням «Зменшити рух» (Reduce Motion). Це налаштування зменшує або повністю вимикає анімації, рухомі ефекти та в деяких випадках навіть певні відео.
Важливо: це налаштування вмикається не в браузері, а на рівні операційної системи пристрою користувача.
Такі браузери, як Chrome, Safari або Firefox, автоматично враховують це налаштування через CSS media query prefers-reduced-motion і відповідно зменшують або вимикають анімації для покращення доступності та комфорту користувачів.
Залежно від пристрою це налаштування можна знайти тут:
macOS: Системні налаштування → Універсальний доступ → Дисплей → «Зменшити рух»
iPhone / iPad: Налаштування → Універсальний доступ → Рух → «Зменшити рух»
Windows 11: Налаштування → Спеціальні функції→ Візуальні ефекти → «Ефекти анімації»
Windows 10: Налаштування → Спеціальні можливості → Дисплей → «Відображати анімації в Windows»
Android: Налаштування → Спеціальні можливості → «Вимкнути анімації» (назва може відрізнятися залежно від виробника пристрою)
Linux (GNOME): Налаштування → Спеціальні можливості → «Зменшити анімації»
Як протестувати це в браузері
Для тестування функцію також можна імітувати безпосередньо в Chrome DevTools:
Відкрийте інструменти розробника клавішею F12.
Натисніть Cmd/Ctrl + Shift + P.
Введіть команду:
Emulate CSS prefers-reduced-motion: reduce
Це дозволяє швидко перевірити, як виглядатиме та працюватиме вебсайт із увімкненим режимом зменшення руху, не змінюючи системні налаштування пристрою.
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂