八雲文庫ブログ

組版できる新感覚の小説・画像投稿サイト「八雲文庫」の運営日誌です。

Web Speech APIで実現するオーディオブックとウェブアクセシビリティ

f:id:yakumobooks:20180129233248j:plain

新機能紹介

ということで、八雲文庫ではこのたび公開した書籍をオーディオブックとしてもご利用頂けるようになりました。既存の投稿作品にも自動的に音声読み上げ機能がつきますので更新等の必要はありません。手前味噌ではありますが、八雲文庫のビュワーはインストールして使用するアプリケーションと違い進化し続けるブラウザの革新的な機能を積極的に取り入れることができるのが強みだと思っています。ご自身の作品をオーディオブックにしてみたいという方は是非八雲文庫にご投稿ください。

f:id:yakumobooks:20180129235603p:plain

朗読を聴きながら書籍のページ送りも可能ですので目と耳の両方で作品を楽しむこともできます。

f:id:yakumobooks:20180129235609p:plain

私は今までオーディオブックというものを使ったことがなかったのでその良さを知らなかったのですが、いざ自分で使ってみると心地よいリズムで頭の中の音読を進められ、より快適な読書体験を味わえることが分かりました。オーディオブックに馴染みのない方も是非一度お試し頂ければと思います。

yakumobooks.com

Web Speech APIの使い方

さて、タイトルにもありますが、ブラウザでの音声読み上げにはWeb Speech APIの内の1つであるSpeechSynthesis(音声合成)を使用しています。SpeechSynthesisを使用するとJavascriptだけでテキストの音声読み上げを実現することができます。メジャーなモダンブラウザであれば使用できますし、その使用方法も驚くほど簡単です。

developer.mozilla.org

音声読み上げ機能の追加に伴い、八雲文庫では作品の音声用テキストを取得できるAPIをご用意しました。通常のHTMLテキストだとルビと本文が重複して読まれてしまいますので、音声用テキストではルビのみを返すようにしています。また、Cookieやブラウザストレージと連携して読み進めた位置を保持することを想定しテキストを行単位で分割して返しています。以下のHTMLをローカルで実行して頂ければ八雲文庫APIを利用した読み上げ機能をすぐに体験することができます。(APIのエンドポイントは"public/v1/books/audio/<書籍番号>"となります。書籍番号は各書籍URLのリクエストパラメーター"?b=<書籍番号>"を使用するとお好みの書籍を取得できます。)

2018/09/12 追記:以下のサンプルをAdBlock等の広告を非表示にする拡張機能がインストールされたブラウザで実行した場合、読込み待ちとなってしまうとのご指摘がありました。該当の環境で動作確認される際はAdBlockをOffにして頂くようお願いします。

ご利用に関する免責事項:八雲文庫における読み上げ機能及びAPIは現在試験的な機能ですので予告なく仕様の変更、公開停止する場合がありますのでご了承ください。

ウェブアクセシビリティについて考える

オーディオブックのメリットには「ながら読み」というのもあるとは思いますが、もう一つのメリットは視力が衰えてしまった高齢者や視覚に障がいのある方でもコンテンツを楽しめるということがあるかと思います。今回追加した「読み上げ機能」を含めサイト全体はまだ視覚障がい者の方に向けた作りとはなってはいませんが、これから八雲文庫は少しずつ老若男女が楽しめるバリアフリー電子図書館となるべくサイトの構成を見直していきたいと思っています。その一歩として、「ウェブアクセシビリティ」に関する学習も進める必要があります。

そもそもウェブアクセシビリティとは?という方のために以下のリンク先の一文を引用させて頂きます。

ウェブアクセシビリティとは:みんなのウェブ

「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」

ウェブアクセシビリティの公的な規格としてはW3Cの勧告である『Web Content Accessibility Guidelines 2.0 (WCAG2.0)』とJIS規格である『JIS X 8341-3:2016』があります。WCAG2.0は2012年に『ISO/IEC 40500:2012』としてISO標準となりました。どちらもレベルA、レベルAA、レベルAAAという3つのレベルの達成基準が定められており、技術に依存しない記述内容となっています。

ウェブアクセシビリティの土台には「知覚可能」、「操作可能」、「理解可能」、及び「堅ろう(牢)(robust)」の4つの原則があり、各原則の下に12のガイドラインが存在します。ガイドラインの下には61の達成基準がありそれぞれに先の3つのレベルが割り当てられています。

サイト運営者はいつまでにどのレベルを目指すかやその対象範囲をウェブアクセシビリティ方針として標榜する、ということがウェブアクセシビリティに対応したサイト作りの第一歩のようです。

ウェブアクセシビリティ方針策定ガイドライン

ウェブアクセシビリティをテストするためにブラウザ上のテキストを音声で読み上げる方法は、一般的にはスクリーンリーダーというソフトウェアを用います。有料のソフトウェアの購入は難しいので今回はオープンソースのスクリーンリーダーを試してみました。

www.nvda.jp

自サイトに対し使用してみた結果は、当然ではありますがスクリーンリーダー使用者にはサイトの内容はほとんど伝わらないということでした。特にクリックやタップを前提とした作りが多いページではキーボード操作しか選択肢のない閲覧者にとってはコンテンツの挙動を把握することができません。また、OSやブラウザとの相性が悪いのかしばらく使用しているとスクリーンリーダーが落ちてしまう現象も頻繁に発生しました。そういった点を踏まえ、八雲文庫ではまずは達成基準の「キーボード操作」を満たせるようHTMLを見直し、適宜Web Speech APIによる音声ナビゲーションもできるようにすることを目指していきたいと思います。参考としてですが、内閣府ホームページのウェブアクセシビリティ達成基準チェック結果は以下のリンク先で見ることができます。

ウェブアクセシビリティ検証結果 - 内閣府

八雲文庫のリリースから2ヵ月、まだまだサイトの良さをユーザーに伝えきれていませんし、そもそもサイト自体がユーザーの欲求を満たせるレベルには至っていないのかもしれません。元々自身の技術力の向上のために始めたサイト運営ではありますが、1人でも多くの方に文芸作品の素晴らしさを伝えられるよう、日々サイトの品質を向上させ今後のマーケティングにも活かしていきたいと思います。