accessibility-complianceавтор Seth Hobson

Accessibility Compliance Skill.

Skill для Claude Code и Codex: интерфейсы, соответствующие WCAG 2.2, с поддержкой мобильной доступности и вспомогательных технологий.

Дизайн-ревью и доступность
UI-код

Скачать OpenDesign Инструкция по использованию

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

Вводная часть и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 2 402 символа

01 Что делает

Что делает skill accessibility-compliance в Claude Code и Codex

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

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

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

Этот skill реализует интерфейсы, соответствующие WCAG 2.2, с поддержкой мобильной доступности и ассистивных технологий. Он ведёт агентов через семантический HTML, ARIA-паттерны, навигацию с клавиатуры, управление фокусом, совместимость со скринридерами и объявления динамического контента. Skill охватывает iOS VoiceOver, Android TalkBack и настольные скринридеры (NVDA, JAWS).

Здесь делается упор на нативные элементы вместо собственного ARIA, учитываются пользовательские предпочтения вроде prefers-reduced-motion и prefers-contrast, а также проводятся проверки с помощью автоматических инструментов (axe DevTools, WAVE, Lighthouse) и реальных вспомогательных технологий. Skill разбирает типичные нарушения: отсутствие альтернативного текста, плохой контраст, ловушки клавиатуры и поля формы без меток.

Что он выдаёт

Интерфейсы, соответствующие WCAG 2.2, с корректными ARIA-паттернами, управлением фокусом и поддержкой экранных дикторов

Смотрите пример запроса ↗

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

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

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

Когда использовать skill accessibility-compliance

Используйте skill accessibility-compliance в Claude Code или Codex, когда задача — это design review такого типа. Применимость и ограничения ниже взяты из собственного файла skill.

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

Внедрение соответствия WCAG 2.2 уровня AA или AAA для веб-приложения или сайта
Создание интерфейсов, доступных для экранных дикторов: VoiceOver, NVDA, JAWS или TalkBack
Добавление навигации с клавиатуры и управления фокусом в интерактивные компоненты
Проведение аудита доступности и исправление нарушений в существующих интерфейсах
Поддержка в интерфейсе пользовательских предпочтений: уменьшенное движение и высокий контраст

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

Что accessibility-compliance Skill приносит в процесс анализа дизайна

2 действия, которые SKILL.md предписывает выполнить Claude Code или Codex, в том порядке, как они указаны в файле.

Лучшие практики
Предпочитайте нативные элементы ARIA, когда это возможно; включайте людей с инвалидностью в пользовательское тестирование; проектируйте взаимодействия, работающие без мыши
Инструменты тестирования
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (зрение), Silktide (различные нарушения)

04 Применение

Установите accessibility-compliance в Claude Code или Codex

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

Добавьте accessibility-compliance в Claude Code, Codex или ваш агент

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

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

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

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

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

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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

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

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

Проверяйте вручную с помощью VoiceOver на macOS или iOS, чтобы убедиться в правильности объявлений и навигации экранного диктора
Используйте симуляторы зрения, например NoCoffee, и симуляторы нарушений, например Silktide, чтобы проверить разные виды нарушений

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

Скачать OpenDesign Читать quickstart

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

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

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

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

Внутри SKILL.md

Когда использовать этот SkillСоответствие WCAG, экранные дикторы, навигация с клавиатуры, управление фокусом, формы, доступность на мобильных устройствах, аудит
Подробные паттерны и разобранные примерыУказывает на references/details.md с документацией по паттернам, когда общей инструкции недостаточно
Лучшие практикиВосемь основных правил: семантический HTML, тестирование на реальных пользователях, приоритет клавиатуры, стили фокуса, текстовые альтернативы, масштабирование, live-регионы, предпочтения
Частые проблемыОтсутствие альтернативного текста, плохой контраст, ловушки клавиатуры, поля без меток, автовоспроизведение, плохие собственные элементы управления, ссылки пропуска, порядок фокуса
Инструменты тестированияАвтоматические инструменты (axe, WAVE, Lighthouse), ручная проверка экранными дикторами (VoiceOver, NVDA, JAWS, TalkBack), симуляторы (NoCoffee, Silktide)

Собственное описание skill

«Реализует интерфейсы, соответствующие WCAG 2.2, с мобильной доступностью, инклюзивными паттернами дизайна и поддержкой вспомогательных технологий. Используется при аудите доступности, реализации ARIA-паттернов, разработке для программ чтения с экрана или обеспечении инклюзивного пользовательского опыта.»

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

Соответствие доступности

Запустите accessibility-compliance на реальной задаче анализа дизайна.

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

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance