fixing-accessibility について
fixing-accessibilityは、UIコンポーネントのアクセシビリティ上の問題を検査・修正するスキルです。インタラクティブなコントロール、フォーム、ダイアログを扱う開発者向けに、デザイン意図を保ったコードレベルの修正を行います。
主な機能
- 01ARIAラベルの確認
- 02キーボード操作の検査
- 03フォーカス管理の問題検出
- 04色のコントラスト確認
- 05フォームエラー表示の改善
活用シーン
- 01UIコンポーネントのアクセシビリティ確認
- 02ダイアログのキーボード操作の修正
- 03フォームエラー表示のアクセシビリティ改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill fixing-accessibilityインストール後、Claude Code で/fixing-accessibilityを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
fixing-accessibility
カタログ用スタブ — スキルの全内容はこちら:ibelick/ui-skills
判断ツリー
-
スキルの全内容はすでにインストールされていますか?
- グローバル:
f=~/.agents/skills/fixing-accessibility/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - プロジェクト:
f=.agents/skills/fixing-accessibility/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ スキルはfixing-accessibilityとしてインストールされています。これを呼び出して続行しますpointer→ ステップ 2 に進みます
- グローバル:
-
適用範囲を検出してからインストールします:
[ -e ~/.agents/skills/fixing-accessibility ] && echo "global" || echo "project"グローバル:
npx skills add ibelick/ui-skills --skill fixing-accessibility -g -yプロジェクト:
npx skills add ibelick/ui-skills --skill fixing-accessibility -yClaude Code: 会話を離れずにコマンドを実行するには、チャットメッセージを
!で始めてコマンドを送信します。
ご注意
- ライセンス: MIT
インストール後の呼び出し
- スキル名:
fixing-accessibility - 起動フレーズ:「fixing accessibility」、「accessibility audit」、「ARIA」、「keyboard navigation」、「focus management」
機能
コンポーネントを監査し、ARIA ラベルの欠落や誤り、キーボード操作の経路の不備、フォーカス管理の問題、色のコントラストの不備、アクセスしにくいフォームのエラーパターンを検出します。視覚的なデザインの意図を損なうことなく、コンポーネントがアクセシビリティ標準を満たすよう、コードに具体的な修正を適用します。インタラクティブなコントロール、フォーム、ダイアログを追加する際や、WCAG への準拠状況を確認する際に使用してください。
使用しない場合
- 専門家への振り分けを含む、サイト全体、ドキュメント(Office/PDF)、または Markdown のアクセシビリティ監査 —
accessibility-agentsを使用してください - 手動検証の手順を含む、体系的な WCAG 2.2 監査 —
wcag-audit-patternsを使用してください
コメント
Markdown 対応