Перейти к руководству
screen-reader-testingавтор Seth Hobson

Screen Reader Testing Skill.

Навык для Claude Code и Codex в области дизайн-ревью: тестирует веб-приложения с помощью скринридеров VoiceOver, NVDA и JAWS.

  • Дизайн-ревью и доступность
  • Отчёт ревью
wshobson/agents · plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.mdSKILL.md
--- name: screen-reader-testing description: Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. --- ## When to Use This Skill ## Core Concepts ## VoiceOver (macOS) ## VoiceOver Testing Checklist ## NVDA (Windows) ## NVDA Test Script
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 12 020 символов полностью

01 Что делает

Что делает skill screen-reader-testing в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Тестирует веб-приложения с помощью программ экранного доступа VoiceOver, NVDA, JAWS, TalkBack и Narrator на платформах macOS, Windows, iOS и Android. Проверяет совместимость со скринридерами, отлаживает проблемы вспомогательных технологий и обеспечивает корректную реализацию ARIA через практическое тестирование с реальными скринридерами.

Охватывает навигацию, формы, объявления динамического контента, управление фокусом и модальные диалоги. Предоставляет команды для конкретных платформ, чек-листы тестирования и примеры кода для типовых паттернов доступности. Делает акцент на тестировании в разных режимах скринридера (обзор, фокус, приложение) и приоритет семантического HTML с ARIA как дополнительным улучшением.

Что он выдаёт

  • Чек-лист тестирования VoiceOver, охватывающий загрузку страницы, навигацию, ссылки, формы, динамический контент и таблицы
  • Тест-скрипт NVDA с пошаговыми инструкциями для первоначальной загрузки, ориентиров, заголовков, форм, интерактивных элементов и динамического контента
  • Примеры кода HTML с доступными паттернами и исправлениями типичных проблем: кнопки без подписей, динамический контент без объявлений и ошибки форм
  • Код JavaScript для управления фокусом, включая модальные диалоги, захват фокуса и навигацию с клавиатуры в интерфейсе вкладок
Смотрите пример запроса ↗

Как это работает

  1. 01
    Протестируйте с основными скринридерами по платформам

    Используйте NVDA с Firefox на Windows (31% использования), VoiceOver с Safari на macOS и iOS (15% использования), JAWS с Chrome (40% использования), TalkBack на Android (10% использования) и Narrator с Edge (4% использования).

  2. 02
    Перемещайтесь с помощью команд, специфичных для скринридера

    Выполняйте команды, такие как VO+Right Arrow для навигации по элементам в VoiceOver, H для перехода по заголовкам в NVDA, Insert+F7 для списков ссылок в JAWS и жест двумя пальцами для прокрутки в TalkBack.

  3. 03
    Тестируйте в режимах обзора и фокуса

    Проверьте, что скринридеры корректно переключаются между режимом обзора для чтения контента и режимом фокуса для взаимодействия с элементами управления форм, отслеживая объявления о смене режима.

  4. 04
    Проверьте семантическую структуру и ARIA

    Проверьте, что заголовки доступны через ротор или список элементов, ориентиры корректно подписаны, живые области (live regions) объявляют обновления, а роли, такие как dialog, tab и progressbar, реализованы правильно.

  5. 05
    Проверьте управление фокусом и взаимодействие с клавиатурой

    Убедитесь, что после отправки формы фокус перемещается к ошибкам, модальные окна корректно захватывают фокус и возвращают его при закрытии, а интерфейсы вкладок реагируют на стрелки, Home и End.

  6. 06
    Протестируйте объявления динамического контента

    Инициируйте обновления контента и убедитесь, что role="status" с aria-live="polite" объявляет изменения после текущей речи, тогда как role="alert" прерывает немедленно.

02 Определите своё применение

Когда использовать навык screen-reader-testing

Используйте навык screen-reader-testing в Claude Code или Codex, когда задача — дизайн-ревью такого рода. Применимость и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Проверка того, что веб-приложение корректно работает с программами экранного доступа
  • Проверка правильности реализации ролей, состояний и свойств ARIA
  • Отладка проблем, влияющих на пользователей вспомогательных технологий
  • Обеспечение доступности элементов управления форм с корректными подписями и объявлениями об ошибках
  • Проверка того, что обновления динамического контента объявляются пользователям скринридеров

Знайте границы

  • Использование только визуальной проверки для оценки доступности
  • Тестирование только успешных сценариев без проверки состояний ошибок и граничных случаев
  • Пропуск тестирования мобильных программ чтения с экрана на iOS и Android

03 Внутри скилла

