accessibility-auditing

アクセシビリティ監査

外部ツールを使わずに、Cursor 内蔵のブラウザーでウェブページのアクセシビリティ上の問題を監査します。

ワークフロー

1. ページを開く

browser_navigate を使って対象の URL を開きます。

2. アクセシビリティツリーを取得する

browser_snapshot を使います。ページの ARIA／アクセシビリティツリーが返されます。これはスクリーンリーダーが使用するものと同じツリーです。

3. ツリーを監査する

次の問題がないか確認します。

ラベルの不足

• アクセシブルネームがない button 要素（テキストがなく、aria-label もない）
• alt テキストがない img 要素
• 関連付けられた label または aria-label がない input 要素
• テキストコンテンツがない a（リンク）要素
• aria-label がない、アイコンのみのボタン

セマンティック HTML

• クリック可能な div または span 要素 → button または a にする必要があります
• nav、main、header、footer ランドマークの不足
• 見出しレベルの飛び越し（h1 → h3）
• ul／ol／li が使用されていないリスト

キーボード操作

• タブ順序に含まれていないインタラクティブ要素
• role やキーボードハンドラーがないカスタムウィジェット
• モーダル内のフォーカストラップ（フォーカスを閉じ込める必要がありますが、Escape キーで閉じられるようにする必要もあります）
• コンテンツへスキップするリンクの不足

ARIA の問題

• フォーカス可能な要素に aria-hidden="true" が指定されている
• 無効な role の値
• 折りたたみ可能なコンテンツに対応していない aria-expanded
• 存在しない ID を参照している aria-controls

コントラスト（視覚的な確認にはスクリーンショットを使用）

• 白い背景に薄いグレーのテキスト
• 薄すぎるプレースホルダーテキスト
• 判別しにくい無効状態

4. キーボード操作をテストする

browser_press を使って Tab キーの押下をシミュレートし、次を確認します。

• すべてのインタラクティブ要素にフォーカスが当たる
• フォーカス順序が論理的である（上から下、左から右）
• フォーカスが視覚的にわかる（フォーカスリングまたはアウトラインがある）
• Escape キーでモーダル／ドロップダウンが閉じる

5. 報告する

Accessibility Audit:
  Critical:
    - 3 buttons with no accessible name (header icons)
    - Login form inputs missing labels
  Warnings:
    - Heading levels skip from h1 to h3
    - No skip-to-content link
    - 2 clickable divs should be buttons
  Passed:
    - All images have alt text
    - Landmarks present (nav, main, footer)
    - Focus order is logical

6. 修正する

問題ごとに、ソースコードに修正を適用します。一般的な修正方法は次のとおりです。

• アイコンボタンに aria-label="Close" を追加する
• 入力要素を <label> で囲むか、htmlFor を追加する
• <div onClick> を <button> に変更する
• 画像に alt テキストを追加する
• 見出しの階層を修正する