1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webアクセシビリティでウェブページの id 属性値が一意的 (ユニーク) な事をチェックするには

Last updated at Posted at 2020-10-22

方法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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?