フォーカス順序ビジュアライザー
Webページ上のキーボードTabキー順序を可視化
タブ順序とは？
タブ順序とは、キーボードユーザーが Tab キーを押してボタン、リンク、フォームフィールド間を移動するときの順序です。明確で予測可能な順序は、スクリーンリーダーユーザーやマウスを使わずに操作するすべての人にとって不可欠です。下に HTML を貼り付けると、フォーカスが移動する場所を示す番号付きマーカーが表示されます。
HTML を貼り付け
プレビュー
フォーカス順序ビジュアライザーとは？
任意のHTMLを貼り付けると、キーボードのタブ順序が一目でわかります。フォーカス可能な各要素に番号付きマーカーが表示され、ナビゲーションの問題をすぐに発見できます。アクセシビリティ監査者や開発者のWCAG準拠確認に。
使い方
- HTMLコードをエディターに貼り付けるか、HTMLファイルをアップロードしてタブ順序を確認します。
- 各フォーカス可能な要素（リンク、ボタン、入力欄）に番号付きマーカーが表示され、タブ順序がわかります。
- フォーカス順序リストを確認し、順序の乱れや欠落している要素を特定してから、分析結果をレポートとしてエクスポートします。
結果
アクセシビリティコンサルタントがクライアントの登録フォームHTMLを貼り付けます。ビジュアライザーにより、不正なtabindex値のために「送信」ボタンが「利用規約」チェックボックスより先にフォーカスを受けていることが判明し、WCAG 2.4.3違反が指摘されます。