要約

補助的なコンテンツをaside要素でマークすると、支援技術がそれを主要な文脈と区別できるようになり、ユーザーはその内容をスキップできるようになります。

注記

aside要素のデフォルトの性質が今後変更されます。 section要素内にある、アクセシブルな名前がついていないasides は、補完的なランドマーク（目印）とは見なされなくなります。代わりに、汎用要素（つまり、 div要素と同じ）と見なされます。

この変更が実際に実装された時点で、このページは更新されます。当面の間、このページのガイダンスは現在のベストプラクティスとして有効です。

テクニック

例

例 1 — サイドバー

サイドバーの見出しは、それを含むセクションより 1 レベル下にあります。

<section …>
   <h2 id="s02">Section 2: The War of 1812</h2>
   …
   <aside aria-labelledby="sb01">
      <h3 id="sb01">Timeline of Events</h3>
      …
   </aside>
   …
</section>
例 2 — 脚注

doc-footnoteロールは、 asideにアクセシブルな名前が必要ないことを意味します。

<aside
    role="doc-footnote"
    id="fn01">
   <p>[1] …</p>
</aside>

よくある質問

サイドバーにロールの定義が必要ないのはなぜですか?

aside要素は、HTML 仕様定義に従って、サイドバーを定義します。

aside要素は、コンテンツに間接的に関連するコンテンツで構成されるページのセクションを表します。このようなセクションは、印刷されたタイポグラフィではサイドバー付きの文章として表されることがよくあります。

これにロールの定義を追加してもアクセシビリティは向上しません。

アサイド（補足説明）にはどの見出しレベルを使用すればよいですか?

マークアップ内の補足コンテンツの位置は主要な文脈と同じように固定されていませんが（つまり、コンテンツをどこに配置するのが最適かは多くの場合選択の問題です）、補足コンテンツは常にセクションに属します。そのため、補足コンテンツは、それを含むsectionのサブセクションとして扱われる必要があります。したがって、 aside内の最初の見出しレベルは、それを含むセクションより常に 1 レベル低くする必要があります。

たとえば、章にh2タグの見出しがある場合、その章内のサイドバーの見出しはh3で始まる必要があります。これにより、支援技術のユーザーが見出しレベルで移動するときに、コンテンツのサブセクションを論理的に見つけられるようになります。このようなシナリオでは、サイドバーにh1見出しがあるとはユーザーは予想しません。これは、サイドバーが上位レベルのコンテンツ セクションになってしまうためです。

出版者が見出し番号の一貫性を維持できない場合は、ユーザーが予測できる別の方法を見つける必要があります。たとえば、すべてのサイドバーにh6を使用するなどです。ただし、この場合、出版者は、たとえば電子書籍の使用方法のセクションで、この規則についてユーザーに説明する必要があります。

見出しの番号の空白や一貫性のない番号は、技術的には WCAG 要件に違反しているわけではありませんが、見出しごとに移動する必要があるユーザーにとっては、読みやすいとは言えません。

サイドバーにはアクセシブルな名前が必要ですか?

ドキュメント内にいくつあるかによって異なります。

ドキュメントにロールのないaside要素が 1 つだけある場合は、アクセシブルな名前は必要ありません。

ただし、複数ある場合は、それらを区別するためのアクセシブルな名前がないと、ユーザーは順番に移動しない限り、どれがどれであるかを判断できません。

（このルールは、ランドマークのロールに適用されるアクセシブルな名前を追加する際のルールと同じであることに留意してください。）

asideとarticleどちらを使うべきでしょうか?

aside要素は、コンテンツが主要な文脈を説明または拡張する場合に最適です。サイドバー、用語集、および同様の説明コンテンツに最も適しています。

article要素は、コンテンツがドキュメントまたは出版物の他のコンテンツから独立している場合に最適です。たとえば、科学雑誌では、共通のテーマがあっても、各記事は他の記事から独立しています。

すべてのロールにアクセシブルな名前が必要ではないのはなぜですか?

asideに、 doc-footnoteやdoc-pullquoteなどのロールが指定された場合、要素の性質はデフォルトの補足的ランドマークから変更されます。これらのロールが適用されると、 asideはもはや補足的ランドマークとして認識されなくなるため、アクセシブルな名前は必要なくなります。

ロールを使用する場合は、その定義を参照して、アクセシブルな名前が必要かどうかを判断します。

解説

aside要素は、作成者がサイドバーなどの補助的なコンテンツを識別できるようにするために HTML5 で導入されました。支援技術のユーザーがasideに遭遇すると、そのコンテンツは通常「補足的」なものとして紹介され、主要な文脈の一部ではないことを認識できるようにします。

この要素が導入される前は、背景色と境界線が、補助的なコンテンツを主要な文脈と区別する唯一の方法であることがよくありました。ただし、これらの方法は支援技術には不透明であるため、サイドバーに見出しがないと文脈が突然変わる理由がわかりにくく、見出しがある場合でも主要なコンテンツの新しいセクションが始まるかどうかが必ずしも明確ではありませんでした。

aside要素を使用すると、ユーザーは読んでいるときにコンテンツをスキップできるだけでなく、補完的なランドマークとして、セクションを終えた後にコンテンツを簡単に見つけて戻ることもできます。この機能を最も効果的にするには、各サイドバーにアクセシブルな名前を付ける必要があります。そうしないと、ユーザーはサイドバーを区別できなくなります。

関連リンク