テクニック H101:セマンティックな HTML 要素を用いてページの領域を識別する

解説

このテクニックの目的は、ウェブページのセクションへのプログラムによるアクセスを提供することである。ランドマークロール (又は「ランドマーク」) は、プログラムによってページのセクションを識別する。ブラウザはランドマークを利用者に直接公開しないが、ランドマークは支援技術及びブラウザ拡張機能によって、ページの様々なセクションへのナビゲーションを支援するために利用できる。

ランドマークは、支援技術を使用する利用者がページのプログラム構造を理解し、関心のないコンテンツをスキップする容易な方法を提供する。例えば、サイトのヘッダー、グローバルナビゲーション、メインコンテンツエリア、フッターがランドマークとしてマークアップされている場合、スクリーンリーダーを使用する利用者は、先行するコンテンツを全て確認することなく、関心のあるランドマークに容易に移動できる。ニュースサイトのメニューに精通していて、トップニュースにのみアクセスしたい視覚障害のある利用者は、"main" ランドマークに容易に移動でき、多数のメニューリンクをバイパスできる。別の状況として、視覚障害のある利用者がナビゲーションメニューを素早く見つけたい場合、ナビゲーションランドマークにジャンプすることでそれが可能になる。

特定のセマンティックを持つ HTML 要素が使用されると、ランドマーク領域が暗黙的に作成されるが、これは、ARIA を用いて明示的にランドマークを作成する場合とは異なる。これらの要素は次のとおりである:

• <header>: header が body 要素の直接の子要素である場合、これはbanner ロールを作成し、通常、サイトのロゴ、名前、その他のサイト全体の永続的なコンテンツを含む領域で、ページ上部に表示される。
• <nav>: 他のページ又は同じページ内の異なる部分へのナビゲーションリンクを含む領域。
• <main>: ページのメインコンテンツを含む領域。
• <section>: ドキュメント又はアプリケーションの一般的なセクションを含む領域。section 要素は、アクセシブルな名前 (name) を持たない限り、ランドマーク領域として公開されない。
• <form>: フォーム関連要素のコレクションを表すドキュメントの領域。これらの要素の一部は、サーバーに送信して処理できる編集可能な値を表すことができる。form 要素は、アクセシブルな名前を持たない限り、ランドマーク領域として公開されない。
• <aside>: メインコンテンツをサポートしながらも、それ自体で独立した意味を持つドキュメントの領域。
• <footer>: 最も近い祖先が body 要素である場合、著作権表示やプライバシーステートメントへのリンクなど、ページに関する情報を含む領域。

モダンなウェブブラウザでは、HTML 要素をランドマーク領域として公開するために、関連する ARIA ロールを追加する必要はない。例えば、<main role="main"> は不要であり、<main> のみで十分である。

ナビゲーションの主要ブロックと副次ブロックなど、特定のランドマークロールをページ上で複数回使用できる場合がある。このような場合、領域にラベルを付ける有効な手法を使用して、同一のロールにラベルを付けるべきである。

セクション間を移動するためにランドマークを使用するスクリーンリーダーの利用者がコンテンツを見失わないように、ページ上の全てのコンテンツをランドマークに含めることがベストプラクティスである。

事例

<header> site logo and name, etc. here </header>
<form aria-label="site search"> search functionality here </form>
<nav> a list of navigation links here </nav>
<main> the page's main content here </main>
<section> a sponsor's promotion here </section>
<aside> sidebar content here </aside>
<footer> site contact details, copyright information, etc. here </footer>

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
  <ul>
    <li><a href="/news">News</a></li>  
    <li><a href="/weather">Weather</a></li>
    <li><a href="/sport">Sport</a></li>
  </ul>
</nav>
<nav aria-labelledby="related-nav-heading">
  <h2 id="related-nav-heading">Related Topics</h2>
  <ul>
    <li><a href="/local-news">Local News</a></li>
    <li><a href="/local-weather">Local Weather</a></li>
    <li><a href="/local-sport">Local Sport</a></li>
  </ul>
</nav>

<nav aria-label="Vehicles">
  <ul>
    <li><a aria-current="page" href="/cars">Cars</a></li>
    <li><a href="/trucks">Trucks</a></li>
    <li><a href="/bikes">Bikes</a></li>
  </ul>
</nav>
<nav aria-label="Tags">
  <ul>
    <li><a href="/cars-electric">Electric Cars</a></li>
    <li><a href="/cars-gas">Gas-powered Cars</a></li>
    <li><a href="/cars-family">Family Cars</a></li>
    <li><a href="/cars-working">Rugged Cars For Working</a></li>
    <li><a href="/cars-commuting">Cars For Suburban Commuting</a></li>
  </ul>
</nav>

<form aria-labelledby="search-label">
  <label for="product-search" id="search-label">Search</label>
  <input id="product-search" placeholder="title, author, or ISBN" type="text">
  <button type="submit">Find Books</button>
</form>

関連リソース

推奨を意味するものではない。

• Using ARIA
• ARIA in HTML
• Accessible Name and Description Computation
• Improving access to landmark navigation
• Landmarks browser extension

関連テクニック

• ARIA11: Using ARIA landmarks to identify regions of a page
• G1: Adding a link at the top of each page that goes directly to the main content area
• G124: Adding links at the top of the page to each area of the content
• H69: Providing heading elements at the beginning of each section of content
• SCR28: Using an expandable and collapsible menu to bypass block of content

検証