web-accessibility

Build and review accessible web products using WCAG 2.2 AA. Use when implementing or reviewing forms, dialogs, navigation, keyboard flows, focus management, ARIA, color contrast, responsive UI, or framework-specific accessibility in React/Next.js, Angular, and Vue.

11 stars

Best use case

web-accessibility is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Build and review accessible web products using WCAG 2.2 AA. Use when implementing or reviewing forms, dialogs, navigation, keyboard flows, focus management, ARIA, color contrast, responsive UI, or framework-specific accessibility in React/Next.js, Angular, and Vue.

Teams using web-accessibility should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/web-accessibility/SKILL.md --create-dirs "https://raw.githubusercontent.com/aktsmm/Agent-Skills/main/web-accessibility/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/web-accessibility/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How web-accessibility Compares

Feature / Agentweb-accessibilityStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Build and review accessible web products using WCAG 2.2 AA. Use when implementing or reviewing forms, dialogs, navigation, keyboard flows, focus management, ARIA, color contrast, responsive UI, or framework-specific accessibility in React/Next.js, Angular, and Vue.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Web Accessibility

Product 実装や UI レビューで、a11y を後付けの監査ではなく設計・実装フローの中へ入れるための skill。

## When to Use

- Web UI を新規実装するとき
- 既存 UI の keyboard / focus / form / ARIA / contrast 問題を直すとき
- Dialog、navigation、table、toast、validation などの振る舞いを見直すとき
- React / Next.js、Angular、Vue の framework 癖込みで review したいとき
- 「merge 前に a11y の観点で見てほしい」という依頼を受けたとき

## Not the Best Fit

- Web UI ではない extension host / CLI 中心の変更
- 既にブラウザ上で再現済みで、runtime の証跡収集と検証を主目的にするケース
  - その場合は Accessibility Runtime Tester のような runtime 検証 agent を優先する
- Markdown 文書だけのアクセシビリティ改善

## Operating Principles

- Native HTML first. `div role="button"` より `<button>` を優先する
- Severity first. `CRITICAL` を潰してから `IMPORTANT`、最後に `SUGGESTION` を見る
- Keyboard first. マウスでしか確認していない UI は未完了とみなす
- Name / role / state を明確にする。見た目だけで意味が伝わっても不十分
- Review と fix を往復しやすいよう、指摘は component 単位・flow 単位で束ねる

## Workflow

1. **Scope the surface**
   対象の page / flow / component、主要タスク、入力手段、利用者制約を確認する。
2. **Hit the blocking issues first**
   semantics、keyboard、focus、label、error identification、accessible name を優先する。
3. **Check the UI pattern**
   form、dialog、navigation、table、media、notification などの pattern ごとに要件を確認する。
4. **Apply framework-safe fixes**
   React / Next.js、Angular、Vue で壊れやすい箇所を framework の流儀で直す。
5. **Re-check responsive and visual access**
   contrast、320px reflow、reduced motion、color-only signaling を見直す。
6. **Close with a verification note**
   直した点、未確認の runtime リスク、残件を短く残す。

## Decision Points

- Native element で解けるなら ARIA を増やさない
- Browser 上の focus trap、route announce、hover/focus popup を確証付きで見たいなら runtime 検証へ切り替える
- Quick review 依頼なら [review checklist](references/review-checklist.md) を先に回す
- 実装中なら [common UI failures](references/common-ui-failures.md) から直しやすい欠陥を先に潰す

## Escalation Paths

- 深い設計レビューや WCAG 観点の広い棚卸しが必要なら `Accessibility Expert` を使う
- Browser 上の keyboard flow、dialog、focus return、live region を証跡付きで確認したいなら `Accessibility Runtime Tester` を使う
- Markdown 文書の読みやすさや GitHub 上の文書 a11y が主題なら `markdown-accessibility` を使う

## Expected Output

- 主要な blocking issue を severity 順に並べる
- 修正する場合は component / flow 単位でまとめて直す
- 未検証の runtime 挙動は「推測で完了」にせず明示する
- Browser 実機確認が必要な場合は、可能な static guard や checklist も添える

## Reference Map

- Priority and legal baseline: [references/wcag-priority-map.md](references/wcag-priority-map.md)
- Common defects and fixes: [references/common-ui-failures.md](references/common-ui-failures.md)
- Framework notes: [references/framework-patterns.md](references/framework-patterns.md)
- Final pass checklist: [references/review-checklist.md](references/review-checklist.md)

## Done Criteria

