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)。しかし、ナビゲーションメニューがページのコンテンツを制御するかどうかはわかりません(表示する次のページを制御します)。さらに進むことなく、他にもいくつかの違いがあります。参照は投稿の最後にあります。ナビゲーションメニューのより良い(またはより適切な)例があれば、私たちはそれらについて知ってうれしいです。

参考文献

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

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

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

0
Steve Faulkner