42

Web ポータルのメイン ナビゲーション メニューに WAI-ARIA サポートを実装 (追加) する作業を行っています。メニューは次のとおりです。

ナビゲーション メニューのスクリーンショット

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

そのようなウィジェットの WAI-ARIA 準拠の実装は何ですか?

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

これらのウィジェットのどれも(CSS) ナビゲーション メニューと完全に一致するものはないと思います。例として、TabPanel はページ内の一部のコンテンツを制御する場合があり (--> aria-controls)、おそらく MenuBar も制御します。しかし、ナビゲーション メニューがページのコンテンツを制御するかどうかはまったくわかりません (次に表示するページを制御します)。先に進むことなく、他にもいくつかの違いがあります。参考文献は記事の最後にあります。ナビゲーション メニューのより良い (またはより適切な) 例があれば、喜んでお知らせします。

参考文献

4

5 に答える 5

76

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

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>

役割:

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

プロパティ：

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

州:

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

キーボード：

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

2014 年 8 月: aria-selected 対 menuitem

@Joshua Muheim コメントへの返信: hereと彼の参照から、そのaria-selected属性がmenuitem役割に許可されていないことがわかります。
この最近のSO回答から読んだように、現在の状況を考えるといくつかの解決策があり、新しい提案された属性もあります。

于 2012-09-05T10:15:33.000 に答える
0

で要素にaria-posinsetと属性を追加すると、「X of Y」情報を通知するメニューを取得できます。aria-setsizerole=menuitem

于 2013-12-07T06:40:40.503 に答える
0

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

于 2014-08-20T20:45:52.937 に答える
-1

Escape to close は昔からの標準であり、多くのユーザーが期待する動作です。

于 2014-08-20T20:03:34.177 に答える