web-dev-qa-db-ja.com

ナビゲーションバー/メニューの推奨WAI-ARIA実装

現在、WebポータルのメインナビゲーションメニューにWAI-ARIAサポートを実装（追加）しています。メニューは次のとおりです。

Navigation menu screenshot

メニューは従来の<ul>/<li>/<a> DOMツリー。CSSでスタイル設定され、水平タブのように見えます。

そのようなウィジェットに推奨されるWAI-ARIA実装は何ですか？

答えとしてここに可能な実装を投稿するので、物事を進めます。

WAI-ARIAコンテキストのCSSナビゲーションメニューを知っている/気にしない場合は、残りの段落をスキップします。

TA

プリアンブル（言うまでもなく）

一般的な理解、分類などのために、w3orgから最新のWAI-ARIA仕様の多くの部分を読みました。次に、UIウィジェットの実装のいくつかの例について読みました。このようなCSSナビゲーションメニューを特に対象とした例は見つかりませんでした。私がいつも見つけている最も近いウィジェットは、Menu、MenuBar、およびTabPanelです。もちろん、 無料のARIAコミュニティグループ （この質問が最初に投稿された場​​所）も調べました。

これらのウィジェットのnoneは、（CSS）ナビゲーションメニューと完全に一致すると言います。例として、TabPanelはページの一部のコンテンツを制御する場合があります（-> aria-controls）。しかし、ナビゲーションメニューがページのコンテンツを制御するかどうかはわかりません（表示する次のページを制御します）。さらに進むことなく、他にもいくつかの違いがあります。参照は投稿の最後にあります。ナビゲーションメニューのより良い（またはより適切な）例があれば、私たちはそれらについて知ってうれしいです。

参考文献

menunavigationmenubarwai-aria
41
superjos

可能な実装は次のとおりです。

HTML構造：

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

ロール：

  • 外部ラッパー<div>のrole =” navigation”
  • <ul>ナビゲーションバーコンテナのrole = "menubar"
  • 第2レベルの<ul>コンテナのrole = "menu"
  • 第1レベルおよび第2レベルの<li>メニュー項目のrole = "presentation"（公開されているアクセス可能なメニューバー構造には必要ありません）
  • 第1レベルおよび第2レベルの<a>メニュー項目のrole = "menuitem"

プロパティ：

  • サブメニューを持つ第1レベルの<a>メニュー項目のaria-haspopup = "true"
  • aria-labelledby = "前の<a>メニュー項目のID"第2レベル<ul>コンテナー用

状態：

  • 現在アクセスされている第1レベルまたは第2レベルの<a>アイテムのaria-selected = "true";他の<a>アイテムのaria-selected = "false"。それは「選択された<==>現在のページ」という概念を実施することです
  • 第2レベルの<ul>コンテナのaria-expanded = "true/false"
  • 第2レベルの<ul>コンテナのaria-hidden = "true/false"
  • メイン<ul>ナビゲーションバーコンテナーのaria-activedescendant = ""これはtabindexを使用する代わりになります
  • 現在アクセスされている<a>アイテムのtabindex = 0。他の<a>アイテムのtabindex = -1。これは、ナビゲーションバーにタブ移動するときに最初に現在のページにフォーカスするためです。 aria-activedescendantを使用する代わりになります

キーボード：

  • タブ：メニューのフォーカスをWebアプリケーションの他のポイントから移動します。
  • Shift + Tab：Webアプリケーションの他のポイントから、メニューのフォーカスを逆の順序で移動します。
  • 右矢印：次のナビゲーションバー項目
  • 左矢印：前のナビゲーションバー項目
  • Enter：現在フォーカスされているアイテムをアクティブにします（つまり、対応するURLに移動します）
  • スペース：現在フォーカスされているアイテムをアクティブにします（つまり、対応するURLに移動します）

Aug/2014：aria-selected Vs menuitem

@Joshua Muheimコメントへの返信：現在、 ここから 、および 彼の参照 から、aria-selected属性はmenuitemロール。
この最近の SOの答え から読んだように、現在の状況を考えるといくつかの解決策があり、新しい提案された属性もあります。

75
superjos

参考までに、role = menuitemの要素にaria-posinsetおよびaria-setsize属性を追加することにより、「X of Y」情報をアナウンスするメニューを取得できます。敬具ブライアン・ガラベンタ

1
Bryan Garaventa

閉じるまでのエスケープは標準的な方法であり、多くのユーザーが期待する動作です。

0
Joseph Karr O'Connor

ARIAの設計パターンは、さまざまなカスタムコントロールに期待されるUI動作を提供します http://www.w3.org/TR/wai-aria-practices/#aria_ex の使用 esc 閉じるときにトリガー要素に戻るためのキーは、デスクトップとWeb全体の標準UIです。 Googleドキュメントアプリ（たとえば）で試してください。

0
Steve Faulkner