要約
セクションとリストを使用して索引を構成し、各項目へのアクセスを簡素化します。
テクニック
-
section
要素を使用して、関連するエントリーのセットをグループ化します。[[WCAG-1.3.1]] -
各セクションに見出しを含めます [[WCAG-1.3.1]]
-
ul
要素を使用して、エントリーのリストを構造化します。[[WCAG-1.3.1]] -
リンクを容易にするために、静的なページ区切り位置をテキストに含めます。[[WCAG-1.3.1]]
例
例1 — 明確な見出しのある索引
<nav role="doc-index">
<h1>Subject Index</h1>
<section>
<h2>A</h2>
<ul>
<li>
Apples, <a href="#page01">1</a>,
<a href="#page27">27</a>
</li>
…
</ul>
</section>
…
</nav>
例 2 — 暗黙的な見出しのある索引
索引エントリーのセットが視覚的なスペースによってのみ区切られている場合は、 aria-label
属性を使用して支援技術用の見出しを提供します。
<nav role="doc-index">
<h1>Index</h1>
<section aria-label="A">
<ul>
<li>
Apples, <a href="#page01">1</a>,
<a href="#page27">27</a>
</li>
…
</ul>
</section>
<section aria-label="B">
<ul>
<li>
Blueberries, <a href="#page01">1</a>,
<a href="#page27">27</a>
</li>
…
</ul>
</section>
…
</nav>
例3 — ヘッダー付き索引
header
要素を使用して、索引エントリーのリストの前に予備情報をグループ化します。
<nav role="doc-index">
<header>
<h1>Index</h1>
<p>This is an index to the main text …</p>
<p>Alphabetization is word-by-word: …</p>
</header>
…
</nav>
よくある質問
- EPUB インデックス仕様に従う必要がありますか?
-
epub:type
セマンティクスの使用は必須ではありませんが、この文書の構造化原則に従うことが推奨され、アクセシビリティに最も役立つ原則はこのページで繰り返し説明されています。これらのセマンティクスは出版社の内部ワークフローには役立つかもしれませんが、現時点ではリーディングシステムの索引を強化するものではなく、epub:type
セマンティクスはアクセシビリティを提供しません。現時点では仕様の採用が限られているため、仕様のパッケージ ドキュメント識別要件に従う必要はありません。
- 索引には
nav
要素とsection
要素のどちらを使用すればよいですか? -
どちらも技術的には許容されますが、
nav
要素を優先するべきです。索引は、目次と似て非なるナビゲーション補助機能で、コンテンツの重要な領域へのリンクのリストです。 - 複数のページにまたがるトピックにリンクするにはどうすればよいですか?
-
トピックにページ範囲が含まれている場合は、範囲全体にタグを付け、最初のページにリンクします。
<a href="c02.xhtml#pg49" aria-label="49 to 51">49–51</a>
最初のページと最後のページにリンクしたり、範囲を分割して個々のページにリンクしたりすることは避けてください。索引エントリーの意味は十分に確立されているため、範囲を一連のページにすると、特に句読点を読み上げない支援技術を使用している場合は、議論の範囲について読者を混乱させる可能性があります。
ユーザーが範囲の終わりに到達したことを判断できるように、テキストにページ区切りマーカーを含めるようにしてください。
解説
索引のアルファベット順および数字順に関連するエントリー間のナビゲーションを容易にするには、ネストされたsection
要素を使用します。多くの索引には、エントリーセット間の見出しとして数字または文字が含まれていますが、これらが存在しないか必要でない場合は、囲んでいるセクションのaria-label
属性に数字または文字を含めて、支援技術によって読み上げられるようにします。また、明示的または暗黙的な見出しがないと、支援技術ではセクション間を移動する機能が提供されないことがよくあります(純粋にスタイル要素として扱われます)。
各セクションのエントリーは、順序なしリストを使用して構造化します。エントリーのアルファベット順の順序は重要ではないためです(たとえば、索引は、情報を失うことなく逆順に並べ替えることができます)。リストを使用すると、支援技術のユーザーは、段落や同様のマークアップを使用した場合のように、一度に 1 つずつ移動する必要がなくなり、リスト項目をジャンプして前後に行き来できます。
リストを使用すると、ナビゲーションが簡単になるだけでなく、リスト内の位置が通知されるため、ユーザーは必要に応じて後で同じ場所にすばやく戻ることができます。
電子出版物を参照するための最適な方法はまだ進化していますが、多くの出版物では静的なページ区切りマーカーが使用されています。これらは印刷版ソースと一致したものでなければならないわけではなく、索引からの安定した参照を確保するために、純粋にデジタル作品のみにも追加できます。
関連リンク
- DPUB-ARIA —
doc-index
(ロール) - EPUB インデックス 1.0
- HTML —
section
要素 - HTML —見出しとセクション
- HTML —
ul
要素