mcpField
A
accessibility

accessibility

github.com/dralgorhythmデザイン・UI12991 回インストール14 週間前に更新
リポジトリ

accessibility について

accessibilityは、WCAG 2.1の原則や一般的なインターフェースのアクセシビリティ確認、テスト方法をまとめたデザインスキルです。デザイナーや開発者がキーボード操作、コントラスト、フォーム、画像、スクリーンリーダーの動作を点検できます。

主な機能

  1. 01WCAG 2.1 POURの原則
  2. 02コントラストとキーボード操作の確認
  3. 03フォームと画像に関するガイダンス
  4. 04ARIAの基礎とスクリーンリーダーの確認
  5. 05テストチェックリストとツールの紹介

活用シーン

  1. 01インターフェースのアクセシビリティ課題の確認
  2. 02キーボード操作とフォーカスの確認
  3. 03コントラストとフォームラベルの検証
  4. 04スクリーンリーダーと画像の代替テキスト確認の計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill accessibility

インストール後、Claude Code で/accessibilityを入力して読み込まれたか確認します。

詳細

アクセシビリティ

WCAG 2.1 の原則（POUR）

知覚可能

ユーザーが知覚できる方法でコンテンツを提示する必要があります。

操作可能

すべてのユーザーがインターフェースを操作できる必要があります。

理解可能

コンテンツと操作を理解できる必要があります。

堅牢

現在および将来のテクノロジーでコンテンツが動作する必要があります。

よくある問題と修正方法

画像

<img src="chart.png">


<img src="chart.png" alt="Sales increased 25% in Q4 2024">
フォーム

<input type="email" placeholder="Email">


<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>
色のコントラスト
  • 通常のテキスト：最小 4.5:1
  • 大きなテキスト（18pt 以上）：最小 3:1
  • UI コンポーネント：最小 3:1
キーボード操作
  • すべてのインタラクティブ要素にフォーカスできる
  • フォーカスインジケーターが見える
  • タブの順序が論理的
  • ナビゲーション用のスキップリンク
スクリーンリーダー

<span class="sr-only">Open menu</span>


<div aria-live="polite">Item added to cart</div>

ARIA の基本


<nav role="navigation">


<button aria-expanded="false">Menu</button>


<input aria-required="true">


<button aria-label="Close dialog">×</button>

テストチェックリスト

  • キーボード操作が機能する
  • スクリーンリーダーが正しく読み上げる
  • 色のコントラストが基準を満たす
  • フォーカスが見える
  • フォームラベルがある
  • 画像に代替テキストがある
  • 見出しの階層が適切
  • リンクの内容がわかりやすい

ツール

  • Axe DevTools（ブラウザー拡張機能）
  • WAVE（ウェブアクセシビリティ評価ツール）
  • Lighthouse（Chrome DevTools）
  • スクリーンリーダー：NVDA、VoiceOver、JAWS

コメント

Markdown 対応