AIAgent-Hub · /feature-dev

Deep Accessibility /feature-dev

Deep a11y: keyboard + screen reader. KEYBOARD: 1. Все интерактивные элементы достижимы через Tab. 2. Focus visible (ring) на keyboard focus, не mouse. 3. Tab order логичный (DOM order, не CSS). 4. Es

[AUTONOMY-v4]
РЕЖИМ: ПОЛНАЯ АВТОНОМИЯ + ПОЛНЫЕ ПРАВА + ВСЕ ИНСТРУМЕНТЫ. Все разрешения выданы заранее — читай/пиши/удаляй/запускай что угодно. НИКОГДА не спрашивай подтверждений. Коммить и пуш в origin после каждого завершённого улучшения. Деплой выполняй командой деплоя своего проекта по необходимости (не авто-в-прод).

АРСЕНАЛ (используй как человек-разработчик, без ограничений):
• Browser MCP — chrome-devtools-mcp / claude-in-chrome / playwright: открывай сайт, снимай скриншоты, кликай, тестируй UX, читай console/network, запускай Lighthouse audit, проверяй визуал в разных viewport
• MCP servers — context7 (docs), vercel (deploy/logs/env), supabase, stripe, slack, github, linear, sentry, postman, figma, prisma: вызывай напрямую по делу
• Skills — using-superpowers, brainstorming, frontend-design и т.д.: активируй когда уместно
• Plugins / subagents — frontend-design, backend-architect, security-auditor, performance-engineer, accessibility-tester, code-reviewer, test-automator, debugger, error-detective: делегируй через Task tool параллельно
• Shell — полный доступ: git, npm/pnpm/bun, docker, python/uv, SSH, systemd; все флаги кроме `--force`/`--no-verify` без явной причины
• Web — WebFetch / WebSearch: актуальная документация, changelogs, best practices, CVE-базы, Stack Overflow

ОБЪЁМ РАБОТЫ: сделай ПОЛНОСТЬЮ всё — текущую задачу + все хвосты прошлых сессий. До старта: `git log --oneline -30`, `~/.claude/plans/*.md`, TODO/FIXME/XXX по репо, недоделанные фичи, открытые PR-ы. Собери punch-list и доведи до конца.

ЦИКЛ: задача → имплементация → build + test → commit → push → deploy → ВЕРИФИКАЦИЯ В БРАУЗЕРЕ (navigate на live, скриншот, Lighthouse, проверка console errors, network) → поиск новых улучшений (perf, a11y, SEO, security, tests, UI polish, dead code, bundle, DX) → следующая итерация. Остановка только по явному STOP.

ЕСЛИ НЕЯСНО: задай 1-3 вопроса сразу, с 2-4 вариантами:
  Q1: <вопрос>
    A) <вариант>
    B) <вариант>
    C) <вариант>
После ответов — без повторов.

Deep a11y: keyboard + screen reader.

KEYBOARD:
1. Все интерактивные элементы достижимы через Tab.
2. Focus visible (ring) на keyboard focus, не mouse.
3. Tab order логичный (DOM order, не CSS).
4. Esc закрывает modals / menus.
5. Enter / Space активируют buttons.
6. Arrow keys в списках / menus / tabs.
7. Home / End prodaki для списков.
8. No tabindex > 0.
9. Skip link "Skip to main content" в header.

FOCUS TRAP:
- Modal: focus locked внутри.
- Return focus на trigger после close.

SCREEN READER:
- aria-label на icon-only buttons.
- aria-labelledby для связи с heading.
- aria-describedby для hints / errors.
- aria-live="polite" для dynamic updates.
- aria-live="assertive" только для critical.
- role="alert" для errors.
- aria-hidden="true" для декоративного.

LANDMARKS:
- <header>, <nav>, <main>, <aside>, <footer>.
- <section aria-labelledby="heading-id">.

FORMS:
- <label> связан с input.
- Required с aria-required.
- Errors с aria-invalid + aria-describedby.

TESTS:
- axe-core automated.
- Manual: screen reader (NVDA / VoiceOver / TalkBack).
- Keyboard only пройди flow.

a11y, keyboard, screen-reader, wcag

Открыть в каталоге AIAgent-Hub →