WAI-ARIAのランドマークロールについて、調べたことをメモ。
ランドマークロールについて
WAI-ARIAの機能のうちの1つに、ロール(Role)があります。
これは要素の役割について定義する機能で、role属性を使って設定できます。
role属性で設定できる内容にもいくつか種類があり、その中の1つがランドマークロールになります。
ランドマークロールを使うことで、ページ上にあるナビゲーションや本文など、主要な要素をランドマーク(目印)として扱えます。
スクリーンリーダーには、ページ上に設定されたランドマークへ移動する機能があるため、主要なコンテンツにアクセスするための手助けになります。
以下はスクリーンリーダーのVoiceOverでランドマークを確認した際の表示です。
ランドマークロールの種類
ランドマークロールで設定できる値は8種類あります。
- バナー(banner)
- コンテンツ情報(contentinfo)
- ナビゲーション(navigation)
- メイン(main)
- 補足(complementary)
- フォーム(form)
- 検索(search)
- リージョン(region)
バナー(banner)
主にページの先頭に配置される、サイト全体のヘッダー領域を示すランドマークです。
header要素は暗黙的なbannerロールとなりますが、aside/article/main/nav/section要素の子孫になっている場合、bannerロールとみなされないようです。
サイト全体のヘッダーと、main要素内にheader要素を配置した場合にランドマークがどう扱われるかを試してみます。
<header class="header">
<p class="logo"><a href="#">ロゴ</a></p>
～ 略 ～
</header>
<div class="contents">
<main class="main">
<article>
<header>
<p>公開日とかカテゴリ情報とか</p>
</header>
<h1>コンテンツ内容</h1>
～ 略 ～
各スクリーンリーダーで確認した結果は、以下の通りです。
| サイト全体のヘッダー | main内 | |
|---|---|---|
| VoiceOver | バナー | – |
| NVDA | バナー | – |
| PC-Talker | バナーランドマーク | バナーランドマーク |
VoiceOverの場合
NVDAの場合
PC-Talkerの場合、mainタグの中でもランドマークとして扱われてしまうようでした。
コンテンツ情報(contentinfo)
主にページの最後に配置される、サイト全体のフッター領域を示すランドマークです。
footer要素は暗黙的なcontentinfoロールとなりますが、header要素と同様にaside/article/main/nav/section要素の子孫になっている場合、contentinfoロールとみなされないようです。
サイト全体のフッターと、main要素内にfooter要素を配置した場合にランドマークがどう扱われるかを試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<footer>
<p>記事のタグ情報とか</p>
</footer>
</article>
</main>
～略～
</div>
<footer class="footer">
<p>フッター</p>
～略～
</footer>
各スクリーンリーダーで確認した結果は、以下の通りです。
| サイト全体のフッター | main内 | |
|---|---|---|
| VoiceOver | フッター | – |
| NVDA | コンテンツ情報 | – |
| PC-Talker | コンテンツ情報ランドマーク | コンテンツ情報ランドマーク |
bannarロールの時と同じく、PC-Talkerの場合はmainタグ内でもランドマークとして扱われてしまうようでした。
ナビゲーション(navigation)
ページ内のナビゲーションの領域を示すランドマークです。
nav要素は暗黙的なnavigationロールとなります。
ページ内に複数のnavigationロールが含まれる場合、aria-labelledbyまたはaria-labelを使って、アクセシブルな名前を付けるようにします。
ヘッダーとフッター、サイドバーにnav要素を配置した場合、ランドマークがどう扱われるかを試してみます。
<header class="header">
<p class="logo"><a href="#">ロゴ</a></p>
<nav>
<ul class="nav">
<li>
<a href="#">サイト概要</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">問い合わせ</a>
</li>
</ul>
</nav>
～略～
</header>
<div class="contents">
～略～
<aside class="side">
～略～
<nav>
<h2>カテゴリ別</h2>
<ul>
<li>
<a href="#">HTML・CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CMS</a>
</li>
</ul>
</nav>
～略～
</aside>
</div>
<footer class="footer">
<p>フッター</p>
<nav>
<ul class="nav">
<li>
<a href="#">サイト概要</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">問い合わせ</a>
</li>
</ul>
</nav>
</footer>
各スクリーンリーダーで確認した結果は、以下の通りです。
| header内 | aside内 | footer内 | |
|---|---|---|---|
| VoiceOver | ナビゲーション | ナビゲーション | ナビゲーション |
| NVDA | ナビゲーション | ナビゲーション | ナビゲーション |
| PC-Talker | ナビゲーションランドマーク | ナビゲーションランドマーク | ナビゲーションランドマーク |
前述の通り、ページ内に複数のnavigationロールが含まれる場合、aria-labelledbyまたはaria-labelを使って、アクセシブルな名前を付けるようにします。
その際、同じリンク内容のnavigationロールがあればそれぞれに同じラベルを使用します。
以下のように、navigationロールにアクセシブルな名前を追加してみます。
<header class="header">
<p class="logo"><a href="#">ロゴ</a></p>
<nav aria-label="メイン">
<ul class="nav">
<li>
<a href="#">サイト概要</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">問い合わせ</a>
</li>
</ul>
</nav>
～略～
</header>
<div class="contents">
～略～
<aside class="side">
～略～
<nav aria-labelledby="category">
<h2 id="category">カテゴリ別</h2>
<ul>
<li>
<a href="#">HTML・CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CMS</a>
</li>
</ul>
</nav>
～略～
</aside>
</div>
<footer class="footer">
<p>フッター</p>
<nav aria-label="メイン">
<ul class="nav">
<li>
<a href="#">サイト概要</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">問い合わせ</a>
</li>
</ul>
</nav>
</footer>
結果は以下の通りで、PC-Talker以外の場合、設定したアクセシブルな名前が読み上げに付与されるようになりました。
| header内 | aside内 | footer内 | |
|---|---|---|---|
| VoiceOver | メイン ナビゲーション | カテゴリ別 ナビゲーション | メイン ナビゲーション |
| NVDA | メイン; ナビゲーション | カテゴリ別; ナビゲーション | メイン; ナビゲーション |
| PC-Talker | ナビゲーションランドマーク | ナビゲーションランドマーク | ナビゲーションランドマーク |
VoiceOverの場合
NVDAの場合
メイン(main)
ページの主なコンテンツ領域を示すランドマークです。
main要素は暗黙的なmainロールとなります。
～略～
<div class="contents">
<main class="main">
<article>
<header>
<p>公開日とかカテゴリ情報とか</p>
</header>
<h1>コンテンツ内容</h1>
～略～
</article>
</main>
～略～
各スクリーンリーダーで確認した結果は以下の通りです。
| VoiceOver | 本文 |
|---|---|
| NVDA | メイン |
| PC-Talker | メインランドマーク |
補足として、article要素は本来ランドマークに含まれないのですが、VoiceOverだと「記事」、PC-Talkerだと「記事ランドマーク」と読み上げるようでした。
補足(complementary)
メインコンテンツに関連する補助的な内容を含み、かつ単独でも成立する領域を示すランドマークです。
aside要素は暗黙的なmainロールとなります。
ページ内に複数のnavigationロールが含まれる場合、aria-labelledbyまたはaria-labelを使って、アクセシブルな名前を付けるようにします。
サイドバーとして使用する場合と、article内で使用する場合にランドマークがどう扱われるかを試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<aside>
<h2>補足内容</h2>
<p>テキストテキストテキスト</p>
</aside>
～略～
</article>
</main>
<aside class="side">
～略～
</aside>
</div>
～略～
各スクリーンリーダーで確認した結果は、以下の通りです。
| サイドバー | article内 | |
|---|---|---|
| VoiceOver | 捕捉 | – |
| NVDA | 補足情報 | – |
| PC-Talker | 補足ランドマーク | 補足ランドマーク |
サイドバーとして使用した場合は特に問題なさそうだったのですが、article内で使用した場合にVoiceOverとNVDAでランドマークとして扱われないようでした。
article内にあるasideに対して、(1)アクセシブルな名前を付与した場合 (2)article外にそのまま出した場合 の2パターンを試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<aside aria-labelledby="article-aside">
<h2 id="article-aside">補足内容</h2>
<p>テキストテキストテキスト</p>
</aside>
～略～
</article>
<aside>
<h2>補足内容2</h2>
<p>テキストテキストテキスト</p>
</aside>
</main>
<aside class="side">
～略～
</aside>
</div>
～略～
結果は以下の通りで、VoiceOverとNVDA共にどちらの方法でもランドマークとして扱われるようでした。
| アクセシブルな名前追加 | article外に移動 | |
|---|---|---|
| VoiceOver | 補足内容 捕捉 | 捕捉 |
| NVDA | 補足内容; 補足情報 | 補足情報 |
| PC-Talker | 補足ランドマーク | 補足ランドマーク |
フォーム(form)
フォームのグループを示すランドマークです。
form要素に対してaria-labelledbyまたはaria-labelを使ってアクセシブルな名前を設定することで、formのロールとして扱われます。
フォームの内容が検索の場合、代わりにsearchランドマークを使用します。
フォームにアクセシブルな名前を追加しなかった場合、ランドマークとして扱われないのかを試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<div class="comment">
<form action="#" method="post">
<label for="comment">コメント</label>
<textarea name="comment" id="comment"></textarea>
<button type="submit">送信</button>
</form>
</div>
～略～
</article>
</main>
～略～
</div>
～略～
各スクリーンリーダーで確認した結果は以下の通りで、どのスクリーンリーダーでもランドマークとして扱われませんでした。
| VoiceOver | – |
|---|---|
| NVDA | – |
| PC-Talker | – |
次にアクセシブルな名前を追加した場合を試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<div class="comment">
<form aria-label="コメント action="#" method="post">
<label for="comment">コメント</label>
<textarea name="comment" id="comment"></textarea>
<button type="submit">送信</button>
</form>
</div>
～略～
</article>
</main>
～略～
</div>
～略～
結果は以下の通りで、VoiceOverとNVDAではランドマークとして扱われるようになりましたが、PC-Talkerでは変わらないようでした。
| VoiceOver | コメント フォーム |
|---|---|
| NVDA | コメント; フォーム |
| PC-Talker | – |
検索(search)
サイト内検索など検索機能を提供する領域を示すランドマークです。
search要素は暗黙的なsearchロールとなりますが、search要素は比較的最近追加された要素なので、対応ブラウザによってはsearch要素を使わず、form要素に対してrol=”search”を設定する方法を検討してください。
ページ内に複数のsearchロールが含まれる場合、aria-labelledbyまたはaria-labelを使って、アクセシブルな名前を付けるようにします。
サイト全体のヘッダーと、サイドバー(aside)にsearch要素を配置した場合にランドマークがどう扱われるかを試してみます。
<header class="header">
～略～
<search class="search">
<form action="#" method="get">
<input type="search" name="search_keyword">
<button type="submit">検索</button>
</form>
</search>
</header>
<div class="contents">
～略～
<aside class="side">
<search class="search">
<form action="#" method="get">
<input type="search" name="search_keyword">
<button type="submit">検索</button>
</form>
</search>
～略～
</aside>
</div>
～略～
各スクリーンリーダーで確認した結果は以下の通りです。
| header内 | aside内 | |
|---|---|---|
| VoiceOver | 検索 | 検索 |
| NVDA | 検索 | – |
| PC-Talker | 検索ランドマーク | 検索ランドマーク |
aside要素内に配置した場合、NVDAでランドマークとして扱われないようでした。
アクセシブルな名前の付与や、search要素にrole=”search”を設定してみるなどいろいろ試してみたのですが、NVDAでaside要素内の場合にはランドマークとして認識しなさそうでした。
search要素を使用しないで、form要素に対してrole=”search”を設定する方法で試してみます。
<header class="header">
～略～
<search class="search">
<form action="#" method="get">
<input type="search" name="search_keyword">
<button type="submit">検索</button>
</form>
</search>
</header>
<div class="contents">
～略～
<aside class="side">
<div class="search">
<form role="search" aria-label="サイト内" action="#" method="get">
<input type="search" name="search_keyword">
<button type="submit">検索</button>
</form>
</div>
～略～
</aside>
</div>
～略～
結果は以下の通りで、NVDAでは変わらずランドマークとして扱われませんでした。
| header内 | aside内 | |
|---|---|---|
| VoiceOver | 検索 | サイト内 検索 |
| NVDA | 検索 | – |
| PC-Talker | 検索ランドマーク | 検索ランドマーク |
リージョン(region)
他のランドマークロールがどれも適切ではないものの、ランドマークとして登録すべきと判断した要素に対して使用する、汎用的なランドマークロールです。
section要素に対してaria-labelledbyまたはaria-labelを使ってアクセシブルな名前を設定することで、regionのロールとして扱われます
ただし、全てのsection要素に対してアクセシブルな名前を付けてregionのロールにするのではなく、重要な内容と判断した場合のみ設定するようにします。
main要素内のsection要素と、aside要素内のsection要素に対してアクセシブルな名前を付けて、ランドマークがどう扱われるかを試してみます。
～略～
<div class="contents">
<main class="main">
<article>
～略～
<section aria-labelledby="sec2-2">
<h2 id="sec2-2">見出し2-2</h2>
<p>テキストテキストテキスト</p>
<section>
<h3>見出し3-1</h3>
<p>テキストテキストテキスト</p>
</section>
<section>
<h3>見出し3-2</h3>
<p>テキストテキストテキスト</p>
</section>
</section>
～略～
</article>
</main>
<aside class="side">
～略～
<section aria-labelledby="recent-article">
<h2 id="recent-article">最新記事一覧</h2>
<ul>
<li><a href="#">記事A</a></li>
<li><a href="#">記事B</a></li>
<li><a href="#">記事C</a></li>
</ul>
</section>
</aside>
</div>
～略～
各スクリーンリーダーで確認した結果は以下の通りで、NVDA以外ではランドマークとして扱われていないようでした。
| main内 | aside内 | |
|---|---|---|
| VoiceOver | – | – |
| NVDA | 見出し2-2 | 最新記事一覧 |
| PC-Talker | – | – |
コメントが承認されるまで時間がかかります。