Правила, которые skill screen-reader-testing задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Тестируйте с реальными программами чтения с экрана, а не с симуляторами

    Всегда тестируйте с использованием настоящего программного обеспечения для чтения с экрана (VoiceOver, NVDA, JAWS, TalkBack, Narrator), а не с помощью инструментов симуляции или эмуляторов.

  2. Сначала используйте семантический HTML, ARIA — вспомогательное средство

    Создавайте интерфейсы на основе нативных HTML-элементов, прежде чем добавлять атрибуты ARIA. ARIA дополняет семантический HTML, но не заменяет его.

  3. Минимальный охват: NVDA+Firefox, VoiceOver+Safari на macOS и iOS

    Как минимум, тестируйте с NVDA в паре с Firefox на Windows, VoiceOver с Safari на macOS и VoiceOver с Safari на iOS, прежде чем считать приложение проверенным.

  4. Тестируйте в режимах просмотра и фокуса

    Проверьте работу в режиме просмотра (для чтения контента с помощью клавиш со стрелками) и в режиме фокуса (для взаимодействия с элементами управления), так как программы чтения с экрана переключаются между ними автоматически или вручную.

  5. Тестируйте навигацию только с клавиатуры перед тестированием с программой чтения с экрана

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

  6. Проверяйте управление фокусом для single-page приложений

    Убедитесь, что фокус корректно управляется при динамическом изменении контента, особенно в SPA, где переходы между страницами происходят без полной перезагрузки.

  7. Никогда не тестируйте только с одной программой чтения с экрана

    Тестирования с одной программой чтения с экрана недостаточно. Разные программы чтения с экрана ведут себя по-разному на разных платформах.

  8. Всегда тестируйте динамический контент и состояния ошибок

    Не пропускайте тестирование контента, который обновляется динамически, и не ограничивайтесь только успешным сценарием. Динамический контент и обработка ошибок — самые частые источники проблем с доступностью.

04 Применение

Установите screen-reader-testing в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте screen-reader-testing в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

Общая форма CLI skills для plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по проверке дизайна

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Test the [checkout form] on [staging.example.com] with NVDA and VoiceOver to verify that all field labels are announced, required field indicators are read correctly, validation errors are communicated when the form is submitted with invalid data, and focus moves to the first error. Also confirm that the loading state during payment processing is announced and the success confirmation is read by the screen reader.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Проверьте, что заголовок страницы озвучивается при её загрузке
  • Убедитесь, что все заголовки доступны через ротор (VoiceOver) или список элементов (NVDA, JAWS)
  • Проверьте, что подписи озвучиваются вместе с соответствующими полями ввода
  • Убедитесь, что сообщения об ошибках озвучиваются при отправке форм с некорректными данными
  • Проверьте, что фокус корректно удерживается внутри модальных диалогов и не может выйти за их пределы

В OpenDesign импортируйте screen-reader-testing по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Repository
github.com/wshobson/agents Ветка main
Файл skill
plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 4236bb9
License
MIT Из LICENSE.
Звёзды репозитория
39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 skills в этом каталоге. Не рейтинг или счётчик использования для screen-reader-testing.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Когда использовать этот skillПеречисляет сценарии: проверка совместимости, тестирование ARIA, отладка вспомогательных технологий и проверка форм и навигации
  2. Основные концепцииОхватывает основные скринридеры по платформам и использованию, минимальный приоритет тестирования, а также режимы просмотра, фокуса и приложения
  3. VoiceOver (macOS)Инструкции по настройке, основные команды с модификаторами, навигация с помощью ротора, чек-лист тестирования и исправления типичных проблем HTML/ARIA
  4. NVDA (Windows)Настройка и команды, навигация по заголовкам и лендмаркам, переключение режимов просмотра и фокуса, а также поэтапный тестовый сценарий
  5. JAWS (Windows)Основные команды, включая виртуальный курсор, быстрые клавиши для типов элементов, режим форм и сочетания клавиш для навигации по таблицам
  6. TalkBack (Android)Переключатель настройки, жесты для навигации и активации, а также параметры детализации чтения
  7. Типичные тестовые сценарииДоступные паттерны с кодом: модальные диалоги с захватом фокуса, живые области (live regions) и вкладки с поддержкой клавиатуры
  8. Советы по отладкеФункция JavaScript для вывода доступного имени, роли, состояния и видимости элементов так, как их воспринимают скринридеры
  9. Лучшие практикиРекомендации и запреты: реальное тестирование, приоритет семантического HTML, тестирование режимов, управление фокусом и избегание проверки только одним скринридером
Собственное описание skill
«Тестирует веб-приложения с помощью программ чтения с экрана, включая VoiceOver, NVDA и JAWS. Используйте при проверке совместимости с программами чтения с экрана, отладке проблем доступности или обеспечении поддержки вспомогательных технологий.»

Описание из front-matter в SKILL.md. Полный файл составляет около 12 020 символов. Прочитайте полный файл на GitHub.

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

Запустите screen-reader-testing на реальной задаче проверки дизайна.

Скачайте OpenDesign, импортируйте screen-reader-testing по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Терминал
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows