ページに複数のcontentinfoランドマークを含めることはできません
修正方法
ドキュメントに複数の contentinfo
ランドマークが存在しないことを確認します。
ページには一つより多くの contentinfo
ランドマークインスタンスを含めるべきではありません。
良い例: contentinfo ランドマークを1ページにつき1インスタンスにする
role="contentinfo"
ARIA ランドマークはページ内で一意の要素に一度のみ使われています。
ARIA の仕様書は role="banner"
, role="main"
, そして role="contentinfo"
ランドマークはページにつき一度のみ使用されることを意図していると述べています。他の ARIA ランドマークは複数回使用できます。興味深いことに、HTML5 の仕様書は同等のランドマークである header
, main
, そして footer
の複数インスタンスを許可しています。公式な制限は ARIA ランドマークのみです。しかし、ほとんどの web デザインでは、ARIA または HTML5 のいずれかで指定しているかに関わらず、各ランドマークは一つずつにすることが適切です。
<div role="banner">Visit Your Local Zoo!</div>
<div role="main">
<h1>The Nature of the Zoo</h1>
<article>
<h2>In the Zoo: From Wild to Tamed</h2>
<p>What you see in the zoo are examples of
inborn traits left undeveloped. [...]</p>
</article>
<article>
<h2>Feeding Frenzy: The Impact of Cohabitation</h2>
<p>Some animals naturally group together with their own kind,
but others stake solitary claim on their territory.
Even those that typically live harmoniously together can
have bouts with romantic rivals, which can potentially
escalate in the more confined setting of a zoo. [...]</p>
</article>
</div>
<div role="contentinfo">
<p>Brought to you by North American Zoo Partnership</p>
</div>
悪い例: contentinfo ランドマークの複数インスタンス
この例では、一度のみ使用されるべき二種類のランドマーク (main
と role="contentinfo"
) が同じページ内で複数回使用されています。
<header>Visit Your Local Zoo!</header>
<h1>The Nature of the Zoo</h1>
<main class="article">
<h2>In the Zoo: From Wild to Tamed</h2>
<p>What you see in the zoo are examples of
inborn traits left undeveloped. [...]</p>
<div role="contentinfo">
<p>[...information about this article...]</p>
</div>
</main>
<main class="article">
<h2>Feeding Frenzy: The Impact of Cohabitation</h2>
<p>Some animals naturally group together with their own kind,
but others stake solitary claim on their territory.
Even those that typically live harmoniously together can
have bouts with romantic rivals, which can potentially
escalate in the more confined setting of a zoo. [...]</p>
<div role="contentinfo">
<p>[...information about this article...]</p>
</div>
</main>
<footer>
<p>Brought to you by North American Zoo Partnership</p>
</footer>
なぜ重要なのか
ランドマークの主な目的の一つは、全盲のユーザーが素早く適切なランドマークを見つけて移動できるようにするためなので、ランドマークの総数は比較的少なくするべきです。そうしなければ、スクリーン・リーダーのユーザーは目的のものを見つけるために、多くの余分な情報を整理しなければなりません。
アクセシビリティのために正確なセマンティック構造を使うという話題があるにもかかわらず、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 デザインに対して可視な変更は加えられないため、目立たず、不可視にできます。もちろん、この方法が不可視であるという事実は全盲のスクリーン・リーダーのユーザーにとっては問題ありませんが、目の見えるキーボードユーザーやロービジョンのスクリーンを拡大しているユーザーにとっては良くありません。その意味では、HTML5 領域や ARIA ランドマークは昔からの「スキップリンク」をまだ置き換えることはできません。ブラウザーにはまだ、HTML5 領域または ARIA ランドマークが存在することをユーザーに通知する組み込まれた方法がありません。スクリーン・リーダーのユーザーだけがこれらの強みを活かすことができます。Firefox 内でランドマークをナビゲートする機能を追加する Firefox ARIA landmark extension という拡張機能が存在しますが、これはブラウザーのネイティブ機能ではありません。
ルールの説明
contentinfo
ランドマークはページに最高でも一つのみであることを確認します。
仕組みについて (簡単に言うと)
このルールはすべての contentinfo
ランドマークを探し、ロールを反映しないものを除去し、そして複数存在しないことを確認します。