Перейти к руководству
accessibility-reviewавтор Anthropic

Accessibility Review Skill.

Скилл Claude Code и Codex для проверки дизайна: аудит WCAG 2.1 AA дизайна или страницы — контраст, клавиатура, размеры сенсорных целей.

  • Дизайн-ревью и доступность
  • Отчёт ревью
anthropics/knowledge-work-plugins · design/skills/accessibility-review/SKILL.mdSKILL.md
--- name: accessibility-review description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff. --- ## Usage ## Testing Approach ## Output ## Accessibility Audit: [Design/Page Name] ## If Connectors Available ## Tips
Метаданные и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 4 248 символов полностью

01 Что делает

Что делает Skill accessibility-review в Claude Code и Codex

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

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

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

Регламент аудита WCAG 2.1 AA для макета или страницы, запускаемый фразами вроде "audit accessibility" или "check a11y" и принимающий в качестве аргумента ссылку на Figma, URL или описание.

Он содержит сжатую краткую справку из одиннадцати критериев по принципам «Воспринимаемость», «Управляемость», «Понятность» и «Надёжность»: контраст 4.5:1 для обычного текста, 3:1 для крупного текста и элементов интерфейса, доступ с клавиатуры, видимый фокус и цели касания 44x44 CSS-пикселя, а также восемь распространённых проблем и подход к тестированию из пяти шагов, который начинается с автоматического сканирования, выявляющего примерно 30% проблем. Результаты попадают в отчёт в фиксированном формате Markdown с подсчётом по уровням серьёзности, таблицами по каждому принципу, разделами о контрасте, клавиатуре и экранных дикторах и приоритизированными исправлениями.

Что он выдаёт

  • Отчёт об аудите доступности в формате markdown, в шапке которого указаны название дизайна или страницы и стандарт WCAG 2.1 AA.
  • Раздел с результатами, разбитый на таблицы по принципам «Воспринимаемость», «Управляемость», «Понятность» и «Надёжность» со столбцами: проблема, критерий, серьёзность и рекомендация.
  • Отдельные таблицы по цветовому контрасту, навигации с клавиатуры и экранным дикторам, включая объявляемое имя для каждого элемента.
  • Упорядоченный по приоритету список исправлений, который отделяет критичные исправления, блокирующие пользователей, от крупных улучшений и мелких необязательных доработок.
Смотрите пример запроса ↗

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

  1. 01
    Передайте объект аудита

    Команда принимает в качестве аргумента ссылку на Figma, URL страницы или письменное описание и проверяет указанный объект.

  2. 02
    Проверьте одиннадцать критериев уровня AA

    Краткая справка группирует критерии по принципам «Воспринимаемость», «Управляемость», «Понятность» и «Надёжность», каждый с номером критерия успеха и пороговым значением.

  3. 03
    Выполните пять этапов тестирования

    Автоматическое сканирование, навигация только с клавиатуры, тестирование с экранным диктором, проверка контраста и масштаб 200% — именно в этом порядке.

  4. 04
    Соблюдайте фиксированную структуру отчёта

    Один отчёт в Markdown со сводкой по серьёзности, таблицей результатов по каждому принципу и отдельными таблицами по контрасту, клавиатуре и экранным дикторам.

  5. 05
    Используйте коннекторы, если они доступны

    При подключённом инструменте дизайна он считывает из Figma значения цветов, размеры шрифтов и цели касания; при подключённом трекере проектов он создаёт отдельные задачи по каждому результату.

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

Когда использовать Skill accessibility-review

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

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

  • Проверка макета на цветовой контраст, навигацию с клавиатуры, размер целей касания или поведение экранного диктора перед передачей в разработку.
  • Аудит готовой страницы, если вы можете передать ей URL.
  • Чтение значений цвета, размеров шрифта и зон касания прямо из файла Figma, когда подключён инструмент дизайна.
  • Превращение аудита в отслеживаемую работу: создание тикета на каждую находку и привязка их к существующим эпикам по исправлению.

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

  • Отношение к аудиту как к полному покрытию: автоматическое сканирование пропускает большинство проблем, и по-прежнему требуется реальное тестирование со вспомогательными технологиями.

