diff --git a/publishing/ja/html/dpub-aria/doc-abstract.html b/publishing/ja/html/dpub-aria/doc-abstract.html new file mode 100644 index 00000000..57c5f779 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-abstract.html @@ -0,0 +1,74 @@ + + + + + doc-abstract + + + + + + +
+
+

解説

+

作品の主要な考え、概念、結論、または作品内のセクションや抜粋を短く要約したもの。

+
+ +
+

例

+ +
+
+
例1 — 記事の要約と示された段落
+
+ 
<article aria-labelledby="hd">
+   <h2 id="hd">Deoxyribonucleic Acid Self-Replication</h2>
+   <p role="doc-abstract">The cause of self-replicating DNA…</p>
+   …
+</section>
+
+ +
+
+
例2 — 複数の段落を含む要約
+
+ 
<div role="doc-abstract">
+   <p>This paper examines the effects of …</p>
+   …
+</div>
+
+
+ +
+

ARIAとの関係

+ +

doc-abstractは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-abstractは通常、 複数の段落で構成される場合にdiv要素で使用しますが、要約が一つの段落であれば、pタグでも使用できます。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-acknowledgments.html b/publishing/ja/html/dpub-aria/doc-acknowledgments.html new file mode 100644 index 00000000..e00e164d --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-acknowledgments.html @@ -0,0 +1,66 @@ + + + + + doc-acknowledgments + + + + + + +
+
+

解説

+

作品の実現に際して、個人、組織、政府、その他の団体による多大な貢献に感謝を示すセクションまたは声明。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの謝辞
+

ラベルはaria-labelledby属性で識別します。

+
+ 
<section role="doc-acknowledgments" aria-labelledby="ack-hd">
+   <h2 id="ack-hd">A Word of Thanks</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-acknowledgmentsは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-acknowledgmentsは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-afterword.html b/publishing/ja/html/dpub-aria/doc-afterword.html new file mode 100644 index 00000000..f0f39c9a --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-afterword.html @@ -0,0 +1,68 @@ + + + + + doc-afterword + + + + + + +
+
+

解説

+ +

著者または重要人物による締めくくりの言葉で、通常、コンテンツが書かれるに至った経緯、その意義、またはその時系列以降に起こった関連する出来事についての洞察を提供します。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの後書き
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-afterword" aria-labelledby="aft-hd">
+   <h2 id="aft-hd">Afterword by I.M. Faymus</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-afterwordはlandmarkロールです。

+
+ +
+

使用方法

+ +

doc-afterwordは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-appendix.html b/publishing/ja/html/dpub-aria/doc-appendix.html new file mode 100644 index 00000000..30cc56c8 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-appendix.html @@ -0,0 +1,68 @@ + + + + + doc-appendix + + + + + + +
+
+

解説

+ +

主なコンテンツの後ろに配置され、コンテンツの内容を伝えるものの、コンテンツの中心ではない補足情報のセクション。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの付録（appendix）
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-appendix" aria-labelledby="appa-hd">
+   <h2 id="appa-hd">Appendix A: A Timeline of Celestial Events</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-appendixはlandmarkロールです。

+
+ +
+

使用方法

+ +

doc-appendixは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-backlink.html b/publishing/ja/html/dpub-aria/doc-backlink.html new file mode 100644 index 00000000..7adad940 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-backlink.html @@ -0,0 +1,65 @@ + + + + + doc-backlink + + + + + + +
+
+

解説

+ +

ユーザーがコンテンツ内の関連する場所に戻れるように設けられたリンクです（例：脚注からその参照箇所、あるいは用語集の定義から用語を使用している場所へのリンク）。

+
+ +
+

例

+ +
+
+
例 1 — 注の参照へのバックリンク
+
+ + 
<p role="doc-endnote">
+   1. The first of three instances is the last to end up in …
+   <a href="s01.html#fnref-01" role="doc-backlink">[note 1 reference]</a>
+</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-baclinkは、linkロールからセマンティクスを継承しています。

+
+ +
+

使用方法

+ +

doc-backlinkは通常、 a要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-biblioentry.html b/publishing/ja/html/dpub-aria/doc-biblioentry.html new file mode 100644 index 00000000..433dd318 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-biblioentry.html @@ -0,0 +1,88 @@ + + + + + doc-biblioentry（廃止） + + + + + + +
+
+

解説

+ +

作品の最後または作品の中のセクションに出現する、注を集めたものの一つで、参照されているテキストの一節に追加のコンテキストを提供します。

+
+ +
+

例

+ +
+
+
例 1 — ネイティブHTML要素を使用した参考文献リスト
+

この例では、olリスト要素を使用してリストを表現しています。

+
+ + 
<section role="doc-bibliography" aria-labelledby="bib-hd">
+   <h2 id="bib-hd">Select Bibliography</h2>
+   <ol>
+      <li>Doe, John. Anonymous People through History. …</li>
+      …
+   </ol>
+</section>
+
+ +
+
+
例 2 — ARIAロールを使用した参考文献リスト
+

この例では、ARIAのlistおよびlistitemロールを使用してリストを定義します。

+
+ + 
<section role="doc-bibliography" aria-labelledby="bib-hd">
+   <h2 id="bib-hd">Select Bibliography</h2>
+   <div role="list">
+      <div role="listitem">
+         Doe, John. Anonymous People through History. …
+      </div>
+      …
+   </div>
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-biblioentryは、listitemロールからセマンティクスを継承しています。

+
+ +
+

使用方法

+ +

doc-biblioentryロールの明示的な使用は非推奨です。このロールはARIAの継承モデルの変更と互換性がなく（つまり、listに組み込めるのはlistitemロールのみ）、将来のバージョンで変更する必要があります。

+ +

doc-bibliographyロールを持つセクション内のリストにあるリスト項目の子は、自動的に bibliograpahy 項目であるとみなされるようになりました。

+ +

参考文献で各項目を表すのにリストを使用しない場合は、代わりにコアlistおよびlistitemロールを使用する必要があります。（例2を参照）。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-bibliography.html b/publishing/ja/html/dpub-aria/doc-bibliography.html new file mode 100644 index 00000000..31cb24f1 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-bibliography.html @@ -0,0 +1,69 @@ + + + + + doc-bibliography + + + + + + +
+
+

解説

+ +

作品内で引用されている外部参考文献のリスト。印刷物またはデジタルソースの場合があります。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの参考文献
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-bibliography" aria-labelledby="bib-hd">
+   <h2 id="bib-hd">Works Cited</h2>
+   …
+</section>
+ +
+
+ +
+

ARIAとの関係

+ +

doc-bibliographyは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-bibliographyは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-biblioref.html b/publishing/ja/html/dpub-aria/doc-biblioref.html new file mode 100644 index 00000000..2e828093 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-biblioref.html @@ -0,0 +1,64 @@ + + + + + doc-biblioref + + + + + + +
+
+

解説

+ +

参考文献の各項目への参照。

+
+ +
+

例

+ +
+
+
例 1 — 参考文献の各項目への参照
+
+ + 
<p>
+   … "with great power comes great responsibility" <a href="biblio.html#spidey" role="doc-biblioref">[SPIDERMAN]</a>…
+</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-bibliorefは、linkロールからセマンティクスを継承しています。

+
+ +
+

使用方法

+ +

doc-bibliorefは通常、 a要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-chapter.html b/publishing/ja/html/dpub-aria/doc-chapter.html new file mode 100644 index 00000000..1f4b62ea --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-chapter.html @@ -0,0 +1,68 @@ + + + + + doc-chapter + + + + + + +
+
+

解説

+ +

作品内のコンテンツの主要なテーマ別セクション。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの章
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-chapter" aria-labelledby=c01-hd">
+   <h2 id="c01-hd">Chapter 1</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-chapterはlandmarkロールです。

+
+ +
+

使用方法

+ +

doc-chapter通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければいけません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-colophon.html b/publishing/ja/html/dpub-aria/doc-colophon.html new file mode 100644 index 00000000..fc79c5d0 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-colophon.html @@ -0,0 +1,77 @@ + + + + + doc-colophon + + + + + + +
+
+

解説

+ +

その版に特有のプロダクションノートの短いセクション（使用されている書体の説明など）で、作品の末尾に置かれることが多い。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの奥付（colophon）
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-colophon" aria-labelledby="col">
+   <h2 id="col">Notes on the Type</h2>
+   …
+</section>
+
+ +
+
+
例 2 — 見出しのないプロローグ
+

ラベルはaria-label属性で提供します。

+
+ + 
<p role="doc-colophon" aria-label="Colophon">
+   This edition was set on Linotype …
+</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-colophonはsectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-colophonは、通常、奥付が複数の段落で構成されている場合、 sectionとdiv要素で使用しますが、奥付が見出しのない単一の段落である場合は、pタグで使用できます。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-conclusion.html b/publishing/ja/html/dpub-aria/doc-conclusion.html new file mode 100644 index 00000000..7abc0131 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-conclusion.html @@ -0,0 +1,68 @@ + + + + + doc-conclusion + + + + + + +
+
+

解説

+ +

作品を要約したり、物語を締めくくったりする、結論のセクションまたは文章。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの結論
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-conclusion" aria-labelledby="concl-hd">
+   <h2 id="concl-hd">Final Thoughts</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-conclusionはlandmarkロールです。

+
+ +
+

使用方法

+ +

doc-conclusionは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければいけません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-cover.html b/publishing/ja/html/dpub-aria/doc-cover.html new file mode 100644 index 00000000..a8a9e451 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-cover.html @@ -0,0 +1,67 @@ + + + + + doc-cover + + + + + + +
+
+

解説

+ +

作品の雰囲気やトーンを決定づける画像で、通常、タイトルと著者が記載されています。

+
+ +
+

例

+ +
+
+
例1 — 表紙画像
+
+ + 
<img role="doc-cover" class="cover-img" src="cover.jpg" alt="…"/>
+
+
+ +
+

ARIAとの関係

+ +

doc-coverは、imgロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-coverは、画像を識別するために、通常はimg要素で使用します。コンテナ要素（例：sectionやdiv）内で表紙ページの全コンテンツをひとまとめにする目的で使用するのは適切ではありません。

+ +

出版物の表紙は通常、文書のランドマークには不要ですが、必要に応じてARIA regionロールを使用して追加できます。

+
<section role="region" aria-label="Cover">
+   <img role="doc-cover" class="cover-img" src="cover.jpg" alt="…"/>
+</section>
+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-credit.html b/publishing/ja/html/dpub-aria/doc-credit.html new file mode 100644 index 00000000..4b187833 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-credit.html @@ -0,0 +1,68 @@ + + + + + doc-credit + + + + + + +
+
+

解説

+ +

写真などの、サードパーティのソースから統合されたコンテンツの出典を示します。通常は、作成者、著作権、再利用についての制限を明示します。

+
+ +
+

例

+ +
+
+
例1 — 画像クレジット
+
+ + 
<figure>
+   <img src="bandersnatch.jpg" alt="The Bandersnatch" />
+   <figcaption>
+      …
+      <p role="doc-credit">Image courtesy of …</p>
+   </figcaption>
+</figure>
+
+
+ +
+

ARIAとの関係

+ +

doc-creditは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナーを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-creditは通常、クレジットが単一の段落であるか、複数の段落で構成されているかどうかに応じて、 p要素とdiv要素で使用されます。クレジットのセクション内に複数の個別クレジットが含まれている場合は、セクションの目的によって内容がすでに明確になっているため、個々のクレジットを明示することは推奨されません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-credits.html b/publishing/ja/html/dpub-aria/doc-credits.html new file mode 100644 index 00000000..d2f4fa9e --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-credits.html @@ -0,0 +1,69 @@ + + + + + doc-credits + + + + + + +
+
+

解説

+ +

クレジットの集まり。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きのクレジットセクション
+

ラベルはaria-labelledby属性で識別されます。

+
+ + 
<section role="doc-credits" aria-labelledby="cred-hd">
+   <h2 id="cred-hd">Image Permissions</h2>
+   <p>Page 18 — Photograph of …</p>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-creditsは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-creditsは通常、 section要素で使用されます。ユーザーはセクションの目的をすでに認識しているため、クレジットのセクション内で個々のクレジットを明示することは推奨されません。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-dedication.html b/publishing/ja/html/dpub-aria/doc-dedication.html new file mode 100644 index 00000000..23939186 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-dedication.html @@ -0,0 +1,64 @@ + + + + + doc-dedication + + + + + + +
+
+

解説

+ +

作品の冒頭に書かれた献辞で、通常は著者に近しい一人以上の人物に敬意を表します。

+
+ +
+

例

+ +
+
+
例1 — 献辞
+
+ + 
<section role="doc-dedication">
+   <p>To all the girls I've loved before …</p>
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-dedicationは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナーを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-dedicationは通常、クレジットが単一の段落であるか複数の段落で構成されているかどうかに応じて、 p 、 section 、およびdiv要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-endnote.html b/publishing/ja/html/dpub-aria/doc-endnote.html new file mode 100644 index 00000000..1bba014c --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-endnote.html @@ -0,0 +1,90 @@ + + + + + doc-endnote（廃止） + + + + + + +
+
+

解説

+ +

作品の最後またはそのセクション内に出現する、注釈の集まりの一つで、参照されたテキストの一節に追加のコンテキストを提供します。

+
+ +
+

例

+ +
+
+
例 1 — ネイティブHTML要素を使用した文末脚注のリスト
+

この例では、 olリスト要素を使用してリストを表現しています。

+
+ + 
<section role="doc-endnotes" aria-labelledby="note-hd">
+   <h2 id="note-hd">Notes</h2>
+   
+   <ol>
+      <li id="n001">1. In the far reaches of space …</li>
+      …
+   </ol>
+</section>
+
+ +
+
+
例2 — ARIA ロールを使用した文末脚注のリスト
+

この例では、ARIAのlistおよびlistitemロールを使用してリストを定義します。

+
+ + 
<section role="doc-endnotes" aria-labelledby="note-hd">
+   <h2 id="note-hd">Notes</h2>
+   
+   <div role="list">
+      <div role="listitem" id="n001">
+         1. In the far reaches of space …
+      </div>
+      …
+   </div>
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-endnoteは、listitemロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-endnoteロールの使用は推奨していません。このロールはARIAの継承モデルの変更と互換性がなく（つまり、 listはlistitemロールのみを含めなければならず）、将来のバージョンで変更されなければいけません。

+ +

doc-endnotesロールを持つセクション内のリストにあるリスト項目の子は、自動的に個別の文末脚注であるとみなされるようになりました。

+ +

文末脚注セクションで各項目を表すのにリストを使用しない場合は、代わりにコアlistおよびlistitemロールを使用する必要があります（例2を参照）。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-endnotes.html b/publishing/ja/html/dpub-aria/doc-endnotes.html new file mode 100644 index 00000000..0a808dfe --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-endnotes.html @@ -0,0 +1,73 @@ + + + + + doc-endnotes + + + + + + +
+
+

解説

+ +

作品の最後またはそのセクション内にある注釈の集まり。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの文末脚注
+

ラベルはaria-labelledby属性で識別されます。

+
+ + 
<section role="doc-endnotes" aria-labelledby="note-hd">
+   <h2 id="note-hd">Notes</h2>
+   
+   <section>
+      <h3>Chapter 1</h3>
+      …
+   </section>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-endnotesは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-endnotesは通常、 section要素で使用します。非互換性を解決する語彙の新しいバージョンがリリースされるまでは、doc-endnotesロールを含む要素では少なくとも一つdoc-endnoteロールを持つ要素が必要であるという要件は、無視する必要があります。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければいけません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-epigraph.html b/publishing/ja/html/dpub-aria/doc-epigraph.html new file mode 100644 index 00000000..d742841c --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-epigraph.html @@ -0,0 +1,67 @@ + + + + + doc-epigraph + + + + + + +
+
+

解説

+ +

テーマを確立したり雰囲気を設定したりする、作品の冒頭やセクションに置かれた引用句の部分。

+
+ +
+

例

+ +
+
+
例1 — 題辞
+
+ + 
<blockquote role="doc-epigraph">
+   <p>I always get to where I'm going 
+         by walking away from where I have been.</p>
+         
+   <footer>—Winnie the Pooh</footer>
+</blockquote>
+
+
+ +
+

ARIAとの関係

+ +

doc-epigraphは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-epigraphは通常、 blockquote要素とsection要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-epilogue.html b/publishing/ja/html/dpub-aria/doc-epilogue.html new file mode 100644 index 00000000..9e8d1f3b --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-epilogue.html @@ -0,0 +1,80 @@ + + + + + doc-epilogue + + + + + + +
+
+

解説

+ +

通常は未来の視点から、作品の展開や出来事をまとめたりコメントしたりする物語の結論部分。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きのエピローグ
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-epilogue" aria-labelledby="epi-hd">
+   <h2 id="epi-hd">Ten Years Later</h2>
+   …
+</section>
+
+ +
+
+
例2 — 見出しのないエピローグ
+

セクションのラベルはaria-label属性で指定します。

+
+ + 
<section role="doc-epilogue" aria-label="Epilogue">
+   <p>Long after the events of the story concluded, I still found myself wondering …</p>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-epilogueは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-epilogueは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-errata.html b/publishing/ja/html/dpub-aria/doc-errata.html new file mode 100644 index 00000000..37d689a4 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-errata.html @@ -0,0 +1,68 @@ + + + + + doc-errata + + + + + + +
+
+

解説

+ +

作品の初回の出版後に発見された一連の訂正で、正誤表（corrigenda）と呼ばれることもあります。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの正誤表
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-errata" aria-labelledby="corr-hd">
+   <h2 id="corr-hd">Errata for the Fifth Edition</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-errataは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-errataは通常、 section要素内で使用します。リスト要素ではこのロールを使用しません。正誤表のリストは、 doc-errataロールがセットされている要素の中に現れます。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-example.html b/publishing/ja/html/dpub-aria/doc-example.html new file mode 100644 index 00000000..8f1c3a24 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-example.html @@ -0,0 +1,83 @@ + + + + + doc-example + + + + + + +
+
+

解説

+ +

作品の主要概念についての図解、コードリスト、ケーススタディ、問題点など。

+
+ +
+

例

+ +
+
+
例1 — 図表の例
+
+ + 
<figure role="doc-example" aria-labelledby="ex01-hd">
+   <figcaption>
+      <p class="hd" id="ex01-hd">Example 1 — Glucose Molecule</p>
+      
+      <details>
+         <summary>Description</summary>
+         <p>The 6 carbon atoms are ordered …</p>
+       </details>
+   </figcaption>
+   
+   <img src="glucose.jpeg" alt="C6H1206" aria-describedby="glucose-desc"/>
+</figure>
+
+ +
+
+
例2 — コードの例
+
+ + 
<p>The most basic hello world example:</p>
+   <pre role="doc-example">print "Hello World!";</pre>
+<p>can be executed after compiling …</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-exampleは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-exampleは通常、figure要素とpre要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-footnote.html b/publishing/ja/html/dpub-aria/doc-footnote.html new file mode 100644 index 00000000..5dcee1dc --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-footnote.html @@ -0,0 +1,64 @@ + + + + + doc-footnote + + + + + + +
+
+

解説

+ +

参照されたテキストの一節に追加のコンテキストを提供する、引用元や解説などの、補助的な情報。

+
+ +
+

例

+ +
+
+
例1 — 脚注
+
+ + 
<aside role="doc-footnote">
+   <p>1. …</p>
+</aside>
+
+
+ +
+

ARIAとの関係

+ +

doc-footnoteは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-footnoteは通常、aside要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-foreword.html b/publishing/ja/html/dpub-aria/doc-foreword.html new file mode 100644 index 00000000..6e014f8e --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-foreword.html @@ -0,0 +1,68 @@ + + + + + doc-foreword + + + + + + +
+
+

解説

+ +

作品の前にある導入部分で、通常は作品の著者によって書かれるものではありません。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの序文
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-foreword" aria-labelledby="hd01">
+   <h2 id="hd01">Foreword by Francis Bacon</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-forewordは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-forewordは通常、section要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-glossary.html b/publishing/ja/html/dpub-aria/doc-glossary.html new file mode 100644 index 00000000..916199c9 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-glossary.html @@ -0,0 +1,74 @@ + + + + + doc-glossary + + + + + + +
+
+

解説

+ +

コンテンツ内で使用される新しい用語、一般的でない用語、または専門用語の簡単な辞書。

+
+ +
+

例

+ +
+
+
例1 — 見出し付き用語集
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-glossary" aria-labelledby="gloss-hd">
+   <h2 id="gloss-hd">Terms and Definitions</h2>
+   <dl>
+      <dt><dfn>newfangled</dfn></dt>
+      <dd>an improved version that does not …</dd>
+      …
+   </dl>
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-glossaryは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-glossaryは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

注記: dt要素の定義が矛盾しているため、定義リスト ( dl ) でこのロールを使用することは現在推奨されていません。ARIA の将来のバージョンでは、セマンティクスが明確化されることが期待されています。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-glossref.html b/publishing/ja/html/dpub-aria/doc-glossref.html new file mode 100644 index 00000000..cbeb66e9 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-glossref.html @@ -0,0 +1,65 @@ + + + + + doc-glossref + + + + + + +
+
+

解説

+ +

用語集の定義への参照。

+
+ +
+

例

+ +
+
+
例1 — 用語集の各項目への参照
+
+ + 
<p>
+   In monetary policy, <a href="glossary.html#stir" role="doc-glossref">short term interest rates</a> allow 
+   central banks to …
+</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-glossrefは、linkロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-glossrefは通常、 a要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-index.html b/publishing/ja/html/dpub-aria/doc-index.html new file mode 100644 index 00000000..b6b04143 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-index.html @@ -0,0 +1,68 @@ + + + + + doc-index + + + + + + +
+
+

解説

+ +

その作品で取り上げられている主要なテーマ、名前、その他の重要なトピックへのリンクの詳細なリストを提供するナビゲーション補助機能。

+
+ +
+

例

+ +
+
+
例 1 — 見出し付き索引
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<nav role="doc-index" aria-labelledby="idx-hd">
+   <h2 id="idx-hd">Name Index</h2>
+   …
+</nav>
+
+
+ +
+

ARIAとの関係

+ +

doc-indexは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-indexは通常、 nav要素とsection要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-introduction.html b/publishing/ja/html/dpub-aria/doc-introduction.html new file mode 100644 index 00000000..d3899ba9 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-introduction.html @@ -0,0 +1,80 @@ + + + + + doc-introduction + + + + + + +
+
+

解説

+ +

通常、作品の範囲または性質を紹介する予備的なセクション（序文）。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの序文
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-introduction" aria-labelledby="intro-hd">
+   <h2 id="intro-hd">Introduction</h2>
+   …
+</section>
+
+ +
+
+
例2 — 見出しのない序文
+

ラベルはaria-label属性で提供されます。

+
+ + 
<section role="doc-introduction" aria-label="Introduction">
+   <p>Recent theory about the nature of gravity …</p>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-introductionは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-introductionは通常、 section要素で使用します。

+ +

aria-labelledby 、 aria-label 、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-noteref.html b/publishing/ja/html/dpub-aria/doc-noteref.html new file mode 100644 index 00000000..b761e588 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-noteref.html @@ -0,0 +1,67 @@ + + + + + doc-noteref + + + + + + +
+
+

解説

+ +

脚注または文末脚注への参照で、通常、本文に上付き数字または記号として表示されます。

+
+ +
+

例

+ +
+
+
例1 — 脚注への参照
+
+ + 
<p> … as exhibited in the work of Prof.
+   Farnsworth.<a role="doc-noteref" href="#fn-01" class="sup">1</a>
+</p>
+<aside id="fn-01" role="doc-footnote">
+   <p>1. The Fing-Longer is one of the …</p>
+</aside>
+
+
+ +
+

ARIAとの関係

+ +

doc-noterefは、linkロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-noterefは通常、a要素で使用します。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-notice.html b/publishing/ja/html/dpub-aria/doc-notice.html new file mode 100644 index 00000000..72f6fddf --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-notice.html @@ -0,0 +1,77 @@ + + + + + doc-notice + + + + + + +
+
+

解説

+ +

アクションやイベントから生じる可能性のある結果をユーザーに通知します。例としては、警告、注意、危険などがあります。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの通知
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<div role="doc-notice" class="danger" aria-labelledby="alert01">
+   <img id="alert01" src="warn.jpg" alt="Warning"/>
+   <p>Serious bodily injury may result …</p>
+</div>
+
+ +
+
+
例2 — 見出しのない通知
+

ラベルはaria-label属性で提供します。

+
+ + 
<div role="doc-notice" class="warning" aria-label="warning">
+   <p>Exercise caution when mixing …</p>
+</div>
+
+
+ +
+

ARIAとの関係

+ +

doc-noticeは、noteロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-noticeは通常、 div要素で使用します。このロールは、色が重要度の主な指標として使用される場合に特に便利です（たとえば、警告には黄色の枠線が、危険には赤色の枠線が、明示的なラベルの代わりに使用される場合があります）。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-pagebreak.html b/publishing/ja/html/dpub-aria/doc-pagebreak.html new file mode 100644 index 00000000..15d1a9db --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-pagebreak.html @@ -0,0 +1,79 @@ + + + + + doc-pagebreak + + + + + + +
+
+

解説

+ +

静的にページ付けされたコンテンツの二つの連続したページ間で、ページ区切りが挿入される位置を示す区切り記号。

+
+ +
+

例

+ +
+
+
例1 — hr要素を使用したページ区切り
+
+ + 
<hr id="pg004" role="doc-pagebreak" aria-label="4">
+
+ +
+
+
例2 — 明示的なページ番号によるページ区切り
+
+ + 
<div id="pg032" role="doc-pagebreak">32</div>
+
+ +
+
+
例3 — 段落内の文中でのページ区切り
+
+ + 
<p> … the <span id="pg159" role="doc-pagebreak" aria-label="159"/>
+   interregnum period was characterized by …</p>
+
+
+ +
+

ARIAとの関係

+ +

doc-pagebreakは、separatorロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-pagebreakは、通常、hr、div、およびspan要素で使用されます。ページ番号は、aria-label属性または要素のテキストコンテンツのいずれかで明確に表現する必要があります。要素のIDでは「page」や「pg」などの接頭辞を使用するのが一般的ですが、ラベルにはそのような接頭辞を付けないでください（つまり、ソースにも接頭辞が付けられていない限り、ラベルには数字のみを付ける必要があります）。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-pagelist.html b/publishing/ja/html/dpub-aria/doc-pagelist.html new file mode 100644 index 00000000..72b220b8 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-pagelist.html @@ -0,0 +1,73 @@ + + + + + doc-pagelist + + + + + + +
+
+

解説

+ +

コンテンツ内のページ区切りへのリンクの一覧を提供するナビゲーション補助機能。

+
+ +
+

例

+ +
+
+
例1 — ページ一覧ナビゲーション
+
+ + 
<nav role="doc-pagelist" aria-labelledby="pg-hd">
+   <h2 id="pg-hd">List of Pages</h2>
+   <ol>
+      <li><a href="#intro.html#pgi">i</a></li>
+      <li><a href="#intro.html#pgii">ii</a></li>
+      …
+      <li><a href="#c01.html#pg001">1</a></li>
+      …
+   </ol>
+</nav>
+
+
+ +
+

ARIAとの関係

+ +

doc-pagelistはlandmarkロールです。

+
+ +
+

使用方法

+ +

doc-pagelistは通常、nav要素で使用します。ページ一覧の作成の詳細については、ページナビゲーションを参照してください。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-part.html b/publishing/ja/html/dpub-aria/doc-part.html new file mode 100644 index 00000000..5228a852 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-part.html @@ -0,0 +1,68 @@ + + + + + doc-part + + + + + + +
+
+

解説

+ +

特定の主題、物語の流れ、または同様の要約されたテーマなどの、一連の関連セクションを含む作品における、主要な構造区分。

+
+ +
+

例

+ +
+
+
例1 — 見出しのあるパート
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-part" aria-labelledby="p1-hd">
+   <h2 id="p1-hd">I — The Visitor</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-partは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-partは通常、 section要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-preface.html b/publishing/ja/html/dpub-aria/doc-preface.html new file mode 100644 index 00000000..d8cb51da --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-preface.html @@ -0,0 +1,69 @@ + + + + + doc-preface + + + + + + +
+
+

解説

+ +

作品の前にある導入部分で、通常、作品の著者が書きます。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの序文
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-preface" aria-labelledby="pref-hd">
+   <h2 id="pref-hd">Prefatory Note from the Author</h2>s
+   <p>When I first put pen to paper …</p>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-prefaceは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-prefaceは通常、 section要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定しなければなりません。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-prologue.html b/publishing/ja/html/dpub-aria/doc-prologue.html new file mode 100644 index 00000000..8cfb771c --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-prologue.html @@ -0,0 +1,68 @@ + + + + + doc-prologue + + + + + + +
+
+

