WAIC-TEST-0088-02
セマンティックな HTML 要素を用いてページの領域を識別する(事例2)
セマンティックなHTML要素によってページの領域が識別できることと、領域間をナビゲートできることを確認する
1.3.1
H101
<h1>トップページ</h1>
<nav aria-labelledby="site-nav-heading">
<h2 id="site-nav-heading">メインメニュー</h2>
<ul>
<li><a href="/news">ニュース</a></li>
<li><a href="/weather">天気</a></li>
<li><a href="/sport">スポーツ</a></li>
</ul>
</nav>
<nav aria-labelledby="related-nav-heading">
<h2 id="related-nav-heading">関連情報</h2>
<ul>
<li><a href="/local-news">地域のニュース</a></li>
<li><a href="/local-weather">地域の天気</a></li>
<li><a href="/local-sport">地域のスポーツ</a></li>
</ul>
</nav>
テスト不要
矢印キー、もしくはスクリーンリーダーのランドマーク間を移動する機能を利用し、「メインメニュー」と読み上げられる部分を探す
「メインメニュー」という名前のナビゲーションランドマークであることが読み上げられる
矢印キー、もしくはスクリーンリーダーのランドマーク間を移動する機能を利用し、「関連情報」と読み上げられる部分を探す
「関連情報」という名前のナビゲーションランドマークであることが読み上げられる
ランドマークを読み上げる設定となっていることを確認する
nav要素、aria-labelledby属性