本文へ移動
cccskills
無料GitHub で公開

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.

インストール方法を見る

含まれるファイル(6)

  • SKILL.md4.7 KB
  • LICENSE.txt3.2 KB
  • references/common-ui-failures.md2.3 KB
  • references/framework-patterns.md1.3 KB
  • references/review-checklist.md1.3 KB
  • references/wcag-priority-map.md2.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 を先に回す
  • 実装中なら common UI failures から直しやすい欠陥を先に潰す

Escalation Paths

  • 深い設計レビューや WCAG 観点の広い棚卸しが必要なら、WCAG priority map を基準に criterion 単位で棚卸しする
  • keyboard flow、dialog、focus return、live region は静的レビューで確定せず、実ブラウザで操作して証跡(操作手順・スクリーンショット・読み上げ結果)を残す
  • Markdown 文書の読みやすさや GitHub 上の文書 a11y はこの skill の対象外

Expected Output

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

Reference Map

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 挙動があれば明示した

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

agentic-workflow-guide

無料日本語概要

Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.

aktsmm/Agent-Skills262026年10月10日 更新

Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.

日本語の概要は準備中です。原文の説明を表示しています。

aktsmm/Agent-Skills262026年10月10日 更新

Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.

日本語の概要は準備中です。原文の説明を表示しています。

aktsmm/Agent-Skills262026年10月10日 更新

animated-infographic

無料日本語概要

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

aktsmm/Agent-Skills262026年10月10日 更新

archify

無料日本語概要

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.

aktsmm/Agent-Skills262026年10月10日 更新

ascii-banner

無料日本語概要

Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.

aktsmm/Agent-Skills262026年10月10日 更新

aktsmm のスキルをすべて見る

このスキルの問題を報告する