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

• 公開日 : 2009年10月26日 (2011年1月11日 更新)
• カテゴリー : ウェブアクセシビリティ

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

• 時間軸に左右されない形で、音声読み上げ内容を一目で効率的に確認したい。
• 関係者（ステークホルダー）との間で、アクセシビリティ対策についてできるだけ簡便な方法で共有したい。

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

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

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

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

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

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

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

記事を共有