Communityコーディング&開発github.com

addyosmani/accessibility

Webアクセシビリティを監査・改善し、WCAG 2.2ガイドラインに準拠させます。「アクセシビリティの向上」「a11y監査」「WCAG準拠」「スクリーンリーダー対応」「キーボードナビゲーション」「アクセシブルにする」などのリクエストに使用します。

accessibility とは?

このスキルは、Webアプリケーションのアクセシビリティを包括的に監査・改善するためのAIエージェント向けツールです。WCAG 2.2(Web Content Accessibility Guidelines)に準拠し、スクリーンリーダー対応、キーボードナビゲーション、カラーコントラスト、フォーカス管理などの主要なアクセシビリティ問題を検出・修正します。開発者が「アクセシビリティを向上させて」「a11y監査を実施して」「WCAGに準拠させて」などの自然言語指示を出すと、このスキルが自動的にページの構造、ARIA属性、フォームラベル、見出し階層、画像の代替テキストなどを分析し、具体的な改善提案とコード修正を行います。Claude Code、Cursor、Codexなど複数のAIエージェントプラットフォームで利用可能で、アクセシビリティの専門知識がなくてもインクルーシブなWeb体験を実現できます。監査結果は明確な優先順位(Critical/Major/Minor)で提示され、各問題に対する修正方法がコード例付きで説明されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/addyosmani/web-quality-skills/tree/main/skills/accessibility

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

accessibility は何をしますか?

Webアクセシビリティを監査・改善し、WCAG 2.2ガイドラインに準拠させます。「アクセシビリティの向上」「a11y監査」「WCAG準拠」「スクリーンリーダー対応」「キーボードナビゲーション」「アクセシブルにする」などのリクエストに使用します。

使用例

「このページのアクセシビリティを監査して」
「フォームをスクリーンリーダー対応にして」
「キーボードナビゲーションを改善して」
「WCAG 2.2 AA準拠に修正して」

主な機能

  • 自動監査: ページ構造、ARIA属性、カラーコントラスト、フォーカス管理を自動分析
  • 優先順位付け: Critical(重大)/ Major(重要)/ Minor(軽微)の3段階で問題を分類
  • 修正提案: 各問題に対して具体的なコード例付きの修正方法を提示
  • 継続的改善: 修正後の再監査で改善状況を確認

対応プラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他AIエージェント

監査項目の例

カテゴリチェック項目優先度
構造見出し階層の適切性Major
ARIAロール/プロパティの正しさCritical
色コントラスト比(4.5:1以上)Critical
フォーカスキーボード操作の完全性Major
画像代替テキストの有無Minor

注意事項

  • このスキルはWCAG 2.2 AA準拠を目標とします
  • 自動監査では検出できないユーザビリティ上の問題が存在する場合があります
  • 実際のユーザーテストを補完するツールとしてご利用ください

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

関連スキル