Что предоставить

  • Сам дизайн или ссылка на страницуПодставляется в инструкцию аудита в качестве первого аргумента.

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

Правила, которые Skill accessibility-review задаёт Claude Code и Codex

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

  1. Требуйте от компонентов UI контраста 3:1

    Согласно критерию 1.4.11 для компонентов UI и графики требуется контраст нетекстовых элементов не менее 3:1.

  2. Обеспечьте зоны касания 44x44

    Зоны касания должны быть не менее 44x44 CSS-пикселей согласно критерию 2.5.5.

  3. Сделайте всё доступным с клавиатуры

    Вся функциональность должна быть доступна с клавиатуры (2.1.1) при наличии видимого индикатора фокуса (2.4.7).

  4. Масштаб 200 %: зачёт или незачёт

    Макет проверяется при масштабе 200 %, и при нарушении вёрстки выставляется отметка.

  5. Привязывайте каждую находку к критерию

    В каждой строке таблицы находок указан критерий WCAG вместе с проблемой, степенью серьёзности и рекомендацией.

  6. Оценивайте серьёзность как критическую, значительную или незначительную

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

  7. Начните с контраста и клавиатуры

    Skill по умолчанию начинает с контраста и клавиатуры, поскольку они выявляют самые распространённые и значимые проблемы.

04 Применение

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

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

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

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

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

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

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

Starter prompt
Audit accessibility for [Figma URL for the checkout flow] before we hand it to engineering. Start with contrast and keyboard access, and flag anything that would block a screen reader user as critical.

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

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

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

  • Пройдите всё только с помощью клавиатуры.
  • Проверьте с помощью VoiceOver или NVDA, а не полагайтесь на аудит.
  • Сверьте фактические коэффициенты контраста с требуемыми значениями.
  • Исправляйте приоритетные проблемы по порядку: сначала блокирующие, потом косметические.

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

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

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

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

Author
Anthropic
Файл skill
design/skills/accessibility-review/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 8f877b6
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
24 012 Снимок GitHub сделан 2026-09-14 для всего репозитория anthropics/knowledge-work-plugins, который содержит 7 навыков в этом каталоге. Не является оценкой или счётчиком использования accessibility-review.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. ИспользованиеПоказывает форму команды и то, как аргумент подставляется в аудит.
  2. Краткий справочник WCAG 2.1 AAОдиннадцать критериев с пороговыми значениями в разделах «Воспринимаемость», «Управляемость», «Понятность» и «Надёжность».
  3. Частые проблемыВосемь повторяющихся ошибок — от контраста и подписей к полям форм до ловушек фокуса и ограничений по времени.
  4. Подход к тестированиюПять проходов: автоматическая проверка, клавиатура, скринридер, контраст, масштаб 200%.
  5. РезультатШаблон отчёта со сводкой по критичности, таблицами по принципам, строками контраста и приоритетными исправлениями.
  6. Если доступны коннекторыЧто меняется при подключении инструмента дизайна или трекера задач.
  7. СоветыНачните с контраста и клавиатуры, тестируйте реальными вспомогательными технологиями, расставляйте приоритеты по влиянию.
Собственное описание skill
Проведите аудит доступности WCAG 2.1 AA для дизайна или страницы. Активируется командами «audit accessibility», «check a11y», «is this accessible?» или при проверке дизайна на цветовой контраст, навигацию с клавиатуры, размер области касания или поведение программы чтения с экрана перед передачей.

Описание из заголовка SKILL.md. Полный файл содержит около 4 248 символов. Читайте полный файл на GitHub.

Проверка доступности

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

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

Терминал
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

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

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

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

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

Для macOS и Windows