フォーカス順序ビジュアライザーとは？
任意のHTMLを貼り付けると、キーボードのタブ順序が一目でわかります。フォーカス可能な各要素に番号付きマーカーが表示され、ナビゲーションの問題をすぐに発見できます。アクセシビリティ監査者や開発者のWCAG準拠確認に。
ビジュアライザーはリンク、ボタン、フォーム入力、テキストエリア、selectメニュー、details/summaryの開閉ウィジェット、contenteditable領域、明示的にtabindexが指定された要素を検出します。各フォーカス可能要素には番号付きバッジが付き、位置がDOM順（自然）か、tabindexで上書きされたもの（カスタム）かを表示します。さらにページを100点満点で採点し、アクセシブルな名前がない要素（アイコンだけのボタン問題）を指摘し、Tabでまったく到達できないインタラクティブ要素の数も示します。結果はプレーンテキストレポート、または監査記録やバグ管理向けの構造化CSVとして書き出せます。
使い方
- HTMLコードをエディターに貼り付けるか、HTMLファイルをアップロードしてタブ順序を確認します。
- 各フォーカス可能な要素（リンク、ボタン、入力欄）に番号付きマーカーが表示され、タブ順序がわかります。
- アクセシビリティスコアと問題パネルを確認し、順序の乱れ・名前なし・キーボードで到達できない要素を修正してから、結果をテキストレポートまたはCSVとしてエクスポートします。
使用するタイミング
- WCAG 2.1 AA認証提出前のセルフチェックとして。
- コンポーネントやレイアウト改修後のタブ順リグレッション調査に。
- モーダルやサイドメニューでフォーカスが正しく閉じ込められているかの検証に。
結果
アクセシビリティコンサルタントがクライアントの登録フォームHTMLを貼り付けます。ビジュアライザーは、正の値のtabindexが順序を入れ替えたために「送信」ボタンが「利用規約」チェックボックスより先にフォーカスを受けていることを捉えます。これはWCAG 2.4.3違反です。
よくある質問
- 正の整数のtabindexは常に間違いですか？
- ほぼ常に間違いです。正のtabindex（1, 2, 3…）は要素をDOM順から引き剥がし、カーソルを予測できない順序で飛ばします。非インタラクティブ要素をフォーカス可能にするにはtabindex="0"を、プログラム的フォーカスを残したままタブ順から外すにはtabindex="-1"を使ってください。
- リストの「自然」と「カスタム」は何を意味しますか？
- 「自然」はその要素のタブ位置がHTMLソース上の位置から決まったことを意味します。「カスタム」は正のtabindex値で別の位置に強制移動されたことを意味します。カスタム位置はWCAG 2.4.3違反の最大の原因なので印が付きます。
- 非表示の要素はフォーカス順に出てきますか？
- display:noneやvisibility:hiddenで本当に非表示なら、ブラウザがスキップするのでビジュアライザーにも出ません。しかしaria-hiddenだけではフォーカス可能性は外れず、これがよくあるバグです。リストには表示されるので、矩形データから可視かどうか判断できます。
- モーダルのフォーカストラップ漏れを検出できますか？
- ツールが表示するのは順序であって、フォーカスがモーダルから抜けるかどうかではありません。モーダルを開いた状態のHTMLを貼り、最初と最後のフォーカス可能要素がダイアログ内にあるか確認してください。順序がbody側の内容に飛んだら、トラップが欠けています。
- フォーカス可能と期待していた要素がリストに出てこないのはなぜですか？
- disabledな入力、href無しのanchor、tabindex属性のないdivはブラウザ自体がフォーカスできないため除外されます。divを到達可能にしたいならtabindex="0"を、anchorにはhrefを追加、disabled属性は外してください。