EPUBの非テキストコンテンツに長文の代替テキストをつける

　プリントディスアビリティのある人の利用を想定して、学術書のEPUBを制作するにあたり、原本にある図や表、写真などでEPUBでは、画像として挿入するコンテンツ（以下、「非テキストコンテンツ」）について、それと同じ目的を果たし、同じ情報を提供するためのテキスト（以下「代替テキスト」）をどのように提供するかという点でしばらく悩んでいました(今も悩んでいる)。代替テキストは、制作の対象が学術書であること（資料的要素の高い非テキストコンテンツが多い）、また、それに付随して、利用される想定が、アカデミックな用途であること、音訳での非テキストコンテンツの説明のノウハウ（仕様）をそのまま活用したことから、代替テキストも長文のものが多くなります。DIAGRAM Centerが公開している以下のガイドラインで作成される代替テキストをイメージすると、それに近いものだと思います（これに準拠したわけではないのですが、情報の粒度や内容は結果として似てくる気がします。要件を整理すると考えることは似てくるのでしょうか）。

Image Description Guidelines – DIAGRAM Center

　代替テキスト簡潔に短く済むのであれば、alt属性に記述すればよいのですが、長文になると、alt属性に記述するのが躊躇われます。そこで、alt属性以外の方法で、長文の代替テキストをどのように提供するべきか、以下の1から3-4を検証しましたが、結論から述べると、現在のEPUBの閲覧環境の実装を考慮すると、3-4のハイパーリンクが最も妥当という結論になりました。

1 長文の代替テキストを画像の後に配置する

　一番単純なのは、以下のパターン１のように画像の直後にその長文の代替テキストを置くことです。例えば、以下のような感じ。

<figure>
<figcation>表1-1 平成元年から平成２０年までのブログエントリ数 </figcation>
<p>※著者が「○○白書」から構成を変更して作成</p>
<img src="../table1_1.jpg" alt="表1-1の画像。内容説明はこの後にあり。">
</figure>
<p>表1-1の内容説明、開始。</p>
（長文の代替テキスト本文）
<p>内容説明、終わり</p>

　しかし、上のように本文の間に長文の代替テキストそのまま置いてしまうと、本文を読み上げている時に長文の代替テキストも上から順に読み上げてしまいます。全ての読者に長文の代替テキストを読み上げさせることになり、本文のみを読みたい読者にとっては、必要がない箇所を読ませてしまうことになってします。

2 スキップリンクをつける

　1にスキップリンクをつけて、長い内容説明をスキップできるようにする方法もあります。DAISY2.02で作成される音声DAISYでも、図表などの内容説明をスキップできるよう、これと同様の対応がよくされています。

<figure>
<figcation>表1-1 平成元年から平成２０年までの某</figcation>
<p>※著者が「○○白書」から構成を変更して作成</p>
<img src="../table1_1.jpg" alt="表1-1の画像。内容説明はこの後にある。">
</figure>
<a href="#desc_end01">内容説明スキップ<a>
<p>表1-1の内容説明、開始。
（長文の代替テキスト本文）
<p id="desc_end01">内容説明、終わり</p>

　これはEPUBのどの閲覧環境の実装でも可能なはずですので、現在でも採用できる対応だと思います。ただ、長文の代替テキストを持つ非テキストコンテンツが１点、２点であればともかく、多くある場合は、本文だけが読みたい人は、その都度、スキップリンクを使用することが必要になりますので、煩わしいかもしれません。長文の代替テキストを必要とする人だけが、その都度、操作してそれを長文の代替テキストを読めるようにしたほうがよいかもしれません。
　

3 別の場所に長い説明テキストを配置する

　長文の代替テキストが複数ある場合は、章末なり、巻末にまとめておいて、本文から必要なユーザーが参照できるようにするという方法考えられます。これについては、方法が以下のようにいくつか提案されています。まとめると、longdesc属性を使用する方法、WAI-ARIAを使用する方法、単純にハイパーリンクを配置する方法の３つでしょうか。

3-1 longdesc属性を使用する

　HTMLのlongdesc属性を使用する方法です。longdesc属性の用途としては、別のところに配置した長文の代替テキストへのURLを格納する属性で、まさに今回の目的にぴったりの属性です。以下は、長文の代替テキストを本文と分けてhtmlファイルを作成した例ですが、別に同一html内に長文の代替的スを配置し、longdesc属性で関連付けても仕様上は全く問題ないはず。

<!--本文-->
<figure>
<figcation>表1-1 平成元年から平成２０年までの某</figcation>
<p>※著者が「○○白書」から構成を変更して作成</p>
<img src="../table1_1.jpg" alt="表1-1の画像。内容説明はこの後にある。" longdesc=”longdescription01.html#desc1_1" >
</figure>


