代替テキストが指定されていないimg要素をハイライトするブックマークレット

……というものを書いたので、どうぞご利用ください。

let.hatelabo.jp

(() => {
  const highlight = (element) => {
    element.querySelectorAll("img").forEach((img) => {
      // alt属性が指定されていたら緑の線、指定されていないなら赤線で囲まれる
      img.style.outline = img.getAttribute('alt') !== null ? "1px solid green" : "2px solid red"
    })
  }
  highlight(document.body)
  const observer = new MutationObserver((ms) => {
    ms.forEach((m) => {
      m.addedNodes.forEach((node) => {
        if (!(node instanceof HTMLElement)) {
          return
        }
        highlight(node)
      })
    })
  })
  observer.observe(document.body, { childList: true, subtree: true })
})()

2022/8/24 11:25 追記: 普通のページでは実行した瞬間にハイライトされるほうが明らかに便利なので、そのように修正しました。

みどころ

MutationObserver を使っているので、いちどブックマークレットを実行すれば、同じページ内で要素が動的に増えてもハイライトされます。シングルページアプリケーションの動作確認にも使えます。

展望

こういう機能を持ったブラウザ拡張があったらいい気がする。というか既にあるのでは？？ 知ってる方がいれば教えてください。

2022/8/24 11:45 追記: 他の手段

id:nanto_vi さんにCSSを使って検査する方法について教えてもらいました。「alt 属性が指定されていない」という条件であればCSSセレクタで表現できるので、こっちのほうがリーズナブルでよさそうですね。

img[alt] {
  border: 1px solid green;
}

img:not([alt]) {
  border: 2px solid red;
}

digiper.com

www.mitsue.co.jp