Розробка доступного програмного забезпечення має вирішальне значення для відділу програмування - так само, як і розробка програмного забезпечення без помилок.

Далі ми проаналізуємо інструменти, які слід використовувати для веб-тестування, щоб люди з обмеженими можливостями могли легко користуватися програмним забезпеченням.

Вступ до тестування доступності веб-продуктів

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

1. Якщо проект створений з використанням Reactвстановіть React ESLint і спробуйте виправити всі можливі веб-баги;
2. Активувати FastPass в розділі Accessibility Insights розширення для браузера, щоб знайти дві найпоширеніші помилки доступності та виправити їх;
3. Перегляньте веб-сайт за допомогою кнопки TAB, щоб протестувати навігацію за допомогою клавіатури і побачити, як працює фокус.

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

Далі ми детально проаналізуємо кожен пункт і спробуємо знайти найпопулярніші тренди та рекомендації щодо тестування веб-доступності у 2022 році.

Плагін ESLint

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

Плагін ESLint

Але погано, що він має обмежений функціонал:

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

Cypress AXE

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

Тому важливо проводити тестування веб-доступності як частину безперервної інтеграції (CI) проекту.

[highlight dark=”no”]Ми не рекомендуємо переносити програмний код в базу даних, якщо він тестується на веб-доступність.[/highlight]

Що стосується Cypress AXE, ми хотіли б відзначити, що він повністю заснований на сокирному ядрі.

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

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

Cypress AXE

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

Але ми хотіли б визнати, що використовувати Cypress AXE для аналізу сторінок, які містять проблеми з веб-доступністю, нелегко.

Розширення Axe

Це розширення для Google Chrome на основі axe.core.

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

Його слід використовувати для аналізу доступності, але слід пам’ятати, що ви повинні запускати програмне забезпечення щоразу, коли в ньому з’являються якісь доповнення або зміни.

[highlight dark=”no”]Зауважте![/highlight] Іноді програма показує некоректні дані - наприклад, якщо вона здатна аналізувати колір фону, вона повідомляє користувачеві, що текст має недостатній рівень кольорового контрасту.

Розширення Axe Extension

Інструмент “Контрастність” і тестування контрастності в Chrome DevTools

Іноді нам потрібно перевірити контрастність кольорів на незавершеному макеті або в іншому місці, де неможливо/важко відкрити розширення веб-браузера.

Щоб перевірити контрастність кольорів у веб-браузері, слід протестувати контрастність в Chrome DevTools або скористатися додатком Contrast, де ви можете вибрати пару кольорів за допомогою піпетки.

Інструмент “Контраст

Хромовий спектр

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

Хромовий спектр

Кнопка TAB

Переглядаючи програмне забезпечення за допомогою функції табуляції або, іншими словами, натискаючи на кнопку TAB для навігації між доступними інтерактивними елементами веб-сторінки, ми можемо тестувати:

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

Висновок

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

Слід пам’ятати, що будь-який веб-інструмент просто допомагає знайти деякі проблеми.

Щоб зберегти баланс між якістю та продуктивністю програмного забезпечення, необхідно оптимізувати баланс між ручним та автоматизованим тестуванням.