# webflow-mcp:accessibility-audit

Проводит аудит доступности страниц Webflow по стандарту WCAG 2.1, находит ошибки интерактивных элементов и исправляет их без подключения к Designer.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 887 установок · ★ 132
- Автор: webflow
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/accessibility-audit/SKILL.md
- Обновлён: 2026-10-22
- HTML: https://affpapa.org/nevibecode/skills/webflow-mcpaccessibility-audit

## Что делает

Скилл проверяет структуру страницы на соответствие правилам WCAG 2.1 через инструменты Webflow MCP. Он сканирует кнопки без подписей, поля форм без связанных лейблов, ссылки без адреса назначения, сброшенные стили фокуса и мелкие области клика меньше 44 пикселей. Альт-тексты изображений скилл намеренно пропускает — за них отвечает отдельный инструмент `asset-audit`.

Для аудита и применения правок не нужен открытый Webflow Designer: агент обращается к `data_element_tool` по идентификатору страницы и получает свойства разметки напрямую. Найденные проблемы можно автоматически устранять через вызов `set_attributes`, проставляя корректные ARIA-атрибуты и `tabIndex`. Сессия в Designer потребуется только в том случае, если вы запросите визуальные снимки блоков через `element_snapshot_tool`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill webflow-mcp:accessibility-audit -a claude-code
```
```bash
npx skills add webflow/webflow-skills --skill accessibility-audit -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/accessibility-audit/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/accessibility-audit/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill accessibility-audit -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/accessibility-audit/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill accessibility-audit -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/accessibility-audit/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install webflow/webflow-skills accessibility-audit
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/accessibility-audit/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill accessibility-audit -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/webflow/webflow-skills --path plugins/webflow-skills/skills/accessibility-audit
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/accessibility-audit/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add webflow/webflow-skills --skill accessibility-audit -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/accessibility-audit/SKILL.md

## Когда брать
- найти интерактивные элементы и кнопки без ARIA-атрибутов
- выявить поля ввода без связанных тегов label
- устранить сброшенный outline у элементов в фокусе
- исправить нарушенную иерархию заголовков h1-h6

## Примеры запросов агенту
- Проверь доступность страницы с ID `65a123` и исправь критические ошибки WCAG
- Найди в Webflow формы без подписей и добавь к ним aria-label
- Выполни аудит фокусных состояний кнопок на главной странице проекта

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

Из того же набора: [webflow/webflow-skills](https://affpapa.org/nevibecode/by/webflow/webflow-skills.md) — 22 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md