Перейти к руководству
fixing-accessibilityавтор Julien Thibeaut

Fixing Accessibility Skill.

Навык для Claude Code и Codex в области обзора дизайна: проверяет и исправляет ошибки ARIA, клавиатуры, фокуса, контраста и форм.

  • Дизайн-ревью и доступность
  • Отчёт ревью
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 4 714 символов полностью

01 Что делает

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

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

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

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

Справочно-исправительный набор правил для доступности HTML, предназначенный для дизайнеров и разработчиков, добавляющих или проверяющих интерактивный UI в агенте для кода. Он ранжирует девять категорий правил по приоритету и влиянию: от доступных имён, клавиатурного доступа, фокуса и диалогов, а также границ инструмента на уровне критично — до семантики, форм и ошибок, объявлений, контраста и состояний, вплоть до медиа и движения.

Каждая категория — это короткий список конкретных требований, таких как aria-label на кнопках только с иконкой, отсутствие tabindex выше 0 и aria-invalid на полях с ошибкой. Блок распространённых исправлений показывает HTML до и после для кнопок только с иконкой, div-в-роли-кнопки и несвязанных ошибок форм, а режим проверки сообщает о каждом нарушении с цитируемой строкой, объяснением в одно предложение и исправлением на уровне кода.

Отчёт о проверке
Смотрите пример запроса ↗

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

  1. 01
    Применяйте ограничения на месте

    Запуск команды без аргументов превращает правила в постоянные ограничения для любой работы с UI в этом разговоре, а не в разовый проход проверки.

  2. 02
    Укажите файл для отчёта о нарушениях

    С аргументом-файлом skill проверяет этот файл по всем правилам и сообщает о каждом нарушении в виде цитируемой строки или фрагмента, одного короткого предложения о том, почему это важно, и исправления на уровне кода.

  3. 03
    Работайте с категориями в порядке приоритета

    Правила сгруппированы в ранжированные категории с рейтингом влияния; доступные имена находятся на приоритете 1 с отметкой «критично».

  4. 04
    Сохраняйте изменения минимальными

    Skill прямо указывает, что не следует переписывать большие части UI, а исправления должны быть минимальными и точечными.

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

Когда использовать навык fixing-accessibility

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

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

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

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

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

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

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

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

  1. Давайте имя каждому элементу управления только с иконкой

    Кнопки только с иконкой должны иметь доступное имя через aria-label или aria-labelledby, а не просто видимый глиф.

  2. Никогда не используйте положительный tabindex

    Значения tabindex больше 0 полностью исключены; порядок табуляции определяется естественной последовательностью.

  3. Захватывайте, задавайте и восстанавливайте фокус в диалоговых окнах

    Модальные окна должны захватывать фокус, пока открыты, устанавливать начальный фокус внутри диалога и возвращать фокус на триггер при закрытии.

  4. Связывайте ошибки с их полем

    Ошибки должны быть привязаны к полю ввода через aria-describedby, чтобы сообщение озвучивалось вместе с полем.

  5. Помечайте невалидные поля как invalid

    Невалидное поле должно устанавливать aria-invalid, а не просто отображать стиль ошибки.

  6. Не используйте ARIA, когда нативная семантика уже работает

    Не добавляйте aria, если нативная семантика уже решает задачу; это относится к границам инструмента как критическое ограничение.

  7. Сохраняйте видимость фокуса

    Контуры фокуса не могут быть удалены без предоставления видимой замены.

  8. Не переносите UI-библиотеки

    Замена UI-библиотеки выходит за рамки задачи, если пользователь явно не попросил об этом.

04 Применение

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

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

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

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

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

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

SKILL.md не включает пример промпта; этот стартовый написан на основе однострочного описания из каталога. Замените строку задачи на ваш реальный бриф.

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Источник: стартовый промпт написан на основе однострочного описания из каталога (не из SKILL.md).

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

Перед принятием результата найдите это в диалоге и файлах:

  • Результат поставляется как отчёт проверки, как указано для этого навыка в каталоге.
  • Агент называет навык fixing-accessibility в своём плане или протоколе перед выдачей результата.
  • Ваш собственный контент, имена и числа остаются неизменными в выводе.

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

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

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

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

Repository
github.com/ibelick/ui-skills Ветка main
Файл skill
skills/fixing-accessibility/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 79081ab
License
MIT Из LICENSE.
Звёзды репозитория
8 402 Снимок GitHub сделан 14.09.2026 для всего репозитория ibelick/ui-skills, который содержит 5 навыков в этом каталоге. Не является рейтингом или счётчиком использования для fixing-accessibility.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.
Собственное описание skill
«Проверяет и исправляет проблемы доступности HTML, включая ARIA-метки, клавиатурную навигацию, управление фокусом, цветовой контраст и ошибки форм. Используйте при добавлении интерактивных элементов управления, форм, диалоговых окон или проверке соответствия WCAG.»

Описание из метаданных SKILL.md. Полный файл составляет около 4 714 символов. Прочитайте полный файл на GitHub.

Fixing Accessibility

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

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

Терминал
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

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

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

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

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

Для macOS и Windows