ドキュメントには複数のコンテンツ情報ランドマークを含めることはできません
Learn Web Accessibility
Compliance Data & Impact
Disabilities Affected
- 視覚を用いるキーボードユーザー
- 盲目
- 盲ろう者
Standard(s)
- Deque Best Practice
修正方法
ドキュメントにランドマークが1つ以上含まれていないことを確認します。 contentinfo
1つのページに、 contentinfo ランドマークのインスタンスが複数含まれないようにしてください。
良い例: contentinfoランドマークのページごとに1つのインスタンス
role="contentinfo" ARIAランドマークは、ページ上の一意の要素に1回だけ使用されます。
ARIA仕様では、ランドマーク role="banner"、 role="main"、 role="contentinfo" はページごとに1回だけ使用されるものと規定されています。その他のARIAランドマークは複数回使用できます。興味深いことに、HTML5仕様では、同等のランドマーク header、 main、 footerの複数のインスタンスが許可されています。公式の制限はARIAランドマークにのみ適用されます。それでも、ほとんどのWebデザインでは、ARIAまたはHTML5を使用して指定されているかどうかに関係なく、これらのランドマークをそれぞれ1つだけ持つのが適切です。
<div role="banner">地元の動物園を訪れましょう!</div>
<div role="main">
<h1>動物園の本質</h1>
<article>
<h2>動物園で: 野生から飼いならされた動物へ</h2> <p>動物園で目にするのは、生まれ持った特性が未発達のまま残された例です。[...]</p>
</article> <article> <h2>摂食狂乱：共存の影響</h2>
<p>動物の中には、同種の動物と自然に群れをなすものもいれば、単独で縄張りを主張する動物もいます。普段は仲良く暮らしている動物たちでも、恋のライバルとの争いが起こる可能性があり、動物園のような閉鎖的な環境ではそれがエスカレートする可能性もあります。
[...]</p> </article></div>
<div role="contentinfo">
<p>北米動物園パートナーシップ提供</p></div>悪い例: contentinfoランドマークの複数のインスタンス
この例では、1回だけ使用する必要がある2種類のランドマーク (main と role="contentinfo") が同じページ上で複数回使用されています。
<header>地元の動物園を訪れてみましょう!</header>
<h1>動物園の本質</h1>
<main class="article">
<h2>動物園で: 野生から飼いならされた動物へ</h2>
<p>動物園で目にするのは、生まれ持った特性が発達せずに残っている例です。[...]</p>
<div role="contentinfo">
<p>[...この記事に関する情報...]</p>
</div></main>
<main class="article">
<h2>餌食の狂乱: 共存の影響</h2>
<p>動物の中には、自然に同種の者と群れをなしますが、縄張りを主張して単独で行動する動物もいます。普段は仲良く暮らしている動物たちでも、恋のライバルとの争いが起こる可能性があり、動物園のような閉鎖的な環境ではそれがエスカレートする可能性もあります。
[...]</p> <
div role="contentinfo"> <p>[...この記事に関する情報...]</p>
</div></main><footer>
<p>North American Zoo Partnership協賛</p></footer>なぜ重要なのか
ランドマークの主な目的の1つは、視覚障碍のあるユーザーが適切なランドマークをすばやく見つけて移動できるようにすることです。そのため、ランドマークの総数は比較的少なくする必要があります。そうしないと、スクリーン リーダーのユーザーは、探しているものを見つけるために、余計な情報をたくさん探し回る必要があります。
アクセシビリティのために正しいセマンティック構造を使用することが盛んに議論されているにもかかわらず、HTMLには歴史的に、ページのセクションをヘッダー、ナビゲーション、メイン コンテンツ、フッターとして指定する機能など、いくつかの重要なセマンティック マーカーが欠けていました。HTML5では、新しい要素 header、 nav、 main、 footerを使用して、これらの指定が可能になります。同様の機能は、ARIA (Accessible Rich Internet Application) 属性 role="banner"、 role="navigation"、 role="main" を使用して利用できます。 role="contentinfo"
JAWS、NVDA、VoiceOverは、ARIAランドマークを使用してWebページのセクションに移動する機能をサポートしています。ランドマークは、ユーザーがWebページのメイン コンテンツにスキップする方法を提供するという問題に対して、よりエレガントなソリューションを提供します。Webデザインに目に見える変更がないため、目立たず、見えないです。もちろん、この手法が目に見えないという事実は、目の不自由なスクリーン リーダー ユーザーにとっては問題ありませんが、目の見えるキーボード ユーザーや視力の弱いスクリーン拡大ソフト ユーザーにとってはそうではありません。この意味では、まだ旧式の「ナビゲーションをスキップ」リンクを置き換えることはできません、HTML 5リージョンとARIAランドマーク。ブラウザには、HTML 5リージョンまたはARIAランドマークが存在することをユーザーに通知する方法がまだ組み込まれていません。スクリーン リーダーのユーザーだけがこれを利用できます。Firefox ARIAランドマーク拡張機能があります。
利用可能で、Firefoxにランドマークによるナビゲーション機能を追加することができますが、これはブラウザのネイティブ機能ではありません。
ルールの説明
ページに最大1つの contentinfo ランドマークがあることを確認します。
仕組みについて (簡単に言うと)
このルールは、すべての contentinfo ランドマークを検出し、役割をマップしていないものを除外して、ランドマークが1つを超えないことを確認します。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: