Що входить в аудит вебдоступності

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

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

Але що ж саме перевіряється під час аудиту вебдоступності сайту?

Аудит — це не одна перевірка, а комплексна оцінка сайту за різними аспектами доступності.

Під час комплексного аудиту доступності зазвичай перевіряється:

• відповідність рекомендаціям WCAG
• семантика HTML сторінки
• навігація сайтом з клавіатури
• користування сайтом за допомогою скринрідера
• зручність форм та інших складних компонентів
• візуальна доступність інформації

Така перевірка виконується вручну і за допомогою автоматизованих інструментів.

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

Перевірка за WCAG

WCAG (Web Content Accessibility Guidelines) — це визнані світовою спільнотою рекомендації щодо забезпечення доступності контенту для всіх людей. Розробляє їх W3C (World Wide Web Consortium).

Критерії WCAG є загальноприйнятими настановами для забезпечення вебдоступності ресурсів.

Ці критерії покривають такі аспекти:

1. Сприйняття (Perceivable). Інформація на сторінці повинна бути доступною для сприйняття. Наприклад, видимою, достатньо контрастною, зображення чи відео повинні мати текстову альтернативу.
2. Керованість (Operable). Сайт має бути доступним для навігації різними засобами, в тому числі лише клавіатурою без використання миші.
3. Зрозумілість (Understandable). Інформація має бути зрозумілою, інтерфейс повинен мати чітку структуру, поведінка має бути передбачуваною.
4. Надійність (Robust). Контент має бути достатньо надійним для можливості інтерпретації допоміжними технологіями, наприклад, скринрідером.

Кожен з цих аспектів містить ряд рекомендацій.

Крім того, існує три рівні відповідності: A, AA, AAA.

Рівень A містить базові вимоги, тоді як рівень AAA забезпечує найвищий ступінь доступності. Загальноприйнятим і рекомендованим вважається рівень AA.

В аудит вебдоступності входить перевірка критеріїв WCAG відповідно до визначеного рівня.

Аналіз структури та семантики HTML

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

Семантика HTML відповідає за правильність використання тегів на сторінці. Наприклад, для позначення хедера, футера, заголовків, списків, посилань та кнопок мають бути використані відповідні HTML-теги.

Це впливає і на зручність користування сайтом, і на його зовнішній вигляд, і навіть на SEO (Search Engine Optimization).

Перевірка семантики та структури сторінки входить в аудит доступності сайту.

Під час аудиту вебдоступності перевіряється:

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

Перевірка клавіатурної доступності

Клавіатурна доступність сайту є важливою для всіх:

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

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

Під час тестування доступності здійснюється перевірка таких аспектів:

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

Цей етап вимагає ручного аналізу і не може бути повністю покритий автоматизованими інструментами.

Перевірка роботи зі скринрідером

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

Часто люди з порушенням зору сприймають сайт на слух. Тому особливо важливо надавати достатньо повну і зрозумілу інформацію про сторінку.

В аудит доступності сайту зазвичай входить етап перевірки сторінок за допомогою скринрідера.

Зокрема перевіряється:

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

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

Перевірка візуальної доступності

Цей етап тестування вебдоступності сайту передбачає перевірку:

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

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

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

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

Тому тестування візуальної доступності є важливою частиною аудиту вебдоступності продукту.

Перевірка складних компонентів

До складних елементів можна віднести:

• форми
• модальні вікна
• випадаючі списки
• меню
• каруселі

Їх тестування входить в аудит вебдоступності.

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

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

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

Перевірка форм потребує особливої уваги, адже щодо доступності форм є цілий перелік вимог. Зокрема, кожне поле повинно мати видиму назву (label), повинні бути інструкції щодо заповнення полів з особливою валідацією, помилки мають бути інформативними і зрозумілими.

Використання автоматичних інструментів

Аудит вебдоступності відбувається не лише вручну, а й з використанням автоматичних інструментів (як от Google Lighthouse).

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

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

Що отримує клієнт у результаті

Під час аудиту заповнюється звіт. Цей звіт містить список перевірених критеріїв доступності WCAG, опис проблем з поясненням та рівнем критичності, рекомендації щодо виправлення.

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

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