<!--longdescription01.htmlファイル。各非テキストコンテンツの内容説明が章ごとに集約されている例-->
<section>
<h1>第1章の図表の内容説明</h1>
<section>
<h2 id="desc1_1">表1-1 平成元年から平成２０年までの某 の内容説明</h2>
（表1-1の長文の代替テキスト本文）
</section>
<section>
<h2 id="desc1_2">表1-2 昭和２５年から昭和41年までの甲乙丙 の内容説明</h2>
（表1-２の長文の代替テキスト本文）
</section>
<section>
<h2 id="desc1_2">表1-３ 平成と昭和における玩具の対象年齢の推移 の内容説明</h2>
（表1-３の長文の代替テキスト本文）
</section>
…
</section>

　longdesc属性は、ほとんど使用されていないためか、一度HTMLの仕様から消えて、また、HTML5の拡張仕様として2015年に復活したようです。

　
　そういう状況なので、現時点において、EPUBの閲覧環境で実際に使用できるものかどうかです。EPUB閲覧環境よりは実装が進んでいるはずの、ウェブブラウザとスクリーンリーダーの組み合わせ（PC-Talker+IE１１、NVDA+FF）で検証してみました。

Long Description Test Page

　PC-Talker+IE１１だと、「説明付き」、NVDA+FFだと、「詳細説明あり」と読み上げてくれます。しかし、エンターを押すと、NVDA+FFだとlongdesc属性で指定された箇所に遷移するのですが、PC-Talker+IE１１だと、うまく遷移してくれませんでした。もう少し検証が必要かもしれませんが、ウェブブラウザとスクリーンリーダーの組み合わせでもこの状況なので、おそらくそれより実装が遅れているEPUBの閲覧環境では、まだ利用できる段階ではないと思われました。

3-2 WAI-ARIAのaria-describedbyを使用する

　WAI-ARIAのaria-describedbyを使用する方法です。longdesc属性の対応が進んでいないためか、IDPFの掲示板でもaria-describedbyを使用することが勧められていたりしています。aria-describedbyを使用する場合は、同一のhtmlファイル内に長文の代替テキストを配置する必要があるようです。


<figure><!--本文-->
<figcation>表1-1 平成元年から平成２０年までの某</figcation>
<p>※著者が「○○白書」から構成を変更して作成</p>
<img src="../table1_1.jpg" alt="表1-1の画像。内容説明はこの後にある。" aria-describedby=”#desc1_1" >
</figure>
……
<!--同一htmlファイル内の末尾-->
<section>
<h1>第1章の図表の内容説明</h1>
<section>
<h2 id="desc1_1">表1-1 平成元年から平成２０年までの某 の内容説明</h2>
（表1-1の長文の代替テキスト本文）
</section>
<section>
<h2 id="desc1_2">表1-2 昭和２５年から昭和41年までの甲乙丙 の内容説明</h2>
（表1-２の長文の代替テキスト本文）
</section>
<section>
<h2 id="desc1_2">表1-３ 平成と昭和における玩具の対象年齢の推移 の内容説明</h2>
（表1-３の長文の代替テキスト本文）
</section>
…
</section>

　aria-describedby は、フォームにフォーカスを当てた時のようにimg要素にフォーカスを当てたら、長文の代替テキストが有無言わさず読み上げられる懸念もあったのですが、以下のサンプルで検証してみました。

Long Description Test Page

　結果は以下のとおり。ウェブブラウザとの組み合わせも以下なので、EPUBにaria-describedbyを使用するのは現段階ではちょっと時期尚早かなという感じ。

	PC-Talker+IE11	NVDA+FF
Image with aria-describedby Attribute (Same Page Description)	画像にフォーカスをあてるとその箇所を読み上げる。	画像にフォーカスをあててもaria-describedbyで紐づけた箇所は読み上げず
Image with aria-describedby Attribute (Link to External Page Description)	リンクテキストを読み上げる。エンターを押すと、リンク先に移動するが、aria-describedbyで紐づけたリンクテキストのリンク先と異なる。	「詳細説明あり」と読む。エンターを押すとaria-describedbyで紐づけたリンクテキストのリンク先に遷移

　なお、Accessibility Test Suiteにもaria-describedbyのサンプルが公開されており、少し古いものの、以下で検証結果が公開されていますが、img要素に用いるにはまだまだという印象があります。

Accessibility Test Suite | aria-describedby results

3-3 WAI-ARIA の aria-details を使用する（未検証）

　まだ時期尚早と思い、検証まではしていませんが、将来的はaria-detailsを使用する方法も有り得そうです（longdesc属性とどちらの未来がくるのか・・）。aria-describedby よりは aria-details のほうが属性の目的にかなっているかもしれません。

