音声読み上げのエミュレーター「Fangs」

自分のWebサイトが、スクリーンリーダーや音声ブラウザといった支援技術でどのように読み上げられるかを確認するには、実際に支援技術を使ってみるのがもっとも確実です。ただし、サイト制作時においては、たとえば以下のようなシチュエーションで、音声読み上げ内容を視覚的に表示してみたいというニーズがあるのではないかと思います。

こうしたニーズに対して便利な、音声読み上げ内容を視覚的にエミュレートしてくれるツールがあるので、ご紹介したいと思います。Firefoxのアドオンソフト、「Fangs」です。

Fangsをインストールすると、Firefoxの「ツール」メニューに「Fangs」という選択肢が表示されます。それを選択するだけで、そのときFirefoxで開いているWebページの音声読み上げ内容が表示されます。
Fangsの読み上げ内容表示

音声読み上げ内容の手軽な視覚表示としては、Web Developerというツール（これもFirefoxのアドオンです）の「リニアライズ（線形化）」機能が有名ですが、FangsはWeb Developerのリニアライズよりも、実際の音声読み上げに近い表現になっています。具体的には、以下のような情報が付加されます。

  • 冒頭に「このページには見出しがいくつあって、リンクがいくつあります」といった情報が表示される。
  • 各見出しには見出しレベルが表示される。
  • リンク箇所では「リンク」と表示される。
  • 画像の箇所（<img>要素）ではalt属性の内容が表示される。
  • 箇条書きの箇所ではリスト項目数が表示されたうえで、各項目が順に表示される。

こうした付加情報は、実際に支援技術（スクリーンリーダーや音声ブラウザ）がWebページを読み上げる際に付加されるものなので、Fangsで表示された内容を順に目で追ったり声に出して読み進めると、支援技術の疑似体験ができるようになっています。

また、Fangsでは、見出しだけをリスト表示する機能や、リンクだけをリスト表示する機能があります。（下図は、見出しのリスト表示の例です。）
Fangsの見出しリスト表示

このリスト表示も、実際に支援技術に備わっている機能を模しているものです。スクリーンリーダーで見出しナビゲーション機能（[H]キーを押してページ内にある<h1>から<h6>の見出し要素を行き来できる機能）を使った場合のシミュレーションや、[Tab]キーなどを押してリンク箇所にフォーカスをジャンプさせた場合のシミュレーションができるようになっています。

最終的には実際にスクリーンリーダーや音声ブラウザを使って、音声による読み上げ確認するのが良いですが、このようなツールを使って、効率的にアクセシビリティを検証するのも有効だと思います。無料で入手できるので、興味がある方はぜひ試してみてください。