解説

+ +

作品の背景を設定する導入部分。通常は物語の一部です。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きのプロローグ
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-prologue" aria-labelledby="prol-hd">
+   <h2 id="prol-hd">Prologue</h2>
+   …
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-prologueは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-prologueは通常、 section要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定する必要があります。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-pullquote.html b/publishing/ja/html/dpub-aria/doc-pullquote.html new file mode 100644 index 00000000..76195819 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-pullquote.html @@ -0,0 +1,79 @@ + + + + + doc-pullquote + + + + + + +
+
+

解説

+ +

トピックに注意を引いたり、重要なポイントを強調したりするために、現在のコンテンツから目立つように配置または強調表示された引用文。

+
+ +
+

例

+ +
+
+
例1 — テキスト内で使用されるプルクオート
+
+ + 
<p>With a deafening crack, 
+   <span role="doc-pullquote presentation" id="pq01">a
+   cornice broke free high above, unleashing a massive 
+   avalanche</span>. … </p>
+
+ +
+
+
例2 — テキストから複製されたプルクオート
+
+ + 
<blockquote role="doc-pullquote presentation" aria-hidden="true">
+   there are few things as important as toast
+</blockquote>
+
+
+ +
+

ARIAとの関係

+ +

doc-pullquoteは、noneロールからセマンティクスを継承します（つまり、プレゼンテーション用です）。

+
+ +
+

使用方法

+ +

このロールは、通常、プルクオートが出版物のコンテンツ内でタグ付けされている場合にspan要素で使用します（つまり、テキストは後でスクリプトによって抽出され、フォーマットされてプレゼンテーション用のプルクオートが作成されます）。

+ +

doc-pullquoteは、引用文が別の要素に複製された場合に、通常、 blockquote、aside、div要素で使用します。これらの場合にaria-hidden属性を追加すると、支援技術のユーザーに再度コンテンツが読み上げられるのを防ぐことができます。ARIAの将来のバージョンでは、プルクオートのような繰り返しコンテンツに新しいロールが導入され、例えば、デフォルトでは無視されるものの、引用文をざっと読みたいユーザーは引き続きそこにアクセスできるようなプルクオートの機能が追加される予定です。

+ +

注：ARIA 1.1仕様では現在、noneのサポートが普及するまで、presentationをバックアップロールとして追加することを推奨しています。noneを継承しているdoc-pullquoteにも、同じアドバイスが適用されます。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-qna.html b/publishing/ja/html/dpub-aria/doc-qna.html new file mode 100644 index 00000000..6600e20f --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-qna.html @@ -0,0 +1,69 @@ + + + + + doc-qna + + + + + + +
+
+

解説

+ +

インタビューやよくある質問のリストなど、一連の質問と回答として構成されたコンテンツのセクション。

+
+ +
+

例

+ +
+
+
例1 ― 見出し付きの著者の質問と回答
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<section role="doc-qna" aria-labelledby="qna-hd">
+   <h2 id="qna-hd">Interview with the Author</h2>
+   <dl>
+   	<dt>What … is your favourite colour?</dt>
+   	<dd>Blue. I mean yel—auuuugh!</dd>
+   </dl>
+</section>
+
+
+ +
+

ARIAとの関係

+ +

doc-qnaは、sectionロールからセマンティクスを継承します（つまり、関連コンテンツのコンテナーを表しますが、ランドマークではありません）。

+
+ +
+

使用方法

+ +

doc-qnaは通常、sectionとdiv要素で使用します。dtとdd要素はデフォルトではリスト項目とは見なされないので、このロールはdl要素に対し直性の使用もできます。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-subtitle.html b/publishing/ja/html/dpub-aria/doc-subtitle.html new file mode 100644 index 00000000..0a43841c --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-subtitle.html @@ -0,0 +1,66 @@ + + + + + doc-subtitle + + + + + + +
+
+

解説

+ +

作品、またはその中のセクションやコンポーネントの説明または代替タイトル。

+
+ +
+

例

+ +
+
+
例1 — ヘッダーのサブタイトル
+
+ + 
<hgroup>
+   <h2>Section 1 — Applied Metaphysics</h2>
+   <p role="doc-subtitle">Who makes up this stuff?</p>
+</hgroup>
+
+
+ +
+

ARIAとの関係

+ +

doc-subtitleは、sectionheadロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-subtitleは通常、p要素で使用され、関連する見出しとともにhgroup要素に含まれます。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+ +
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-tip.html b/publishing/ja/html/dpub-aria/doc-tip.html new file mode 100644 index 00000000..bbcdc25a --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-tip.html @@ -0,0 +1,65 @@ + + + + + doc-tip + + + + + + +
+
+

解説

+ +

コンテンツの一部を明確にしたり、その理解を助ける役に立つ情報。

+
+ +
+

例

+ +
+
+
例1 — 便利なヒント
+
+ + 
<div role="doc-tip" class="tip">
+   Counting on your fingers is an easy path to success!
+</div>
+
+
+ +
+

ARIAとの関係

+ +

doc-tipは、noteロールからセマンティクスを継承します。

+
+ +
+

使用方法

+ +

doc-tipは通常、div要素とp要素で使用します。

+ + +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/doc-toc.html b/publishing/ja/html/dpub-aria/doc-toc.html new file mode 100644 index 00000000..cb37c163 --- /dev/null +++ b/publishing/ja/html/dpub-aria/doc-toc.html @@ -0,0 +1,71 @@ + + + + + doc-toc + + + + + + +
+
+

解説

+ +

コンテンツ内の主要なセクションの見出しへのリンクの順序付きリストを提供するナビゲーション補助機能。目次は、作品全体をカバーする場合もあれば、作品の一部のみをカバーする場合もあります。

+
+ +
+

例

+ +
+
+
例1 — 見出し付きの目次
+

ラベルはaria-labelledby属性で識別します。

+
+ + 
<nav role="doc-toc">
+   <h2 id="hd05">Contents</h2>
+   <ol>
+      <li><a href="chapter01.html">Chapter 1</a></li>
+      …
+   </ol>
+</nav>
+
+
+ +
+

ARIAとの関係

+ +

doc-tocは、landmarkロールです。

+
+ +
+

使用方法

+ +

doc-tocは通常、nav要素で使用します。

+ +

aria-labelledby、aria-label、またはtitle属性のいずれかを使用して、ロールにラベルを指定する必要があります。

+ +

role属性に認められる値についての簡易リストは、EPUBタイプによるARIAロール製作ガイド（EPUB Type to ARIA Role Authoring Guide）の対応表をご覧ください。正式なリストは、HTMLのARIAについて（ARIA in HTML）を参照してください。

+
+
+

関連リンク

+ +
+
+ + diff --git a/publishing/ja/html/dpub-aria/index.html b/publishing/ja/html/dpub-aria/index.html new file mode 100644 index 00000000..e5126275 --- /dev/null +++ b/publishing/ja/html/dpub-aria/index.html @@ -0,0 +1,179 @@ + + + + + <a>デジタル出版ロール</a> + + + + + + + +
+
+

解説

+ +

デジタル出版 WAI-ARIAモジュール（DPUB-ARIA）は、ARIA仕様を拡張したものです。ARIArole属性で使用するための、出版物に特化したロールが用意されています。

+ +

出版ロールは、出版物を使いやすくすることを目的としており、具体的には、支援技術おいて重要な構造に関する追加情報を提供し、一般的な出版のマークアップの用法をアクセシブルにします。

+ +

これらのロールはワークフローのセマンティクスの機構として意図されたものではないため、たとえばEPUB構造セマンティクス語彙と同じ対象範囲に使用しないでください。ロールの使用回数と使用方法の両方に注意する必要があります。ロールを誤って使用すると、出版物のアクセシビリティに悪い影響があります。

+
+ +
+

ロール

+ + +
+ +
+

よくある質問

+ +
+
暗黙のロールとは何ですか？また、なぜそれが重要なのですか？
+
+

多くのHTML要素にはデフォルトのアクセシビリティ セマンティクスがあるため、明示的なロールは必要ありません。たとえば、 nav要素には暗黙のロールnavigationがあります。同様に、 aside要素には暗黙のロールcomplementaryがあります（要素とその暗黙のロールの完全なリストについては、 HTMLのARIAについて（ARIA in HTML）を参照してください）。

+ +

これらの暗黙のロールの特徴として、割り当てられたロールが認識されない場合、支援技術が不明なロールを無視して暗黙のロールをデフォルトとして使用します。これにより、支援技術は、たとえば認識していない新しいロールに遭遇した場合でも、文書を理解できます。

+ +

支援技術がDPUB ARIAロールを認識しない問題を回避するために、要素に暗黙のロールがある場合は、使用するロールが同じ親ロールを持つようにします（例：nav要素でナビゲーション ロールを使用する）。

+ +

この問題は、DPUB ARIAモジュールのサポートが普及するにつれて減少するでしょう。暗黙のロールがいつも認識されるわけではないという報告もあり、この解決策は完璧ではありません。

+
+
フォールバックロールはどのような時に使いますか？
+
+

暗黙のロールがないHTML要素（例えば、spanやdiv）には、DPUB ARIAモジュールからロールを割り当てる際に、コアARIA仕様のフォールバックロールも併せて割り当てることをお勧めします。これにより、そのDPUBロールが支援技術によってまだサポートされていない場合でも、ロールのおおまかな目的を把握できるようになります。

+ +

role属性ではスペースで区切られた複数のロールを使用できるため、DPUB ARIAロールの後にARIAフォールバック ロールを追加できます。

+ +
+
+

