制作のチェック時に alt や title が入っているか見たい時

ウェブ制作をしていく中で避けては通れない、むしろ重要なポイントであるチェック。

画像に alt が入っているかや a 要素に title が入っているかなどを調べるのには、最悪、マウスを動かしてちゃんと出るか見る必要が出てくる。もちろん、画像の alt など W3C で必須と言われるものは、Markup Validation Serviceで調べてもらえる。
しかし、必須ではないがあった方がいいようなもの、a 要素の title や img 要素の title、果ては h1〜h6 の title など、見た目はともかく SEO に絡んでくる属性については正直、めんどくさい。

そこで、テストしたいページを iframe の中に読み込み、iframe の onload で iframe 内の要素を取得、そこでチェックすれば良いのではと思った。

--- html 側 ---

<form action="javascript:jumpTo(url.value);">
  <input type="text" id="url" style="width: 700px;" />
  <input type="submit" value="show" />
</form>
<iframe src="" id="testArea" width="800" height="600"></iframe>

--- javascript 側 ---

function jumpTo(target) {
  document.getElementById("testArea").src = target;
  document.getElementById("testArea").onload = function() {searchAttributes();};
}

function searchAttributes() {
  Imgs = testArea.document.getElementsByTagName("img");
  alertMsg = "";
  for (var i = 0; i < Imgs.length; i++) {
    if (Imgs[i].alt == "") alertMsg += Imgs[i].src + "に alt がありません";
  }
  alert(alertMsg);
}

ちょっと今時間がないので取り急ぎ感満載で、しかも Safari 4 しか動作してないが、個人的にはちゃんとカスタマイズすれば自動チェックツールとして使えるようになる。