- [ ] Keyboard だけで主要フローを操作できる
- [ ] Focus が見え、閉じた dialog や overlay から適切に戻る
- [ ] Interactive element に accessible name / role / state がある
- [ ] Form の label、required、error、status message が関連付いている
- [ ] Contrast、reflow、color-only signaling、motion の見落としがない
- [ ] Framework 固有の a11y regressions を確認した
- [ ] 未検証の runtime 挙動があれば明示した

Related Skills

x-hashtag-research

11
from aktsmm/Agent-Skills

Collect and analyze public X posts from hashtags to discover primary sources, official docs, related GitHub repos, and reusable images. Use when researching launch-day announcements, event hashtags like #MSBuild or #MicrosoftBuild, keynote reactions, or when you want to turn noisy X posts into a structured research note under research/. X専用のハッシュタグ調査 workflow。

vscode-extension-guide

11
from aktsmm/Agent-Skills

Guide for creating VS Code extensions and plugins from scratch through Marketplace publication. Use when developing a VS Code extension/plugin, adding commands or keybindings, building TreeView or Webview UI, publishing to Marketplace, or troubleshooting activation and packaging issues.

skill-finder

11
from aktsmm/Agent-Skills

Search, install, and manage Agent Skills locally and from GitHub, then help decide whether the task really needs a skill or another customization primitive. Use when looking for skills, installing skills, managing a skill collection, or choosing between a skill, prompt, instruction, or agent.

skill-creator-plus

11
from aktsmm/Agent-Skills

Create or review a reusable skill (SKILL.md) that packages a workflow, and decide whether the request should be a skill instead of a prompt, instruction, agent, or hook. Use when creating a new skill, extracting a workflow from a conversation, updating an existing skill, reviewing SKILL.md quality, or fixing weak skill triggering. Triggers on "create skill", "/create-skill", "new skill", "review skill", "fix skill trigger", "SKILL.md", "スキル作成".

review-security-structure

11
from aktsmm/Agent-Skills

Review owned or authorized code for security using structure-first evidence: AST/structure maps, call graphs, complexity, Source/Sink flow, and defensive findings. Use when asked for security review, vulnerability review, AST structure map review, SAST triage, Source/Sink, taint flow, parser/scanner hardening, CI/CD security, LLM/agent tool boundary review, 脆弱性レビュー, 構造マップ, セキュリティレビュー.

retro-copilot

11
from aktsmm/Agent-Skills

Run a retro for ~/.copilot assets and turn incident learnings into updates for copilot-instructions, instructions, skills, agents, and hooks. Triggers on retro, retrospective, incident learning, error analysis, copilot setup, instructions update, インシデント, and 知見反映.

receipt-ocr-sorter

11
from aktsmm/Agent-Skills

Automatically OCR, rename, and sort receipt images/PDFs/videos by date, amount, and project, with summary reports and D365 expense mapping. Use when sorting receipts, organizing expense files, OCR renaming, receipt sorting, レシート仕分け, or D365経費カテゴリマッピング.

powerpoint-automation

11
from aktsmm/Agent-Skills

Create and edit professional PowerPoint presentations from web articles, blog posts, existing PPTX files, or templates. Use when creating PPTX, converting articles to slides, translating presentations, editing open PowerPoint files, or doing COM Automation / RefURL / overflow review work.

peer-feedback

11
from aktsmm/Agent-Skills

同僚への半期ピアフィードバック下書きを自動生成する。workIQ で 1:1 チャット・グループチャット・メンション・共通会議・メール・SPO の履歴を収集し、6項目テンプレートに沿ってポジティブかつプロモーション志向で起票する。Use when: ピアフィードバック, フィードバック下書き, 同僚評価, 半期フィードバック, 360度フィードバック。

packet-capture-analysis

11
from aktsmm/Agent-Skills

Use when analyzing pcap or pcapng files, triaging network captures, labeling IPs with evidence, generating PNG charts, or writing packet analysis reports. Keywords: pcap, pcapng, tshark, Wireshark, scapy, DNS, TLS SNI, RDAP, graph, matplotlib, gnuplot, packet capture.

ocr-super-surya

11
from aktsmm/Agent-Skills

GPU-optimized OCR using Surya. Use when: (1) Extracting text from images/screenshots, (2) Processing PDFs with embedded images, (3) Multi-language document OCR, (4) Layout analysis and table detection. Supports 90+ languages with 2x accuracy over Tesseract.

microsoft-graph-gateway

11
from aktsmm/Agent-Skills

Route Microsoft Graph work in this workspace. Use when users want to read or write Outlook mail, calendar events, contacts, OneDrive or SharePoint files, Teams, Planner, To Do, users, groups, directory data, or arbitrary Microsoft Graph endpoints from VS Code. Prefer WorkIQ for common read scenarios. Use Microsoft Graph for write actions and gap-read scenarios that need exact Graph properties, filters, permissions, or endpoints.