HTMLを貼り付け

ページ全体でも、確認したいHTML断片だけでも使えます。

0 / 300,000文字
確認する主な参照
  • id の重複・空白文字
  • label[for]
  • aria-labelledby / aria-describedby / aria-controls など
  • form / list / headers
  • href="#..." / xlink:href="#..."

チェック結果

まだチェックしていません。

ID数0
参照数0
要確認0
重複ID0
参照先なし0
参照先の種類0

チェック結果はここに表示されます。

HTMLの「IDはあるのに、つながっていない」を確認

HTMLでは、フォームのラベル、ARIA属性、フォーム所有者、データリスト、表の見出し、ページ内リンクなど、別の要素を id で参照する場面があります。このツールはHTMLを貼り付け、参照元と参照先の対応だけに絞って確認します。

重複ID

同じ id が複数の要素に付いている箇所を一覧化します。

ラベルとフォーム

label[for] が実在するラベル付け可能要素を指しているか、form が実在するフォームを指しているか確認します。

ARIAの参照

aria-labelledbyaria-describedbyaria-controls などに書かれたIDが入力HTML内に存在するか確認します。

ページ内リンクなど

href="#section"listheaders など、よく使うID参照も同じ画面で確認します。

使うときの注意

貼り付けた静的HTMLだけを確認します。JavaScript実行後に追加・変更される要素や、貼り付け範囲の外にある参照先までは確認できません。HTML全体の文法やアクセシビリティ適合性を総合判定するツールではありません。

よくある質問

どのID参照を確認できますか?

label[for]、主要なARIAのID参照、formlistheaders、ページ内の #リンク を確認します。あわせて id の重複も検出します。

idが重複すると何が問題ですか?

同じIDが複数あると、ラベルやARIA、JavaScript、ページ内リンクが意図した要素ではなく別の要素を参照する原因になります。結果では重複したIDと該当行をまとめて表示します。

labelのfor属性も確認できますか?

for の参照先が存在するかに加え、その参照先が入力・選択欄などのラベル付け可能要素かも確認します。

HTMLの一部分だけでも使えますか?

HTML断片でも使えます。ただし参照先が貼り付け範囲の外にある場合は「参照先なし」と表示されるため、公開前の最終確認ではページ全体のHTMLを使うと判断しやすくなります。

JavaScriptで後から作る要素も確認できますか?

このツールは貼り付けたHTML文字列を確認します。JavaScriptを実行して生成されるDOMは実行しないため、動的な参照関係はブラウザの開発者ツールやアクセシビリティ検査も併用してください。

W3CのHTMLバリデータの代わりになりますか?

このツールはIDと参照先の対応確認に特化しています。タグの入れ子や属性値などHTML全体の文法確認には、HTMLバリデータを併用すると役割を分けられます。

入力したHTMLは送信されますか?

チェック処理はこのページを開いているブラウザ内で行います。入力HTMLを外部APIへ送る処理はありません。

問題が0件ならアクセシビリティ対応済みですか?

ID参照に関する今回の確認範囲で問題が見つからなかった、という結果です。アクセシブル名の内容、キーボード操作、コントラストなどは別の確認項目です。