web-dev-qa-db-ja.com

role = "contentinfo"は常にフッター要素に追加する必要がありますか?

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

32
Ian Y.

あなたの場合、それはフッタータグにあるべきだと思います。

親ドキュメントに関する情報を提供することを目的としているため、フッター要素が親の適切なコンテキストを提供する場合に使用します。

http://www.w3.org/TR/wai-aria/roles#contentinfo

10
bcm

現在のところ、明確な正解はありません。

あなたが仕様で行く場合: http://www.w3.org/TR/wai-aria/roles#contentinfocontentinfoは次のように記述されます:

「親ドキュメントに関する情報を含む、知覚可能な大きな領域。ページのこの領域に含まれる情報の例は、著作権およびプライバシーに関する声明へのリンクです。」

したがって、この場合は<p> 鬼ごっこ。

ただし、あなたがこれらのランドマークを利用しているユーザーであるふりをします。誰もがrole="contentinfo"footerに追加すると、それがユーザーの期待どおりになります。ユーザーは「スペック」が何を言っているかを気にせず、ウェブサイトからウェブサイトへとブラウズするときに一貫したエクスペリエンスを望んでいるだけです。これは、フッターリンクなどがcontentinfoセクションにあることを期待していると思われます。これは、多くのサイトで実装されている方法であり、多くのアクセシビリティの専門家による推​​奨方法です。

私はユーザーに対応することを好むので、footer要素に適用しますが、これは仕様(または少なくとも私の解釈)そして、ブラウザや他のアクセシブルなテクノロジーがより一貫した方法でアクセシビリティを実装し始めると、この実装は変わるかもしれません。

7
Mike McLin

<p>要素。つまり、HTMLのポイントは、テキストにコンテキストを与えることです。したがって、適切なマークアップを行うことにより、適切なコンテキストを提供します。

最も適切な要素に役割を与えます。これはフッター要素に限定された属性ではありません。

3
Madara Uchiha

セマンティクスは既にHTML5仕様で伝えられているため、冗長な情報です https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html#the_difference_between_html5_and_aria

通常、HTML5要素のセマンティックな理解と重複する場合は、ARIAロールをスキップできます。

これは正しいと思いますが、スクリーンリーダーでテストして、これが正しいことを確認する必要があります。

1
Mike Gifford