4

次の 3 つのコード例を比較してみましょう。

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#"><img src="trigger.png"></a></li>
    </ul>
</nav>

例 1

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <a href="#"><img src="trigger.png"></a>
</nav>

例 2

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>
<a href="#"><img src="trigger.png"></a>

例 3

セマンティクスに関しては、どれが最も正確ですか? メニュー トリガーをリストの内側nav、リストnavの外側、または外側に含める必要がありますnavか?

4

2 に答える 2

3

もう少しベルトとブレースがありますが、私はお勧めします：

<nav role="navigation" aria-labelledby="navHeading">
<h2 class="at" id="navHeading">Main menu</h2>

<button aria-haspopup="true"><img src="trigger.png" alt="Show menu"></button>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

アクセシビリティに関するいくつかの事項:

  • H2、ビューから隠されています（.atクラスはそれを画面外に隠す必要があります）。
  • roleで、navそれはより堅牢であるためです（より多くの人がそれを理解するでしょう）。
  • aria-labelledby、と組み合わせてID、ナビゲーションにラベルを付けます。
  • aria-haspopupポップアップまたは新しいものが表示されていることを示します。

button表示/非表示メカニズムを使用すると、どこにも移動せず、ページ上の何かを制御できます。上か下かはおそらく大きな違いはありませんが、私は要素の表示/非表示を最初にコントロールすることに慣れています。

ただし、選択したときにキーボードのフォーカスが最初のリンクに配置されるようにします。

また、ボタンにはコンテンツが必要であることを忘れないでください。そのため、画像には代替テキストが必要です。

于 2013-10-23T23:15:22.620 に答える