要約

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

テクニック

例

例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仕様には他の方法を詳しく説明したセクションもあります。これらの方法はすべて有効なので、どの方法を使用するかは、出版者のワークフローのニーズに応じて決めてください。

関連リンク