ARIA11：ページのリージョンを特定するためにARIAランドマークを使用する

概要

ARIA（Accessible Rich Internet Applications）は、障害を持つユーザーがウェブコンテンツにアクセスしやすくするための一連の属性と技術です。ARIAランドマークは、ページ内の特定のセクションを示すために使用される属性で、支援技術（スクリーンリーダーなど）を使用するユーザーがページの構造を理解しやすくします。一方、HTML5では、header、nav、main、aside、footerなどのセマンティック要素が提供されており、これらの要素はページ内の特定のセクションを明示的に示すため、支援技術がページの構造をよりよく理解できるようになっています。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 1.3.1 情報及び関係性
• 2.4.1 ブロックスキップ

実践的な方法

<header>
  <!-- ヘッダーコンテンツ -->
</header>

<nav>
  <!-- ナビゲーションリンク -->
</nav>

<main>
  <!-- メインコンテンツ -->
</main>

<aside>
  <!-- サイドバーコンテンツ -->
</aside>

<footer>
  <!-- フッターコンテンツ -->
</footer>

<header role="banner">
  <!-- ヘッダーコンテンツ -->
</header>

<nav role="navigation">
  <!-- ナビゲーションリンク -->
</nav>

<main role="main">
  <!-- メインコンテンツ -->
</main>

<aside role="complementary">
  <!-- サイドバーコンテンツ -->
</aside>

<footer role="contentinfo">
  <!-- フッターコンテンツ -->
</footer>

注意点

可能な限りHTML5のセマンティック要素を使用し、これによりARIAランドマークの使用を最小限に抑えることが推奨されます。ARIAランドマークは、古いブラウザや特定の支援技術がセマンティック要素をサポートしていない場合に追加で使用します。また、ランドマークの使い過ぎに注意し、ページの構造を明確にするために適切に使用することが重要です。

まとめ

HTML5のセマンティック要素を適切に使用することで、多くの場合、追加のARIAランドマークが不要になります。ただし、互換性の問題がある場合には、補完的にARIAランドマークを使用することが推奨されます。