要約

表紙画像にある情報の説明を含めます。

テクニック

• 画像が周囲のテキストで説明されていない場合は、 alt属性に代替テキストを入力します。[[WCAG-1.1.1]]

• 複雑な画像には拡張説明を提供します。[[WCAG-1.1.1]]

例

<img src="images/cover.jpg"
     role="doc-cover"
     alt="EPUB 3 Best Practices - O'Reilly - Pencil drawing of a goat">

<img src="images/cover.jpg"
     role="doc-cover"
     alt="Accessible EPUB 3 - O'Reilly - Pencil drawing of a goat"
     aria-describedby="cover-desc">
<p id="cover-desc" hidden="hidden">Best practices for creating universally usable content.
   Excerpt from EPUB 3 Best Practices</p>

<manifest xmlns:dc="http://purl.org/dc/elements/1.1/" …>
   <item src="images/cover.jpg"
         id="cover"
         media-type="image/jpeg"
         properties="cover-image"/>
   …
</manifest>

よくある質問

代替テキストに「表紙：」と付ける必要がありますか?

これは、画像が表紙であることを識別するのに便利な従来の方法ですが、現在は doc-coverロールを使用できるようになったため、必須ではなくなりました。また場合によっては重複した情報を提供してしまうことになります。
支援技術はこのロールがある場合に、画像が表紙であることを認識するべきですが、このロールのサポートはまだ広く普及していないため、この方法を引き続き使用することは許容されます。

解説

表紙画像は、タイトルや著者だけでなく、出版物に関する重要な情報を伝えることがよくあります。表紙は、出版物と他の作品との関係など、追加のコンテキストを提供する場合もあります。また、出版物の表紙画像が、その本を識別するのにつかわれることもあります (たとえば、教授は教科書の表紙の主要な特徴を参照することがよくあります)。

表紙画像は重要であるにもかかわらず、役に立たない代替テキスト「表紙画像」のみで説明されていることが依然としてよくあります。そうすると、画像を見られないユーザーは、出版物が口語的な説明と一致しているかどうかを判断できないため、不利益になります。

このため、代替テキストには、表紙に関する関連情報をできるだけ多く含めることをお勧めします。画像に表示されているテキストを含めることは良い出発点ですが、必要に応じて、表紙画像自体の短い説明も含めます (たとえば、一部の表紙には画像が含まれず、単色のみの場合があります)。

表紙に絵画、工芸品、古代遺物の写真が掲載されている場合など、表紙についてより長い説明が必要になることもあります。

<meta name="cover" content="manifest_cover_id" />

関連リンク

• EPUB 3 — cover-imageプロパティ