aria-details属性は、aria-describedbyによって通常提供されるよりも詳細な情報を提供する単一の要素を参照する。
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 – aria-details （プロパティ）

3-4 ハイパーリンクを使用する

longdesc属性やaria-describedby が使用できないとなると、単純に長文の代替テキストのハイパーリンクを配置するという方法が考えられます。これについては、以下の例２と例３でサンプルが掲載されています。

Images / Accessible Publishing Knowledge Base

例えば、以下の様な感じでしょうか。長文の代替テキストから本文に戻れるように相互リンクにしています。　なお、以下は、同一htmlファイル内に長文の代替テキストを配置していますが、別のhtmlファイル内に配置しても特に問題ありません。

<!--本文-->
<figure>
<figcation>表1-1 平成元年から平成２０年までの某</figcation>
<p>※著者が「○○白書」から構成を変更して作成</p>
<img src="../table1_1.jpg" alt="表1-1の画像。内容説明はこの後にある。" aria-describedby=”#desc1_1" >
<p><a id="ref1_1″ href="#desc1_1">画像の詳細な内容説明へのリンク</a></p>
</figure>
…
<section>
<h1>第1章の図表の内容説明</h1>
<section>
<h2 id="desc1_1">表1-1 平成元年から平成２０年までの某 の内容説明</h2>
（表1-1の長文の代替テキスト本文）
<p><a href="#ref1_1">本文へ戻る</a></p>
</section>
<section>
<h2 id="desc1_2">表1-2 昭和２５年から昭和41年までの甲乙丙 の内容説明</h2>
（表1-２の長文の代替テキスト本文）
<p><a href="#ref1_2">本文へ戻る</a></p>
</section>
<section>
<h2 id="desc1_2">表1-３ 平成と昭和における玩具の対象年齢の推移 の内容説明</h2>
（表1-３の長文の代替テキスト本文）
<p><a href="#ref1_3">本文へ戻る</a></p>
</section>
…
</section>

　ハイパーリンクは、おそらくどのEPUB閲覧環境でも実装されていますので、別の場所に長文の代替テキストを配置する場合はこの方法が現時点においては、もっとも取れうる方法だと思います。そして、長文の代替テキストが多々使用されるEPUBの場合も、この方法が妥当という結論に個人的にはなりました。
　
　上では、epub:typeのnoteref、endnotes、endnoteを使用していますが、現時点ではあってもなくても問題無いかと思います。ただ、これらをつけるとEPUBの閲覧環境では、リンクではなく、ポップアップとして長文の代替テキストが表示される可能性があります。その場合のスクリーンリーダーでの読み上げはどうなのか、長文だとポップアップにはどのように表示されてしまうのかというあたりは、要検証でしょうか。
※2017年12月21日追記
　epub:typeのnoterefを使用すると、iBooks、KoboのiOS版、Microsoft Edgeでテキストがポップアップして表示されること、iBooksはポップアップ先のファイルのサイズを100kb程度に留めないとビューアがハングアップする可能性があることをご指摘いただきました。長文の代替テキストでは、100kbを超える可能性が高いこと、そもそもポップアップで長文の代替テキストを表示させることで利便性が高まるかどうか疑問があることから、上のサンプルコードからepub:typeのnoteref、endnotes、endnoteを記述している部分を削除しました。

余談 EPUB 3 CG での議論

　W3C EPUB 3 Community Groupの２０１７年11月30日の電話会議でも長文の代替テキストの提供について議論されていました。この１１月３０日会議の議事録から該当部分を転載します。

Best practices for extended descriptions
Avneesh:: no way to provide extended descriptions currently. Data attributes/ Described_by has limitations for images. Publishers want longer descriptions. Screen readers have difficulty if text is long.
Avneesh: http://kb.daisy.org/publishing/docs/html/images.html#ex-02
Avneesh: https://benetech.app.box.com/s/5zt5jbz4fydu8hlqulb649l2vdo736mq
Avneesh:: need a simple alternative that will work in most reading systems. Matt made recommendation based on simple linking mechanism. Link above ... described_by is not going away. this is one of several options. diagramcentral.org BISG already aware and discussing QuickStart guide. ... One concern - information is outdated in IDPF guidance. Knowledgebase is providing outdated info to publishers.
Luc Audrain: +1
Tzviya:: why is ARIA necessary? HTML recommendations seem sufficient.
Tzviya: see https://github.com/w3c/html/issues/561
Clapierre:: publishers dont want URL link as text (ugly) testing with an image that links but clickable images are problem in some readers
Rachel:: need for extended descriptions in science, psychology, etc. Cant disrupt visual user experience and degrade pedagogical experience.
Wolfgang: s/cant/can't/
Avneesh:: latest version of Edge supports but IE will not collapse it.
Minutes 30 November 2017 · w3c/publ-cg Wiki