例：noteロールは、DPUB ARIA doc-tipロールのフォールバックとして使用できます。

+
+ 
<div role="doc-tip note">
+
+ +

ロールの順序は重要なので、DPUBロールの前にARIAロールを追加しないでください。そうした場合DPUBロールが認識されなくなります。

+ +

暗黙のセマンティクスの一致の問題と同様に、フォールバック セマンティクスの必要性は、時間が経つにつれて減少していくでしょう。フォールバック セマンティクスを使う方法は完璧ではないことも知られており、フォールバックがすべてのケースで認識されるとは限りません。

+
+ +
出版物のすべてのセクションをランドマークにしないのはなぜですか？
+
+

ユーザーは既に目次を利用できます。目次の方が、出版物の構造を理解して移動する上で、はるかに効果的な手段です。ランドマークは、ユーザーがアクセスしたい重要なセクションにすぐに移動するできることを目的としています。

+ +

ランドマークは構造化されていないリンクのリストなので、すべてのセクションをランドマークに設定すると、かえってユーザーが構造を理解しにくくなります。すべてのセクションをランドマークにすると、ページ内のランドマークの総数が不必要に増え、リストの有用性（つまり、重要なセクションをすばやく見つけられるかどうか）が低下します。

+
+ +
EPUB構造セマンティクス語彙にすべてのセマンティクスのロールがないのはなぜですか？
+
+

EPUB構造セマンティクス語彙は、主に出版社の内部ワークフローにセマンティクスを提供するために設計されました。それに加えて、この属性は有用なロールにアクセシビリティマッピングを提供するという役割も果たすことが期待されていましたが、この期待が実行可能なソリューションとして実現することはありませんでした。EPUB構造セマンティクス語彙とともに使用されるepub:type属性は支援技術に認識されておらず、既存のARIAロールとどのように調和させるかという関心も持たれていません。

+ +

その結果、EPUB語彙には、出版物のユーザビリティを向上させるためのものだけでなく、それ以上に膨大な数のセマンティクスが含まれています。出版物にすべてのセマンティクスを実装すると、ユーザーに不要な情報が大量に送信され、出版物が読みにくくなります（つまり、読んでいるときに多くのセマンティクスノイズが発生します）。

+
+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/svg.html b/publishing/ja/html/svg.html new file mode 100644 index 00000000..69f188c8 --- /dev/null +++ b/publishing/ja/html/svg.html @@ -0,0 +1,209 @@ + + + + + SVG（エスブイジー） + + + + + + + +
+
+

要約

+ +

視覚コンテンツ、テキスト、スクリプトのWCAGテクニックに従って、SVGをアクセシブルにします。

+
+ +
+

テクニック

+ + + +

SVGでサポートされているアクセシビリティ機能の詳細なリストについては、 SVG 2.0の付録Dを参照してください。

+
+ +
+

例

+ +
+
+
例1 — デフォルトの言語指定
+
+ 
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
+   …
+</svg>
+
+ +
+
+
例2 — 言語指定の上書き
+
+ 
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
+   …
+   <text … >I think therefore I am...</text>
+   <text … xml:lang="fr" lang="fr">Je pense donc je suis...</text>
+   <text … xml:lang="it" lang="it">Penso dunque sono...</text>
+   …
+</svg>
+
+ +
+
+
例3 — SVGにタイトルと説明文を付ける
+
+ 
<svg
+	 xmlns="http://www.w3.org/2000/svg"
+	 xml:lang="en" lang="en">
+   <title>The New EPUB Logo</title>
+   <desc>
+	  The EPUB logo is a lower-case letter E that has 
+	  been tilted 45 degrees to counter-clockwise so 
+	  that it appears to be sitting in balance on its 
+	  lower-left corner. The E is drawn as a single, 
+	  unclosed line of green starting at the centre 
+	  of the image, moving to the outer edge and then 
+	  continuing around in a box-like pattern. The
+	  external corners have all been rounded.
+   </desc>
+   …
+</svg>
+
+ +
+
+
例4 — 装飾的なSVG
+
+ 
<svg
+     xmlns="http://www.w3.org/2000/svg"
+     xml:lang="en" lang="en"
+     role="presentation">
+   …
+</svg>
+
+ +
+
+
例5 — リンクにタイトルを追加する
+
+ 
<a href="http://www.ontario.ca">
+   <title>Ontario government web site</title>
+   <g …>
+      …
+   </g>
+</a>
+
+
+ +
+

よくある質問

+ +
+
HTMLにSVGを埋め込むにはどのような方法が最適ですか？
+
+

SVGマークアップをHTMLドキュメントに直接埋め込む方法が最善であり、SVGのDOMが支援技術から参照できるようになります。埋め込みが機能するケースは多くないので、次に最適な方法はobject要素を使用する方法です。一部のブラウザーと支援技術の組み合わせでは、このアプローチには問題（DOMが公開されないなど）があることが報告されていますが、一般的にはこれはアクセシブルであり、object要素内にフォールバックを提供できます。

+ +

iframe要素の方が良い選択のように思えるかもしれませんが、この要素には、ユーザーエージェントがSVGをサポートしていない場合に、フォールバックを提供するための効果的な方法がないという欠点があります。

+ +

imgタグは、ユーザーが操作する必要がなく動的コンポーネント（スクリプトやアニメーション）を持たないSVGに限って使用してください。

+
+
+
+ +
+

説明

+ +
+

言語

+ +

支援技術がコンテンツを適切にレンダリングできるように、SVG画像内に含まれるテキストコンテンツには、常に言語を設定してください。

+ +

xml:lang属性は、SVG画像のルート要素であるsvg要素に付与されている場合に、画像内のテキストコンテンツのデフォルト言語を識別します。SVGがXMLパーサーによって解釈されない場合は、 lang属性も指定する必要があります。

+ +

画像内の個々のコンポーネントとテキスト要素にはxml:lang属性とlang属性を付与でき、デフォルト言語とは異なる言語のテキストを組み込めます。

+
+ +
+

タイトルと説明

+ +

支援技術のユーザーをサポートするために、出版物にとって重要なSVG画像には、常にタイトル（title）と説明（desc）を埋め込む必要があります。

+ +

提供される説明は、画像に含まれる情報に見合ったものでなければなりません。単純な画像にはaltのような説明を、複雑な画像にはより長い説明を使用します。

+ +

SVG画像を純粋に装飾目的で用いる場合は、タイトルや説明を付けないでください。このSVG要素に、ARIA role属性を付けて装飾用であると示してください。

+ +

SVG画像内のすべての重要なグラフィックコンポーネントには、画像全体のアクセシビリティを向上させるために、独自のタイトルや説明を付ける必要があります。

+
+ +
+

テキスト要素

+ +

画像にテキストコンテンツを組み込む場合は、支援技術から文章を利用できるようにtext要素を使用します。テキストの外観を歪めたり変更したりする場合にも、text要素を使うと、その変更を解読できない人にも文章を利用できるようになります。

+ +

コンポーネントのtitleがSVGにテキストとして含まれている場合は、新しいtextノードを作成する代わりに、 tref要素を使用して文章を参照できます。

+
+ +
+

リンク

+ +

SVGグラフィックコンポーネントは、 a要素でラップすることでリンクを付けることができます。リンクが付けられた要素には、参照されるリンク先リソースの特徴がわかるように、常にtitle要素を付けるようにしてください。

+ +

また、画像を拡大したり、どのコンポーネントがリンクされているかを下線や枠線などで確認できないユーザーのためには、特定のグラフィックコンポーネントがリンク可能で、他のコンポーネントがリンク不可能であることを明確に示す必要があります。

+
+ +
+

ARIA

+ +

aria-*属性はSVG要素につけることができます。役割（roles）、プロパティ（prooperties）、状態（states）を適切に設定し維持することで、すべてのユーザーが動的コンテンツ（カスタムコントロールとして使用されるSVG画像など）を操作できるようになります。

+ +

同様に、テキストに相当するグラフィックコンポーネントは、コンポーネントの現在の状態を反映するように更新してください。

+ +

SVG画像にスクリプトを記述する際には、デバイスに依存しないイベントを使用してください。すべてのユーザーが同じ方法で画像を操作するとは限りません。

+ +

ARIAランドマークロールを使用することで、複雑な画像のナビゲーションを簡素化できます。

+
+ + +
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables-captions.html b/publishing/ja/html/tables-captions.html new file mode 100644 index 00000000..2eee922a --- /dev/null +++ b/publishing/ja/html/tables-captions.html @@ -0,0 +1,108 @@ + + + + + 表のキャプション（テーブルキャプション） + + + + + + + +
+
+

要約

+ +

表の目的を説明するキャプションを追加します。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+
例1 — caption要素内の表のキャプション
+

この例では、table要素の中のネイティブなcaption要素でキャプションが提供されています。

+
+ + 
<table>
+   <caption>Table 4 — Weights and Measures</caption>
+   …
+</table>
+
+ +
+
+
例 2 — figcaption要素による表のキャプション
+

この例では、table要素がfigure要素内に置かれており、figcaption要素によってキャプションが提供されています。

+
+ + 
<figure>
+   <figcaption>Table 4 — Weights and Measures</figcaption>
+   <table>
+      …
+   </table>
+</figure>
+
+ +
+
+
例3 — aria-label属性による表のキャプション
+

この例では、キャプションを視覚的に提供できないため、aria-label属性を使用して追加します。

+
+ + 
<table aria-label="Weights and Measures">
+   …
+</table>
+
+
+ +
+

解説

+ +

出版物のテキストからその目的が完全に明らかで追加の説明が不要な表もありますが、そうではない表もよくあります。表は通常、それ自体で完結しており、テキストからは一時的に参照されるだけかもしれません。キャプションを追加することで、ユーザーはその表の目的を確実に把握できるようになります。

