as_test

テスト ID

WAIC-TEST-0088-02

テストのタイトル

セマンティックな HTML 要素を用いてページの領域を識別する(事例2)

テストの目的

セマンティックなHTML要素によってページの領域が識別できることと、領域間をナビゲートできることを確認する

テストの対象となる達成基準 (複数)

1.3.1

関連する達成方法 (複数)

H101

テストコード (テストファイルへのリンク)

WAIC-CODE-0088-02

テストコードのソース (抜粋)

<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> 

テスト手順と期待される結果 (視覚閲覧環境)

テスト不要

テスト手順と期待される結果 (音声閲覧環境)

テスト手順 1

矢印キー、もしくはスクリーンリーダーのランドマーク間を移動する機能を利用し、「メインメニュー」と読み上げられる部分を探す

期待される結果 1

「メインメニュー」という名前のナビゲーションランドマークであることが読み上げられる

テスト手順 2

矢印キー、もしくはスクリーンリーダーのランドマーク間を移動する機能を利用し、「関連情報」と読み上げられる部分を探す

期待される結果 2

「関連情報」という名前のナビゲーションランドマークであることが読み上げられる

テスト実施時の注意点 (音声閲覧環境)

ランドマークを読み上げる設定となっていることを確認する

関連する要素や属性

nav要素、aria-labelledby属性