Як тестувати сайт скрін-рідером NVDA — покрокова інструкція
NVDA (NonVisual Desktop Access) — безкоштовний скрін-рідер з відкритим кодом для Windows. Це найпоширеніший скрін-рідер у світі: за даними WebAIM Screen Reader Survey, 41% незрячих користувачів використовують NVDA як основний інструмент.
Тестування з NVDA — обов'язковий крок перевірки доступності. Автоматичні інструменти виявляють лише ~40% помилок WCAG. Решта — тільки через реальний досвід скрін-рідера.
Факт: Понад 7,5 мільйонів людей у світі використовують NVDA щодня. Якщо ваш сайт некоректно працює з NVDA — значна частина вашої аудиторії просто не може ним скористатися.
Що таке NVDA?
NVDA — безкоштовна програма, що читає вголос вміст екрана для людей з порушеннями зору. Вона:
- Озвучує текст, заголовки, посилання, кнопки та їхні стани
- Описує зображення (за умови наявності alt-тексту)
- Повідомляє про помилки у формах
- Оголошує динамічний контент (notifications, alerts)
- Дозволяє навігувати сайтом без миші
Для розробника або QA-спеціаліста NVDA — це спосіб поставити себе на місце незрячого користувача і виявити проблеми, які жоден автоматичний інструмент не знайде.
Як встановити та налаштувати
Встановлення
- Перейдіть на nvaccess.org
- Натисніть "Download NVDA" (безкоштовно, пожертва за бажанням)
- Запустіть installer
- При першому запуску — вибір: встановити чи запустити тимчасово (для тестування — тимчасовий запуск достатній)
Базове налаштування для тестування
При першому запуску NVDA відкриє діалог вітання. Рекомендовані налаштування для тестування:
- Syntheziser: eSpeak NG (безкоштовний, вбудований) або SAPI 5 Ukrainian для кращої вимови
- Швидкість мовлення: знизьте до 60-70% (NVDA → Preferences → Settings → Speech → Rate)
- Мова інтерфейсу: Ukrainian (якщо доступна)
Встановлення українського синтезатора (опціонально)
Для точнішої вимови українського тексту:
- NVDA Menu (NVDA+N) → Preferences → Settings → Speech
- Synthesizer: виберіть SAPI 5 або OneCore (Windows 10/11)
- Voice: Ukrainian (якщо встановлена в системі)
Українські голоси можна встановити через: Windows Налаштування → Час і мова → Мовлення → Додати голоси.
Основні комбінації клавіш
NVDA Key = Insert (або Caps Lock якщо обрано)
Базова навігація
| Клавіша | Дія |
|---|---|
Tab | Наступний інтерактивний елемент |
Shift+Tab | Попередній елемент |
Enter | Активувати посилання / кнопку |
Space | Активувати кнопку / checkbox |
NVDA+Tab | Прочитати поточний фокус |
NVDA+T | Прочитати заголовок сторінки |
Browse Mode (перегляд сторінки)
| Клавіша | Дія |
|---|---|
H | Наступний заголовок |
Shift+H | Попередній заголовок |
1-6 | Заголовок рівня 1-6 |
F | Наступне поле форми |
K | Наступне посилання |
B | Наступна кнопка |
G | Наступне зображення |
T | Наступна таблиця |
D | Наступний landmark |
L | Наступний список |
I | Наступний елемент списку |
Для форм (Forms Mode)
| Клавіша | Дія |
|---|---|
Enter | Увійти в Forms Mode (поле вводу) |
Escape | Вийти з Forms Mode |
Space | Toggle checkbox |
Alt+Стрілки | Вибір у <select> |
Корисні команди
| Клавіша | Дія |
|---|---|
NVDA+F7 | Список елементів (заголовки / посилання / орієнтири) |
NVDA+Space | Перемикання Browse/Focus mode |
NVDA+N | NVDA меню |
Insert+Q | Вийти з NVDA |
Control | Зупинити читання |
Як тестувати форми
Форми — найскладніше для скрін-рідерів і найкритичніше для бізнесу.
Базовий тест форми:
- Перейдіть до форми клавішею
TabабоF - NVDA має оголосити: підпис поля + тип поля ("Email, редаговане поле")
- Почніть вводити текст — NVDA автоматично переходить у Forms Mode
- Натисніть
EnterабоTabдля переходу до наступного поля
Що має озвучувати NVDA:
// Правильно:
"Електронна пошта, редаговане поле"
"Пароль, захищене поле"
"Пам'ятати мене, чекбокс, не відмічено"
"Увійти, кнопка"
// Неправильно (немає підпису):
"Редаговане поле"
"Захищене поле"
"Кнопка"
Тестування валідації форми:
- Відправте порожню форму
- NVDA має озвучити повідомлення про помилку
- Помилка повинна бути асоційована з полем: "Електронна пошта, недійсне, будь ласка введіть коректний email"
<!-- Правильна реалізація -->
<input
type="email"
id="email"
aria-invalid="true"
aria-describedby="email-error"
/>
<p id="email-error" role="alert">Введіть коректну email-адресу</p>
Як тестувати навігацію
Перевірка структури заголовків:
- Натисніть
NVDA+F7→ оберіть "Заголовки" - Перегляньте список заголовків — чи логічна структура?
- Перейдіть по H-клавіші — чи всі важливі секції мають заголовки?
Типові проблеми:
- "Кнопка" замість назви кнопки → відсутній aria-label або текст
- Молчання при переході до зображення → відсутній alt-текст
- "Посилання" без тексту → посилання-іконка без aria-label
Перевірка навігації по landmark-елементах:
NVDA+F7→ "Орієнтири (Landmarks)"- Повинні бути: banner, navigation, main, contentinfo
- Якщо список порожній — сайт не має семантичної структури
Тест модального вікна:
- Відкрийте модальне вікно (кнопкою)
- NVDA має оголосити: назву діалогу та перший елемент всередині
- Tab — переміщення тільки всередині модалки (не за межі)
- Escape — закриття, фокус повертається до кнопки, що відкрила вікно
Типові помилки, які знаходить скрін-рідер
1. "Зображення" замість опису NVDA каже лише "зображення" або "graphic" — відсутній alt-текст.
2. Порожні посилання NVDA каже "посилання" без тексту — іконка-посилання без aria-label.
3. "Редаговане поле" без підпису
Поле форми без <label> — незрозуміло для чого.
4. Декоративні зображення без alt=""
NVDA читає ім'я файлу: "DSC_00482_final_v3.jpg" — заплутує користувача.
5. Кнопка "Кнопка"
Кастомна кнопка <div role="button"> без aria-label або тексту.
6. Порожній заголовок
Візуально великий текст реалізований через CSS на <p>, а не <h2> — NVDA не знаходить його при навігації по заголовках.
7. Focus trap Фокус застряє у modal або dropdown — немає можливості вийти клавішею Escape або Tab.
VoiceOver на Mac — короткий гайд
Увімкнення: Command+F5 або через Сири: "Turn on VoiceOver"
Основні клавіші:
| Клавіша | Дія |
|---|---|
VO+H | Звукова довідка |
VO+A | Читати від початку |
Tab | Наступне інтерактивне |
VO+Command+H | Наступний заголовок |
VO+Command+J | Наступне поле форми |
VO+U | Rotor (список елементів) |
Escape | Закрити VoiceOver або поточну дію |
VO = Control+Option
VoiceOver більш популярний серед iOS-користувачів і на Mac. Для тестування вебсайтів Chrome + NVDA (Windows) або Safari + VoiceOver (Mac) — стандартна комбінація QA.