+ +

キャプションは見出しのようなもので、短く、表の具体的な目的を示すものでなければなりません。

+ +

キャプションを追加するには、主に二つの方法があります。

+ + + +

caption要素は、table要素下の最初の任意要素です（例 1を参照）。表の見出しがキャプションに指定されている場合、デフォルトでは表の上に斜体で表示されますが、このスタイルは変更できます。

+ +

また、figure要素を使用して、表をキャプションに関連付けることもできます。この場合、figcaption要素がキャプションを提供します（例2を参照）。表のcaption要素とは異なり、figcaptionはfigureの最初の要素にも最後の要素にもできます。

+ +

aria-label属性を使用して表にキャプションを追加することも可能ですが（例3を参照）、この方法は、視覚的なラベルを提供する方法がまったくない場合にのみ推奨されます。aria-label属性を使用すると、キャプションは支援技術のユーザーにしか伝わりません。また、すべての支援技術がこの方法でマークアップされたキャプションを読み上げるわけではありません。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables-headers.html b/publishing/ja/html/tables-headers.html new file mode 100644 index 00000000..60e35902 --- /dev/null +++ b/publishing/ja/html/tables-headers.html @@ -0,0 +1,238 @@ + + + + + 複雑なヘッダー（表見出し） + + + + + + + + +
+
+

要約

+ +

スコープだけでは識別できない複雑なヘッダーや、意味を成すために特定の方法で順序付ける必要がある複雑なヘッダーの場合は、headers属性を使用して、支援技術のユーザーが適切なコンテキストを利用できるようにします。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
例1 — 行末のヘッダー
+ +

次の表は、最初の行に出発地が定義され、後続の各行の末尾に目的地が定義された距離チャートを示しています。

+ +

この場合、ヘッダーは行の末尾にあるため、「row」のスコープを設定しても、すでに検出されたセルには適用されません。各セルにheaders属性を適用しなければなりません。

+ +

このような表は、見出しを行の先頭にして、追加のマークアップをしなくて済むように再構成した方が良いでしょう。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VancouverCalgarySaskatoonWinnipegTorontoMontrealSt. John's
7323633458385010314126020St. John's
427137433232240853902602Montreal
+ + 
<table>
+   <tr>
+      <th id="van">Vancouver</th>
+      <th id="cal">Calgary</th>
+      <th id="sask">Saskatoon</th>
+      <th id="win">Winnipeg</th>
+      <th id="tor">Toronto</th>
+      <th id="mon">Montreal</th>
+      <th id="stj">St. John's</th>
+      <th></th>
+   </tr>
+   <tr>
+      <td headers="van stj-dest">7323</td>
+      <td headers="cal stj-dest">6334</td>
+      <td headers="sask stj-dest">5838</td>
+      <td headers="win stj-dest">5010</td>
+      <td headers="tor stj-dest">3141</td>
+      <td headers="mon stj-dest">2602</td>
+      <td headers="stj stj-dest">0</td>
+      <th id="stj-dest">St. John's</th>
+   </tr>
+   
+   <tr>
+      <td headers="van mon-dest">4271</td>
+      <td headers="cal mon-dest">3743</td>
+      <td headers="sask mon-dest">3232</td>
+      <td headers="win mon-dest">2408</td>
+      <td headers="tor mon-dest">539</td>
+      <td headers="mon mon-dest">0</td>
+      <td headers="stj mon-dest">2602</td>
+      <th id="mon-dest">Montreal</th>
+   </tr>
+   …
+</table>
+
+ +
+
例2 — セクション分けされた表
+ +

この例では、見出し範囲ページの例1を、headers属性を使用してマークアップし、正しい列、行、セクションヘッダーを関連付ける方法を示します。

+ +

headers属性を使用すると、見出しの順序を並べ替えて、別の順序で読み取ることができます (たとえば、スコープで進む場合のデフォルトの「1950 Gondor female」ではなく、「Gondor female 1950」など)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
195019752000
Gondor
Male1,001,5421,583,7712,221,945
Female1,122,9471,782,3712,544,187
Mordor
…
+ + 
<table>
+   <thead>
+      <tr>
+         <th></th>
+         <th id="y50">1950</th>
+         <th id="y75">1975</th>
+         <th id="y00">2000</th>
+      </tr>
+   </thead>
+   <tbody>
+      <tr>
+         <th colspan="4" id="gdr">Gondor</th>
+      </tr>
+      <tr>
+         <th id="gmale">Male</th>
+         <td headers="gdr gmale y50">1,001,542</td>
+         <td headers="gdr gmale y75">1,583,771</td>
+         <td headers="gdr gmale y00">2,221,945</td>
+      </tr>
+      <tr>
+         <th id="gfem">Female</th>
+         <td headers="gdr gfem y50">1,122,947</td>
+         <td headers="gdr gfem y75">1,782,371</td>
+         <td headers="gdr gfem y00">2,544,187</td>
+      </tr>
+   </tbody>
+   <tbody>
+      <tr>
+         <th colspan="4" id="mdr">Mordor</th>
+      </tr>
+      …
+   </tbody>
+</table>
+
+
+ +
+

解説

+ +
+

注意

+ +

headers属性を使用して、製作者はセルに適用するヘッダーとその順序を正確に指定できますが、この属性が必要になるのは、多くの場合、表のレイアウトを簡素化するために再構築するのが望ましいというサインです。さらに、この属性により、変更が行われるたびにすべてのヘッダーを再同期しなければならず、テーブルマークアップの保守がより複雑になります。

+

したがって、この属性は控えめに使用する必要があります。

+
+ +

headers属性は、id属性値によってヘッダーテキストを含むセルを識別します。属性に含まれるidの順序によって、ヘッダーがユーザーにどのように通知されるかが決まるため、論理的な再生を確実に行うように注意する必要があります。

+ +

別の順序の方が意味をなす場合、ヘッダーの順序はマークアップと正確に一致する必要はありません（例2を参照）。

+ +

headersの使用は、テーブルを再構成して簡単にすることが絶対にできない場合の最後の手段と見なしてください。この属性は支援技術で十分にサポートされていないため、ユーザーにとっては各セルの見出しがわかりにくく不完全になることがあります。

+ +
+

注記

+

HTMLでは、td要素をヘッダーに使用することはできなくなりました（つまり、 td要素はheaders属性から参照できません）。

+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables-layout.html b/publishing/ja/html/tables-layout.html new file mode 100644 index 00000000..80372a76 --- /dev/null +++ b/publishing/ja/html/tables-layout.html @@ -0,0 +1,200 @@ + + + + + レイアウトに使用する表 + + + + + + + +
+
+

要約

+ +

コンテンツをグリッド状にレイアウトするには、テーブル要素ではなくCSSスタイルを使用します。

+ +
+

注意

+

HTML では、レイアウト目的でテーブルを使用することは規格違反になりました。詳細については、よくある質問を参照してください。

+
+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+
例1 — レイアウトテーブル
+

この例では、レイアウトテーブルを使用してリストを並べて配置しています。続く例は、このタイプのマークアップを回避する方法を示しています。

+
+ + 
<table role="presentation">
+   <tr>
+      <td>
+         <ul>
+            …
+         </ul>
+      </td>
+      <td>
+         <ul>
+            …
+         </ul>
+      </td>
+   </tr>
+</table>
+
+ +
+
+
例2 — 代替CSSグリッドレイアウト
+

この例では、例1のレイアウト用のテーブルがCSSのグリッドスタイルに置き換えられています。grid-template-columnプロパティは、使用可能なスペースの半分を二つの列のそれぞれに割り当てます。

+
+ + 
HTML:
+<div class="grid">
+   <ul>
+      …
+   </ul>
+   <ul>
+      …
+   </ul>
+</div>
+
+CSS:
+.grid {
+   display: grid;
+   grid-template-columns: repeat(2, 1fr);
+}
+
+
+ +
+
+
例3 — 代替のCSSのflexによるレイアウト
+

この例では、例1のレイアウト用のテーブルがCSSのflexによるスタイルに置き換えられています。

+
+ + 
HTML:
+<div class="flex">
+   <ul>
+      …
+   </ul>
+   <ul>
+      …
+   </ul>
+</div>
+
+CSS:
+.flex {
+   display: flex;
+   justify-content: space-evenly;
+}
+
+
+ +
+
+
例4 - 代替のCSSのtableによるレイアウト
+

この例では、例1のレイアウト用のテーブルがCSSのtableスタイルに置き換えられています。ロールpresentationが追加されているのは、支援技術によってテーブルであることを通知しないようにするためです（支援技術はCSSをテーブルのマークアップとして認識する可能性があります）。

+
+ + 
HTML:
+<div class="table" role="presentation">
+   <div class="row">
+      <ul class="cell">
+         …
+      </ul>
+      <ul class="cell">
+         …
+      </ul>
+   </div>
+</div>
+
+CSS:
+.table {
+   display: table;
+   width: 100vw;
+}
+.row {
+   display: table-row;
+}
+.cell {
+   display: table-cell;
+   width: 50vw;
+}
+
+
+ +
+

よくある質問

+ +
+
レイアウトテーブルの使用が違反になったのはいつですか？
+
+

元々、HTML5仕様には競合するものが２つありました。W3C版ではレイアウト用のテーブルを使用しないことを推奨しており、WHATWG版ではその使用を違反としていました。

+

W3C版のHTMLは現在廃止されており、EPUB3では参照されなくなったため、表形式のデータをレイアウトする場合を除いてテーブルを使用するのは無効となりました。

+

このように指針が分かれた結果、古い電子出版物にはレイアウト用のテーブルがあるかもしれません。これらのテーブルは、アクセシブルなレイアウトの要件に従う必要があります（つまり、セマンティックタグは使用しません）。

