画像の代替テキストを読み上げるJavaScript

この記事はCopilotの実験的な機能を使って一部書かれています。

なんとなく画像の代替テキストを読み上げるJavaScriptを書いてみました。
画像をクリックすると、その画像のalt属性の内容を音声で読み上げます。以下のコードをHTMLに追加するだけで利用できます。このコードは、alt属性が適切に設定された画像に有効です。ブラウザの音声合成機能が必要ですが、主要なブラウザでサポートされています。
ウェブサイトのアクセシビリティ向上に役立つので、ぜひ試してみてください。

[...document.querySelectorAll("img")].forEach((img) => {
  img.addEventListener("click", (e) => {
      window.speechSynthesis.speak(new SpeechSynthesisUtterance(e.currentTarget.alt));
  });
});

ブックマークレットにすると、以下のようになります。

javascript:(() => {
  document.querySelectorAll("img").forEach((img) => {
    img.addEventListener("click", (e) => {
        window.speechSynthesis.speak(new SpeechSynthesisUtterance(e.currentTarget.alt));
    });
  });
})();

以下のリンクをブックマークバーにドラッグ＆ドロップしておくと、どのウェブサイトでも利用できます。

画像の代替テキストを読み上げる

関連日報