mcpField
A
accessibility-expert

accessibility-expert

github.com/slb2248デザイン・UI552 回インストール28 週間前に更新
リポジトリ

accessibility-expert について

accessibility-expert は、誰もが利用できるデジタル体験の設計・開発向けリファレンススキルです。WCAG 2.1 の要点に加え、セマンティック HTML、キーボード操作、スクリーンリーダー、フォーム、コントラストを扱います。

主な機能

  1. 01WCAG 2.1 レベル A・AA・AAA の要点
  2. 02セマンティック HTML と ARIA の指針
  3. 03キーボード操作とフォーカス管理
  4. 04スクリーンリーダー向け構造の確認
  5. 05色のコントラストとフォームの指針
  6. 06アクセシビリティテストツール一覧

活用シーン

  1. 01ページのキーボード操作への対応確認
  2. 02テキストや UI コンポーネントのコントラスト評価
  3. 03フォームのラベルとエラー案内の確認
  4. 04スクリーンリーダーと動的コンテンツのテスト計画

インストール

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

$npx skills add https://github.com/slb2248/ai-ux-skills --skill accessibility-expert

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

詳細

アクセシビリティの専門家

誰もが利用できる、インクルーシブなデジタル体験を作成します。

WCAG 2.1 クイックリファレンス

レベル A（最低限）
  • すべての画像に代替テキストを設定する
  • 動画に字幕を付ける
  • キーボードでコンテンツにアクセスできる
  • 発作を引き起こす可能性のあるコンテンツを含めない
  • ページにタイトルを付ける
レベル AA（多くの場合の目標）
  • テキストのコントラスト比を 4.5:1 にする
  • UI コンポーネントのコントラスト比を 3:1 にする
  • テキストを 200% まで拡大できる
  • すべての要素でフォーカスを視認できる
  • エラーへの対処方法を提示する
レベル AAA（強化）
  • コントラスト比を 7:1 にする
  • 動画に手話を付ける
  • 拡張音声解説を付ける
  • 時間制限のある操作をなくす

まずセマンティック HTML を使う


<nav> instead of <div class="nav">
<button> instead of <div onclick>
<main> instead of <div id="main">
<article> instead of <div class="article">


<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>

必要に応じて ARIA を使う


<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>


<div aria-live="polite">Status: Saved</div>
<div aria-live="assertive">Error: Form invalid</div>


<input aria-describedby="hint">
<span id="hint">Password must be 8 characters</span>

キーボード操作

フォーカス管理
  • すべてのインタラクティブな要素に、視認できるフォーカスインジケーターを表示する
  • 論理的なタブ順序にする（視覚的な順序に従う）
  • メインコンテンツへ移動するスキップリンクを設ける
  • モーダル内にフォーカスを閉じ込める
キー操作のパターン
キー操作
Tab次の要素に移動
Shift+Tab前の要素に移動
Enter/Spaceボタンを有効にする
矢印キーコンポーネント内を移動
Escapeモーダル／メニューを閉じる

スクリーンリーダーのサポート

コンテンツ構造
  • ランドマークを使用する：main、nav、aside、footer
  • リンクテキストを分かりやすくする（「ここをクリック」は使わない）
  • 動的な変更を通知する
  • テキストによる代替情報を用意する
テストチェックリスト
  • キーボードだけで操作できる
  • スクリーンリーダーがすべてのコンテンツを読み上げる
  • フォーカス順序が適切である
  • 動的コンテンツが読み上げられる
  • フォームに適切なラベルが付いている
  • エラーが明確に伝わる

色とコントラスト

色だけに頼らない
  • アイコンやパターンを追加する
  • テキストラベルを使用する
  • 複数の識別方法を用意する
コントラスト要件
  • 通常のテキスト：最低 4.5:1
  • 大きなテキスト（18px 以上）：最低 3:1
  • UI コンポーネント：最低 3:1
  • フォーカスインジケーター：最低 3:1

フォーム


<label for="email">Email</label>
<input id="email" type="email" required>


<fieldset>
  <legend>Shipping Address</legend>
  
</fieldset>


<input aria-invalid="true" aria-describedby="error">
<span id="error" role="alert">Please enter valid email</span>

テストツール

  • axe DevTools：ブラウザー拡張機能
  • WAVE：ウェブアクセシビリティ評価ツール
  • Lighthouse：Chrome に組み込み
  • NVDA/VoiceOver：スクリーンリーダー
  • Colour Contrast Analyser：コントラストを確認

コメント

Markdown 対応