+

新しいコンテンツではレイアウト用のテーブルは使用できません。

+
+
+
+ +
+

解説

+ +

現在は、様々なCSSレイアウトモデルがサポートされているので、純粋に体裁を整える目的でテーブルを使用することは、もはや正当化されません。

+ +

現在のHTML仕様では、レイアウト用のテーブル使用は明確に禁止されています。

+ +
+

テーブルをレイアウト補助として使用しないでください。歴史的に、一部のウェブ製作者は、ページレイアウトを制御する方法として HTMLのテーブルを誤用してきました。この使用法は、不適切です。

+
+ +

レイアウトにテーブルを使用することは、支援技術のユーザーにとって常に問題でした。テーブルマークアップの使用は視覚的な読者には透過的ですが、支援技術のユーザーにはテーブル読み取りモードを強いることになります。これらのユーザーがコンテンツを読むためにはセルと行を移動しなければならないことをコンテンツ製作者がほとんど考慮せず、論理的に読みやすいレイアウトを保証していないことがよくありました。支援技術のユーザーはしばしば、レイアウトを論理的にたどるには、列を下に読むか、行を横切って読むかを推測しなければなりませんでした。

+ +
+

注記

+

epubcheckなどの検証ツールではレイアウト用のテーブルを検出できません。レイアウト用のテーブルが存在するかどうかは手動で検査しなければなりません。

+
+ +
+

古いコンテンツ

+ +

HTML要件の変更前に作成された電子出版物にはレイアウト用のテーブルが含まれている可能性があるため、このコンテンツは適切なアクセシビリティ ガイドラインに従うことが依然として重要です。

+ +

レイアウト用のテーブルの場合、テーブルのマークアップにはデータテーブル要素や属性を付けないでください。これらには、thead、th、caption要素、およびheaders属性とscope属性（HTML4またはXHTML 1.1ドキュメントを作成する場合はsummary属性も）が含まれます。

+ +

レイアウト用のテーブルが、支援技術によって確実に無視されるように、 presentationのロール属性も宣言する必要があります。

+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables-scope.html b/publishing/ja/html/tables-scope.html new file mode 100644 index 00000000..1776551c --- /dev/null +++ b/publishing/ja/html/tables-scope.html @@ -0,0 +1,179 @@ + + + + + ヘッダースコープ（見出しの範囲） + + + + + + + + +
+
+

要約

+ +

読み取っているデータのコンテキストを支援技術のユーザーが理解できるように、テーブルヘッダーが適用される列または行を識別します。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
例1 — セクション分けされた表
+ +

この例では、表は時間の経過に伴う人口の変化を示しています。表は架空の地域ごとにセクションに分割されているため、各セクションの見出しにスコープ「rowgroup」が適用され、グループ内のすべてのセルに関連付けられます（各tbody要素は新しいグループを定義します）。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
195019752000
Gondor
Male1,001,5421,583,7712,221,945
Female1,122,9471,782,3712,544,187
Mordor
…
+ + 
<table>
+   <thead>
+      <tr>
+         <th></th>
+         <th>1950</th>
+         <th>1975</th>
+         <th>2000</th>
+      </tr>
+   </thead>
+   <tbody>
+      <tr>
+         <th colspan="4" scope="rowgroup">Gondor</th>
+      </tr>
+      <tr>
+         <th>Male</th>
+         <td>1,001,542</td>
+         <td>1,583,771</td>
+         <td>2,221,945</td>
+      </tr>
+      <tr>
+         <th>Female</th>
+         <td>1,122,947</td>
+         <td>1,782,371</td>
+         <td>2,544,187</td>
+      </tr>
+   </tbody>
+   <tbody>
+      <tr>
+         <th colspan="4" scope="rowgroup">Mordor</th>
+      </tr>
+      …
+   </tbody>
+</table>
+
+
+ +
+

解説

+ +

scope属性は、ヘッダーとセルの関係を明確にするために使用されます。この属性は、要素の方向性を明確にするためにth要素に付加され、次の四つの値のいずれかを取ります。

+ +
+
col
+
+

col値は、ヘッダーがその下のセルまたは上のセルに適用されることを示します（言語の方向性によって異なります）。

+

col値は、複数の列にまたがるヘッダー（つまり、colspan属性を持つヘッダー）で使用できます。

+
+ +
colgroup
+
+

colgroup値は、ヘッダーが対応するcolgroup要素定義内のセルに適用されることを示します。

+

colgroup値は、常にテーブルのcolgroup要素宣言に対応しています。colgroup要素が定義されていない場合、値は無効です。

+
+ +
row
+
+

row値は、ヘッダーがその右側または左側のセルに適用されることを示します（言語の方向性によって異なります）。

+

row値は、複数の行にまたがるヘッダー（つまり、 rowspan属性を持つヘッダー）で使用できます。

+
+ +
rowgroup
+
+

rowgroup値は、ヘッダーが属する行のグループ内の上または下、および右または左（言語の方向性によって異なります）のセルにヘッダーが適用されることを示します。

+

行グループは、ヘッダーが含まれるthead 、 tbody 、またはtfootによって定義されます。これらの要素のいずれも指定されていない場合、属性値は無効です。

+
+
+ +

最初の行または列にヘッダーセルが含まれる単純な表では、スコープを指定する必要はありません。あいまいな場合は常にスコープを指定することをお勧めします。

+ +

たとえば、表がセクションに分割されている場合、行グループが適切に定義されていないと、各セクションのヘッダー行が各セルに対して読み上げられる可能性があります（例1を参照）。

+ +

このような曖昧さがある場合にスコープ情報を宣言しないと、支援技術はヘッダーを適用する方法について最善の推測をしようとして、誤った解釈をしてしまう可能性があります。

+ +
+

注記

+

一部のガイダンスでは、 colspanとrowspan属性が宣言されている場合には、colスコープとrowスコープを使用できず、適用可能な構造化要件を使用してcolgroupとrowgroupのスコープを定義する必要があるとされています。このアドバイスは正しくありません。

+
+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables-summary.html b/publishing/ja/html/tables-summary.html new file mode 100644 index 00000000..dfa73827 --- /dev/null +++ b/publishing/ja/html/tables-summary.html @@ -0,0 +1,152 @@ + + + + + 表の概要（テーブルサマリー） + + + + + + + +
+
+

要約

+ +

レイアウトが複雑な表には、その構造を説明する概要を追加します。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
+
例1 — 表のキャプションによる概要
+

これらの例では、概要が表のcaption要素内で提供されています。最初の例ではpタグが使用されており概要は常に表示されますが、もう一つの例ではdetails要素を使用して概要を折りたたんでいます。

+
+ + 
<table>
+   <caption>
+      <p class="title">Consolidated Statements of Operations<p>
+      <p class="desc">
+         The table contains the complete list of
+         operational expenses for the last three years.
+         These expenses are categorized within the table to …
+      </p>
+   </caption>
+   …
+</table>
+ + 
<table aria-details="tbl-desc">
+   <caption>
+      <p class="title">Consolidated Statements of Operations</p>
+      <details id="tbl-desc">
+         <summary>Description</summary>
+         <p class="desc">
+            The table contains the complete list
+            of operational expenses for the last
+            three years. These expenses are
+            categorized within the table to …
+         </p>
+      <details>
+   </caption>
+   …
+</table>
+
+ +
+
+
例2 — figuer内の概要
+

最初の例では、表の概要が図表のfigcaption要素内で提供されています。

+

二番目の例では、表の概要にdetails要素が使用されています。 details要素はEPUBのfigure内では十分にサポートされていないため、figureの後に配置され、aria-details属性を使用して図にリンクされています。

+
+ + 
<figure aria-details="tbl-desc">
+   <figcaption>
+      <p class="title">Consolidated Statements of Operations</p>
+      <p class="desc">
+         The table contains the complete list of
+         operational expenses for the last three years.
+         These expenses are categorized within the table to …
+      </p>
+   </figcaption>
+
+   <table aria-details="tbl-desc">
+      …
+   </table>
+</figure>
+ + 
<figure aria-details="tbl-desc">
+   <figcaption>Consolidated Statements of Operations</figcaption>
+
+   <table aria-details="tbl-desc">
+      …
+   </table>
+</figure>
+
+<details id="tbl-desc">
+   <summary>Description</summary>
+   <p class="desc">
+      The table contains the complete list
+      of operational expenses for the last
+      three years. These expenses are
+      categorized within the table to …
+   </p>
+<details>
+
+ +
+
+
例3 — ARIA属性に関連付けた非表示の概要
+

この例では、概要は視覚的に表示されません、このため、aria-describedby属性を使用して、非表示のテキストをテーブルにリンクしています。非表示のテキストは通常、支援技術では読み上げられませんが、ARIA属性を使用すると、ユーザーはこの概要が聞けるようになります。

+
+ + 
<table aria-describedby="tbl-desc">
+   …
+</table>
+
+<p id="tbl-desc" hidden="">
+   The table contains the complete list of
+   operational expenses for the last three years.
+   These expenses are categorized within the table to …
+</p>
+
+
+ +
+

解説

+ +

複雑な情報や構造を持つ表の場合、表の読み方についてユーザー向けに説明文を入れることで、大幅に理解しやすくなります。これらの概要は、コンテンツを見ることができないユーザーだけでなく、さまざまなユーザーのニーズに役立ちます。

+ +

表の概要は、ユーザーが表に辿りつく前に配置するのが理想的です。それができない場合は、aria-detailsやaria-describedbyなどのARIA属性を使用して、プログラムで概要を表にリンクできます。これらの属性により、概要が別の場所に配置されていたとしても、支援技術によって、ユーザーが表に辿り着いたときに概要が提供されます。

