要約

注釈を識別し、それをテキスト内の論理的な区切りに配置すると、主要なテキストの読みやすさへの影響を最小限にできます。

テクニック

例

例1 — 本文中の脚注

doc-footnoteロールはaside内で使用する点に注意してください。リスト項目には適用しないでください。リスト項目が属するリストが壊れてしまいます。注釈をリストにグループ化するにはdoc-endnotes使用してください。

<p>
   In that
   year<a href="#ft2f" role="doc-noteref" epub:type="noteref">2</a>
   there were 67 mills engaged in the manufacture of
   cotton goods …
</p>

<aside id="ft2f" role="doc-footnote" epub:type="footnote">
   <p>
     2 The manufacturing statistics for 1900 which
     follow are not those given in the Twelfth
     Census, but are taken from the 
     <em>Census of Manufactures</em> …
   </p>
</aside>

<p>…</p>
2 — セクションまたは作品の最後にあるグループ化された注釈

doc-endnotesロールはリストでは使用できません。これは、文末脚注を含むセクションを識別するために使用されます。

<section epub:type="endnotes" role="doc-endnotes"> 
   <h2>End Notes</h2>
   <ol>
     <li>
        <p>According to the 
           usual nomenclature, the branch flowing
           S.W. is called the Chattooga; this unites
           with the Tallulah to form the Tugaloo,
           which …</p>
     </li>
     …
   </ol>   
</section>
例3 — 注釈の参照を上付き文字にするCSS

CSS~=セレクターの使用に注意してください。roleに複数の値（フォールバックロールなど）を含んでいる場合でも、このセレクターによって確実に一致できます。詳細については、CSS 2の属性セレクターを参照してください。

a[role~='doc-noteref'] {
   vertical-align: super;
   line-height: normal;
   font-size: smaller;
}
例4 — 脚注からのバックリンク

バックリンクは注釈のテキストの前にあるため、ユーザーはそのようなリンクを利用できるのを認識できます。

<div role="doc-footnote">
   <p><a href="#ref" role="doc-backlink"
         title="Go to note reference 1">1.</a> According to
      the usual nomenclature, the …</p>
</div>
例5 — 文末脚注からのバックリンク

バックリンクは、自動リスト番号との競合を避けるために、注釈のテキストの後に続きます。リンクはそれ自体の要素に配置されているため、ユーザーはそのリンクを使う前に注釈全体を聴く必要はありません。

<div role="doc-footnote">
   <p>1. According to the usual nomenclature, the …</p>
   <p><a href="#ref" role="doc-backlink">Go to note
      reference 1</a></p>
</div>

よくある質問

doc-endnoteロールを使用する必要がありますか？

いいえ。doc-endnoteロールの使用は、コアARIAロールモジュールとの技術的な互換性がないため、現在は非推奨です。ARIAでは、モジュールからのロールがコアロールの要件を満たすことを許可していないため、doc-endnoteはリスト項目のように動作しますが、技術的にはリストにリスト項目の子を持つという要件を満たしていません。そのため、HTMLのリスト要素としても 、ARIAのlistロールの子としても、無効になります。

すでにこのロールを使用している場合、支援技術の使用で問題は発生しないはずですが、コンテンツのエラーを回避するために、今後は使用しないことをお勧めします。

また、このロールは一般的に冗長です。doc-endnotesロールを使用して注釈のセクションが識別されると、ユーザーは支援技術によってセクション内のリストに文末脚注があると認識します。

解説

脚注と文末脚注は、物語の流れを中断するため、読書体験の妨げになることがわかっています。脚注が、それを参照する段落の直後に配置されている場合、通常はテキストコンテンツと区別がつかないため、ユーザーは毎回手動で移動する必要があります。セクションの最後にまとめられた文末脚注でも、ユーザーはそれを飛ばして移動できる必要があります。

HTML構造要素は、role属性とともに、個々の脚注と文末脚注、およびそれらのセクションを明確にマークすることで、この問題を軽減する手段を提供します。これにより、アクセシブルなユーザーエージェントは、参照元から続いて読まれる場合を除いて、注釈を無視することができるだけでなく、どのようなユーザーエージェントでもより賢く（例えばポップアップとして）注釈を扱うことができます。

セクションの最後にグループ化されている注釈は、doc-endnotesロールを使用してグループ化する必要があります（例 2を参照）。リストを使用すると、ユーザーはリスト内をより効率的に移動できます（たとえば、各リスト項目番号は通常、含まれている注釈番号に順番に対応し、注釈が多数ある場合は、ユーザーが一度に複数のリスト項目間を移動できるようにする必要があります）。

表内の注釈

表の中に注釈がある場合、tfoot要素はその列の要約を意図しているため、この中に注釈は入れないでください。脚注は表の後に続くか、figureの中に表と一緒にグループ化することができます。例については、表のセクションを参照してください。

注釈の参照

ユーザーが対応する注釈を視覚的に探す必要がないように、注釈の参照は HTML a要素を使用してタグ付けする必要があります。

sup要素は、注釈の参照を上付き文字にするために使用できますが、冗長性が増します（支援技術は、テキストがリンクされていることに加えて、上付き文字になっていることを通知します）。CSSのvertical-alignプロパティを設定すると、追加の通知音声なしでa要素を上付き文字にすることができます（例3を参照）。

注記

doc-footnoteロールのアナウンスがより強力にサポートされるようになるまでは、sup要素は注釈の参照に何らかのコンテキストを提供します。ただし、ロールのサポートが強化されると、明示的な上付き文字の使用は冗長になります。その時には、CSSフォーマットを優先すべきです。

関連リンク