52

次のすべては同じ意味を持っていますか? そうでない場合は、答えを説明してください。


1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>


2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>


3.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>
4

6 に答える 6

48

Alohciが指摘したように、HTML5 によれば、例 3 は許可されていません。

ただし、例 1 と 2 は意味的に同等ではありません。

navはセクショニング エレメントであり、そうでdivはありません。したがって、例 1 では無題のセクション (空の見出しに似ています) が作成され、ドキュメントのアウトライン全体が変更されます。

またnav、常にその親のセクション コンテンツ (セクション ルート) に属しているため、サイト全体のナビゲーション、メイン コンテンツのナビゲーション、メイン コンテンツの第 3 章のみのナビゲーション、および/またはサイドバーなどの二次コンテンツ

この違いは、navigation役割の定義に表されています

ドキュメントまたは関連ドキュメントをナビゲートするためのナビゲーション要素 (通常はリンク) のコレクション。

およびnav要素（私が太字で示しています）：

nav要素は、他のページまたはページ内のパーツにリンクするページのセクション (ナビゲーション リンクを含むセクション) を表します。

また、注意: WAI-ARIA をサポートしていない/認識していない HTML5 ユーザー エージェントは、例 2 にナビゲーションが含まれていることを理解できません (逆も同様です)。

于 2013-01-08T18:15:03.933 に答える
6

最初の 2 つのケースは意味的に同等です。3番目はそうではありません。<ul>のデフォルトの暗黙の ARIA セマンティックはlistであり、有効に設定できるのは 、 、 、 、 、 、 、 、 、 、または のいずれdirectoryかlistでlistboxあるmenuためmenubar、presentationにtablist設定toolbarするtreeと無効になり、要素が最初の 2 つのケースで持つセマンティックがnavigation壊れます。list<ul>

于 2013-01-06T11:04:43.090 に答える
5

<nav role="navigation">W3C 検証サービスで HTML5 dtd を使用して検証します。

支援技術が追いつくまで、古いものと新しいものの両方をサポートするので、私には良い選択肢のように思えます.

于 2013-10-27T10:31:30.690 に答える
3

WAVE Web Accessibility Toolを使用すると、このような情報を取得できます。

そこにあるドキュメントと結果ビューを確認すると、少し混乱しますが。誰もが Web 上のアクセシビリティについてよく知っているわけではないので、明確な例があればよいと思います。(結果ビューは非常によく見えますが、それでも例は役に立ちます。)

于 2014-04-02T04:42:25.733 に答える
2

OK、これは良い質問です。要するに、これは、同様の問題を提案する 2 つ以上の仕様が異なる時期にリリースされ、異なるブラウザー/スクリーン リーダーによってサポートされる場合に起こることです。

<nav>要素には自動的に役割が与えられる必要があるためnavigation、理論的にはオプション 1 を使用できます。ただし、一部のスクリーン リーダーはまだそれを認識していないため、2 を使用する方が適切です。オプション 3 は奇妙に思えます。これは順序付けられていないリストではなく、ナビゲーションです。

もちろん、これは良い例です。多くの ARIA ロールでは、一致する HTML 要素がありません。そのため、ARIA の他のものを使用していて、明示的になりたい場合は、オプション 2 を選択できます。

個人的には、GZIP はファイル サイズを無関係にするため、2 を使用します。これにより、テストした AT で動作するようになります (Voiceover と Windows の他の何か、今は思い出せません)。

于 2013-01-06T09:27:59.253 に答える