方法1. validator.w3.org でチェックする
下記W3CサイトでもID重複チェックしてくれました。
Error: Duplicate ID
の指摘がなければOK。
HTMLのバリデートチェックと同時にチェックできます。
ID重複ある場合
下記のような指摘が表示されます。
Error: Duplicate ID test.
From line 816, column 31; to line 816, column 155
oup mt-2"><input type="text" name="search_keyword" class="form-control" value="" placeholder="キーワードでサイト内検索" title="サイト内検索" id="test" />↩<div
方法2.下記ブックマークレットでチェックする
javascript:(function(){ var idArr=[]; var duplicateIdArr = []; [].forEach.call(document.querySelectorAll('[id]'), function(elm){ var id = elm.getAttribute('id'); if(idArr.indexOf(id) !== -1) { duplicateIdArr.push(id); } else { idArr.push(id); } }); if(duplicateIdArr.length > 0) { console.log('IDの重複があります:', duplicateIdArr); } else { console.log('IDの重複はありません。'); }})();
実行すると、コンソールに重複あり・重複なしが表示されます。
下記ページのJavaScriptを使わせてもらいました。助かりました。
DOM上のIDの重複を検出する - Qiita
https://qiita.com/butchi_y/items/8e1312a47826e5ca95a2
該当のWebアクセシビリティ達成方法
(達成基準 4.1.1)
H93: ウェブページの id 属性値が一意的 (ユニーク) であるようにする | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/H93.html