HTML Academy · Урок

Тестирование с экранными дикторами

Используйте VoiceOver и NVDA для проверки реализаций ARIA

«Тестирование с экранными дикторами» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Зачем тестировать с программами чтения с экрана?

Автоматизированные инструменты выявляют только 30–40% проблем доступности. Тестирование с настоящими программами чтения с экрана обнаруживает проблемы, которые пропускают автоматические проверки:

Непонятный порядок чтения
Неполезные объявления ARIA
Отсутствие управления focus
Непонятные интерактивные шаблоны

VoiceOver на Mac

VoiceOver встроен в macOS — устанавливать его не нужно:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver на iOS

Тестируйте работу мобильной программы чтения с экрана с VoiceOver на iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA в Windows

NVDA — бесплатная программа чтения с экрана с открытым исходным кодом для Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Контрольный список тестирования с программой чтения с экрана

Что нужно проверить с помощью программы чтения с экрана:

Заголовок страницы объявляется при загрузке
Заголовки создают логичную структуру навигации
У всех изображений есть содержательный или пустой текст alt
У всех полей формы есть подписи
У кнопок и ссылок есть описательные имена
Ловушка focus модального окна работает правильно
Обновления динамического содержимого объявляются

Распространённые ошибки программ чтения с экрана

Проблемы, которые пропускают автоматические тесты:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Тестирование с приоритетом клавиатуры

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

Отключите мышь или трекпад
Перемещайтесь по всей странице только с помощью Tab
Убедитесь, что до каждого интерактивного элемента можно добраться
Убедитесь, что все действия можно выполнить с клавиатуры

Инструменты автоматизированного тестирования доступности

Дополняйте ручное тестирование автоматизированными инструментами:

axe DevTools — расширение для Chrome; наиболее точный автоматизированный проверяющий инструмент
WAVE — wavebooth.com; визуальный слой поверх страницы
Lighthouse — Chrome DevTools; проверка производительности и доступности
pa11y — инструмент CLI; отлично подходит для конвейеров CI/CD

Справочник шаблонов ARIA

Руководство W3C по практикам создания ARIA (APG) содержит эталонные реализации:

Аккордеон, оповещение, диалоговое окно оповещения
Хлебные крошки, кнопка, карусель
Флажок, комбинированное поле, диалоговое окно
Раскрытие, Feed, сетка
Список выбора, меню, панель меню
Вкладка, всплывающая подсказка, древовидное представление

URL: w3.org/WAI/ARIA/apg/

Непрерывная интеграция проверки доступности

Встройте тестирование доступности в рабочий процесс:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Итоги тестирования

Полная стратегия тестирования доступности:

Проектирование — проверяйте контраст цветов и размеры областей касания
Разработка — тестируйте клавиатуру и выполняйте автоматическую проверку с помощью axe
Проверка — тестируйте с программами чтения с экрана (VoiceOver и NVDA)
CI/CD — используйте pa11y или axe в автоматизированном конвейере
Рабочая среда — Lighthouse и выборочные ручные проверки

Быстрая проверка

Какой процент проблем доступности автоматизированные инструменты могут надёжно выявить?

Итоги: тестирование с программами чтения с экрана

Основы тестирования:

VoiceOver (Mac/iOS) и NVDA (Windows) бесплатны и необходимы
Сначала тестируйте только с клавиатурой, затем добавляйте программу чтения с экрана
Автоматизированные инструменты: axe, WAVE, Lighthouse, pa11y
Автоматизированные тесты выявляют только около 30–40% проблем
Для правильной реализации ARIA используйте шаблоны из APG

Часто задаваемые вопросы

Урок «Тестирование с экранными дикторами» бесплатный?

Да — полный текст урока «Тестирование с экранными дикторами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Тестирование с экранными дикторами»?

Используйте VoiceOver и NVDA для проверки реализаций ARIA Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Тестирование с экранными дикторами»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

aria-expanded и aria-controls для переключателей
aria-selected и шаблоны вкладок
Живые области: aria-live aria-atomic aria-relevant
Тестирование с экранными дикторами

← Назад к HTML Academy