+ +

概要を追加する方法は沢山あります。このページではいくつかの方法を紹介していますが、HTML仕様には他の方法を詳しく説明したセクションもあります。これらの方法はすべて有効なので、どの方法を使用するかは、出版者のワークフローのニーズに応じて決めてください。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/tables.html b/publishing/ja/html/tables.html new file mode 100644 index 00000000..08812c2c --- /dev/null +++ b/publishing/ja/html/tables.html @@ -0,0 +1,15 @@ + + + + + 表（テーブル） + + + + + +
+

このページは「表（テーブル）の基本」に移動しました。

+
+ + diff --git a/publishing/ja/html/title.html b/publishing/ja/html/title.html new file mode 100644 index 00000000..098f2622 --- /dev/null +++ b/publishing/ja/html/title.html @@ -0,0 +1,79 @@ + + + + + ページタイトル + + + + + + + +
+
+

要約

+ +

意味のあるタイトルがついていれば、ユーザーは文書を読み始める前に、目的の文書を見つけて移動できます。

+
+ +
+

テクニック

+ + +
+ +
+

例

+ +
+
例1 — 章と作品を識別するタイトル
+ 
<html …>
+   <title>Chapter 1 — Hobo's Guide to the Universe</title>
+
+
+ + +
+
+
例2 — 章のセクションのタイトル
+

このケースでは、ベンダーの配布要件を満たすために、文書を小さなかたまりに分割しています。各かたまりには続きとしての位置づけが示されていますがそれ以上の具体的な意味はありません。

+
+ 
<html …>
+   <title>Chapter 1 - Continued (2 of 3) — Hobo's Guide to the Universe</title>
+
+
+
+ +
+

解説

+ +

出版物内のすべての文書に意味のあるタイトルを付けることで、ユーザーは自分がどこにいるのか、どの作品にいるのかをすぐに特定できます。内容に関するできるだけ具体的な情報（たとえば、文書が含まれるセクションの主な見出し）をタイトルに含めてください。すべての文書のタイトルに作品のタイトルを使用してください。

+ +

支援技術は通常、各文書がユーザーエージェントに最初に読み込まれたときにそのタイトルを読み上げ、そのタイトルを使用して、ユーザーが開いているタブの性質をユーザーに通知します。使用するユーザーエージェントの種類に関わらず、この動作は同じです。

+ +

タイトルがない場合、支援技術は通常、文書のファイル名を読み上げますが、ファイル名はほとんどの場合、意味のある情報ではありません。

+
+ +
+

関連リンク

+ + +
+
+ + diff --git a/publishing/ja/html/video.html b/publishing/ja/html/video.html new file mode 100644 index 00000000..c663a6a2 --- /dev/null +++ b/publishing/ja/html/video.html @@ -0,0 +1,228 @@ + + + + + ビデオ + + + + + + + +
+
+

要約

+ +

ビデオにラベルを付け、ユーザーによって再生を制御できるようにし、また、ビデオを見たり聞いたりできないユーザーや情報の処理に時間がかかるユーザーのために代替手段を設けます。

+
+ +
+

テクニック

+ + +
+ +
+

例

+
+
+
例 — ネイティブコントロールの有効化
+

controls属性を設定すると、ネイティブHTMLコントロールがデフォルトで有効になります。

+
+ 
<video … controls="controls">
+   …
+</video>
+
+ +
+
+
例 — ラベルの追加
+

aria-label属性でビデオのタイトルを示します。

+
+ 
<video … aria-label="The General">
+   …
+</video>
+
+ +
+
+
例 — 時間指定トラックを入れる
+

trackで、ビデオのサブタイトルとキャプションのファイルを識別します。kind属性は、指定されたトラックの性質を指定します。

+
+ 
<video
+       src="video/big-hollywood-blockbuster.mp4"
+       controls="controls"
+       aria-label="Kaplowy - The movie">
+   <track
+      kind="subtitles"
+      src="subtitles.en.vtt"
+      srclang="en"
+      label="English"/>
+   <track
+      kind="captions"
+      src="captions.en.vtt"
+      srclang="en"
+      label="English"/>
+</video>
+
+ +
+
+
例 — トランスクリプトの提供
+

トランスクリプトがビデオの後のdetails要素に含まれているため、ユーザーは要素を展開してテキストを読むかどうかを決定できます。

+
+ 
<video
+      src="video/the_general.mp4"
+      controls="controls"
+      aria-label="The General"
+      aria-details="#transcript">
+   …
+</video>
+<details id="transcript">
+	<summary>Transcript</summary>
+	<p>Jospeh M Schenck presents Buster Keaton
+	   in 'The General' …</p>
+	…
+</details>
+
+ +
+
+
例 — フォールバック時のエラーメッセージを付ける
+

ユーザーエージェントは、video要素をサポートしていない場合にのみ、この要素内のコンテンツをレンダリングします。提供されたビデオ形式をサポートしていない場合、ユーザーエージェントは、このコンテンツを表示しません（このような場合、ユーザーエージェントは独自のエラーメッセージを表示します）。

+
+ 
<video
+      src="video/the_general.mp4"
+      controls="controls"
+      aria-label="The General">
+   …
+   <div class="err">
+     <p>
+       Sorry, it appears your system 
+       does not support video playback.
+     </p>
+   </div>
+</video>
+
+ +
+
+
例 ― さまざまなアクセシビリティ機能を備えたビデオ
+

この例では、以上の例の要素を組み合わせた、埋め込みビデオの完全な例を示します。英語の字幕とキャプション、フォールバック時のコンテンツ、Webホスト バージョンへのリンク、およびトランスクリプトが組み込まれています。

+
+ 
<video
+      src="https://example.com/videos/the_general.mp4"
+      controls="controls"
+      aria-label="general"
+      aria-details="#transcript">
+   <track
+      kind="subtitles"
+      src="subtitles.en.vtt"
+      srclang="en"
+      label="English"/>
+   <track
+      kind="captions"
+      src="captions.en.vtt"
+      srclang="en"
+      label="English"/>
+   <p>Your reading system does not support the video
+      element. Please try the link to open the video in a
+      browser.</p>
+</video>
+<p>
+   <a href="https://example.org/videos/the_general.mp4">
+      Watch video in browser
+   </a>
+</p>
+<details id="transcript">
+   <summary>Transcript</summary>
+   <p></p>
+   …
+</details>
+
+
+ +
+
+
例 — 代替ビデオへのリンク
+

厳密にはアクセシビリティの問題ではありませんが、EPUB出版物がWeb上のビデオを参照する場合、ビデオへの別のリンクを提供することで、一部のユーザーが、リーディングシステムによってビデオにアクセスできない場合（リーディングシステムが外部リソースをブロックしている場合や、提供された形式を再生できない場合など）でもビデオにアクセスできるようになります。詳細については、リモートリソースに関するナレッジベースのページを参照してください。

+

ただし、この手法はユーザーがインターネットにアクセスできない場合には役に立たないので、可能な限りEPUBにビデオを埋め込むことを推奨します。

+

以下の例は、簡潔のためアクセシビリティ機能をマークアップから省略しています。

+
+ 
<video src="https://example.org/videos/the_general.mp4" …>
+   …
+</video>
+<p>
+   <a href="https://example.org/videos/the_general.mp4">
+      Watch video in browser
+   </a>
+</p>
+
+
+ +
+

解説

+ +

ビデオクリップを組み込む場合は、元からあるユーザーエージェント コントロールをデフォルトで有効にします（つまり、video要素にcontrols属性を設定します）。この方法により、スクリプトが利用できない場合でもコントロールにアクセスできるようになります。独自のカスタムコントロールを定義する場合は、JavaScriptでネイティブコントロールを無効にして、スクリプトをサポートしていないユーザーエージェントでもコントロールを利用できるようにしてください。

+ +

ビデオにラベルを付けると、ユーザーはビデオを視聴するかどうかを決める前に、ビデオの目的を理解できるようになります。たとえば、視覚的な読者向けにビデオのスナップショットを見せるために、コンテンツ製作者がポスター画像を指定できるとしても、全盲のユーザーには利用できません。これらのユーザーにとって、ラベルは、コンテンツをダウンロードせずに理解するための唯一の手段です。特に通信コストが高いモバイルデバイスのユーザーは、この情報があれば時間と費用の両方を節約できます。

+ +

代替手段を提供するという点では、WCAGでは、さまざまなユーザーグループのニーズに対応するために、ビデオコンテンツに複数の選択肢を求めています。

+ + + +

WCAGでは、トランスクリプトを「代替メディア」と呼んでいます。トランスクリプトは話し言葉の単なる羅列ではいけないからです。この中には、ビデオ内のアクションやその他の重要なイベントの説明が含まれていなければなりません。

+ +

レベルAからAAに進むと、要件も増加します。たとえば、レベルAAの音声付きビデオの場合、トランスクリプトだけでは不十分で、音声解説トラックが必要になります。

+ +

video要素は、フォールバック用の子コンテンツを許可していますが、このコンテンツはアクセシブルな代替手段として意図されたものではありません。ユーザーエージェントは、 video要素をサポートしていない場合にのみ、このコンテンツをユーザーに提供します（例：EPUB2ユーザーエージェント）。

+ +

また、ユーザーが支援技術（スクリーン リーダーなど）によって生成された音声を聞くことができるようにすることも重要です。音声付きのビデオを自動的に再生すると、テキストを聞く妨げとなるため、クリップの再生時間が3秒以下でない限り、ユーザーは支援技術をミュートせずに、再生を無効にするか、音量をミュートできる必要があります（ただし、システムの音声コントロールでは、すべての音声の音量が同時に上げ下げされるため、この要件を満たすことができません）。

+
+ +
+

関連リンク

+ + +
+
+ +