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