ARIAデモWebサイトでは、role="contentinfo"
は通常、footer
要素に追加されます。
ただし、 最新のWebデザインのフッター はクリエイティブであり、補足のナビゲーションリンク、ソーシャルWebサイトのリンク、ニュースレターフォームなどを含めることもできます。
以下のフッターのコードを例にとります。 role="contentinfo"
をfooter
またはp
要素に追加しますか?
<footer>
<nav>
<ul>
........
........
........
........
........
</ul>
</nav>
<form>
........
........
........
</form>
<p>© 2012 Website.com. All rights reserved.</p>
</footer>
編集:私はW3C ARIAメーリングリストを利用してこの質問をしました。W3CHTMLワーキンググループのメンバーであるSteve Faulknerが返信しました。以下は彼の提案です:
また、ブラウザーがフッター要素をアクセシビリティAPIにマッピングする方法も考慮します。
Firefoxでは、フッターはARIA role = contentinfoにマッピングされます
Webkit/safari/chromeでは、セクションまたは記事の要素内にフッターが含まれている場合、フッターはARIA role = groupにマップされます。それ以外の場合は、role = contentinfoにマップされます
In IEマッピングされていませんこれを行う:
<div role = "contentinfo">
一部のコンテンツ
<footer>一部のコンテンツ</ footer>
</ div>ネストされたcontentinfoランドマークが、すでにフッターをcontentinfoにマップしているブラウザーで発表されます。
したがって、メインフッターにrole = contentinfoを追加することをお勧めします。フッターにあることが適切ではない可能性があると思うコンテンツについてはあまり気にしないでください。
したがって、推奨されるアプローチはrole="contentinfo"
からメインfooter
へ。
あなたの場合、それはフッタータグにあるべきだと思います。
親ドキュメントに関する情報を提供することを目的としているため、フッター要素が親の適切なコンテキストを提供する場合に使用します。
現在のところ、明確な正解はありません。
あなたが仕様で行く場合: http://www.w3.org/TR/wai-aria/roles#contentinfo 、contentinfo
は次のように記述されます:
「親ドキュメントに関する情報を含む、知覚可能な大きな領域。ページのこの領域に含まれる情報の例は、著作権およびプライバシーに関する声明へのリンクです。」
したがって、この場合は<p>
鬼ごっこ。
ただし、あなたがこれらのランドマークを利用しているユーザーであるふりをします。誰もがrole="contentinfo"
をfooter
に追加すると、それがユーザーの期待どおりになります。ユーザーは「スペック」が何を言っているかを気にせず、ウェブサイトからウェブサイトへとブラウズするときに一貫したエクスペリエンスを望んでいるだけです。これは、フッターリンクなどがcontentinfo
セクションにあることを期待していると思われます。これは、多くのサイトで実装されている方法であり、多くのアクセシビリティの専門家による推奨方法です。
私はユーザーに対応することを好むので、footer
要素に適用しますが、これは仕様(または少なくとも私の解釈)そして、ブラウザや他のアクセシブルなテクノロジーがより一貫した方法でアクセシビリティを実装し始めると、この実装は変わるかもしれません。
<p>
要素。つまり、HTMLのポイントは、テキストにコンテキストを与えることです。したがって、適切なマークアップを行うことにより、適切なコンテキストを提供します。
最も適切な要素に役割を与えます。これはフッター要素に限定された属性ではありません。
セマンティクスは既にHTML5仕様で伝えられているため、冗長な情報です https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria
通常、HTML5要素のセマンティックな理解と重複する場合は、ARIAロールをスキップできます。
これは正しいと思いますが、スクリーンリーダーでテストして、これが正しいことを確認する必要があります。