重複ID
同じ id が複数の要素に付いている箇所を一覧化します。
無料・登録不要・貼り付けたHTMLはブラウザ内で処理
重複した id と、label[for]・ARIA・フォーム・ページ内リンクなどの参照先ミスを公開前にまとめて確認します。
ページ全体でも、確認したいHTML断片だけでも使えます。
id の重複・空白文字label[for]aria-labelledby / aria-describedby / aria-controls などform / list / headershref="#..." / xlink:href="#..."HTMLでは、フォームのラベル、ARIA属性、フォーム所有者、データリスト、表の見出し、ページ内リンクなど、別の要素を id で参照する場面があります。このツールはHTMLを貼り付け、参照元と参照先の対応だけに絞って確認します。
同じ id が複数の要素に付いている箇所を一覧化します。
label[for] が実在するラベル付け可能要素を指しているか、form が実在するフォームを指しているか確認します。
aria-labelledby、aria-describedby、aria-controls などに書かれたIDが入力HTML内に存在するか確認します。
href="#section"、list、headers など、よく使うID参照も同じ画面で確認します。
貼り付けた静的HTMLだけを確認します。JavaScript実行後に追加・変更される要素や、貼り付け範囲の外にある参照先までは確認できません。HTML全体の文法やアクセシビリティ適合性を総合判定するツールではありません。
label[for]、主要なARIAのID参照、form、list、headers、ページ内の #リンク を確認します。あわせて id の重複も検出します。
同じIDが複数あると、ラベルやARIA、JavaScript、ページ内リンクが意図した要素ではなく別の要素を参照する原因になります。結果では重複したIDと該当行をまとめて表示します。
for の参照先が存在するかに加え、その参照先が入力・選択欄などのラベル付け可能要素かも確認します。
HTML断片でも使えます。ただし参照先が貼り付け範囲の外にある場合は「参照先なし」と表示されるため、公開前の最終確認ではページ全体のHTMLを使うと判断しやすくなります。
このツールは貼り付けたHTML文字列を確認します。JavaScriptを実行して生成されるDOMは実行しないため、動的な参照関係はブラウザの開発者ツールやアクセシビリティ検査も併用してください。
このツールはIDと参照先の対応確認に特化しています。タグの入れ子や属性値などHTML全体の文法確認には、HTMLバリデータを併用すると役割を分けられます。
チェック処理はこのページを開いているブラウザ内で行います。入力HTMLを外部APIへ送る処理はありません。
ID参照に関する今回の確認範囲で問題が見つからなかった、という結果です。アクセシブル名の内容、キーボード操作、コントラストなどは別の確認項目です。