accessibility-audit

アクセシビリティ監査スキル

ARIA スナップショット、AX ツリー分析、WCAG 検証を使用して、ウェブのアクセシビリティを監査します。

使用するタイミング

このスキルは、次の場合に有効になります。

• ユーザーがアクセシビリティまたは a11y について尋ねた場合
• ユーザーが WCAG 準拠に言及した場合
• ユーザーがスクリーンリーダーとの互換性を確認したい場合
• ユーザーが ARIA のロールとラベルを監査する必要がある場合
• ユーザーがキーボード操作について尋ねた場合

機能

ARIA スナップショット

browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli a11y take-aria-snapshot --selector ".main-content"

AX ツリー分析

browser-devtools-cli --json a11y take-ax-tree-snapshot
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link,textbox
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion
browser-devtools-cli --json a11y take-ax-tree-snapshot --only-visible

キーボード操作のテスト

browser-devtools-cli interaction press-key --key "Tab"
browser-devtools-cli interaction press-key --key "Tab" --selector "body"
browser-devtools-cli interaction press-key --key "Enter"
browser-devtools-cli interaction press-key --key "Escape"

WCAG チェックリスト

知覚可能

• 画像に代替テキストがある
• 動画にキャプションがある
• 色だけを情報の伝達に使っていない
• テキストに十分なコントラストがある

操作可能

• すべての機能をキーボードで操作できる
• キーボードトラップがない
• スキップリンクがある
• フォーカスが見える

理解可能

• 言語が指定されている
• フォーム入力にラベルがある
• エラーメッセージが明確である
• ナビゲーションに一貫性がある

堅牢

• HTML が有効である
• ARIA が正しく使用されている
• 支援技術で動作する

監査ワークフロー

SESSION="--session-id a11y-audit"

# 1. Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 2. Get ARIA snapshot (quick overview, returns refs e1,e2,...)
browser-devtools-cli $SESSION a11y take-aria-snapshot

# Optional: include custom clickable elements (div/span with cursor:pointer)
browser-devtools-cli $SESSION a11y take-aria-snapshot --cursor-interactive

# 3. Get detailed AX tree
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
  --roles button,link,textbox,checkbox,radio,combobox

# 4. Check for interactive elements with occlusion
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
  --roles button,link \
  --check-occlusion

# 5. Test keyboard navigation
browser-devtools-cli $SESSION interaction press-key --key "Tab"
browser-devtools-cli $SESSION content take-screenshot --name "first-focus"

# 6. Cleanup
browser-devtools-cli session delete a11y-audit

よくある問題

代替テキストがない

# Check images in AX tree
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles image

フォームのラベルがない

# Check form elements
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox

ボタン／リンクが空である

# Check for buttons and links with no accessible name
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link

非表示だがフォーカス可能な要素

# Check for visibility issues
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion

個別の監査

見出しの階層

browser-devtools-cli --json a11y take-ax-tree-snapshot --roles heading

フォームのアクセシビリティ

browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles textbox,checkbox,radio,combobox,button

ナビゲーション要素

browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles navigation,link,menu,menuitem

インタラクティブ要素

browser-devtools-cli --json a11y take-ax-tree-snapshot \
  --roles button,link,tab,switch,slider

ベストプラクティス

1. 概要をすばやく把握するため、まず必ず ARIA スナップショットを使用します
2. レイアウトの問題には、オクルージョンチェックと併せて AX ツリーを使用します
3. インタラクティブ要素に注目するため、ロールでフィルタリングします
4. 表示要素と非表示要素の両方を確認します
5. 報告する前に、キーボードのみでテストします
6. フォーカス状態を記録するため、スクリーンショットを撮影します
7. レスポンシブ a11y を確認するため、さまざまなビューポートサイズでテストします