推荐WAI-ARIA实施导航栏/菜单推荐WAI-ARIA实施导航栏/菜单(Recommended W

我们正在实施（即加入）WAI-ARIA支持门户网站的主导航菜单的过程。菜单是这里所示：

菜单由经典的手段来实现<ul> / <li> / <a> DOM树，与CSS样式看起来像水平制表符。

什么是这种插件的推荐WAI-ARIA实现？

我要在这里发表一个可能的实现作为一个答案，所以要得到的东西去。

跳过其余各段，如果你知道/不在乎在WAI-ARIA背景CSS导航菜单。

序言（这么说）

我读过从w3org最近WAI-ARIA规范的许多地方的一般理解，分类，等等。然后，我读过有关UI插件实现的几个例子。我找不到在这样的CSS导航菜单专门targetd任何例子。我总是围绕发现的最接近小部件菜单中，菜单栏，和的TabPanel。当然，我也看了在免费ARIA社区团体（其中这个问题最初发布）。

我会说，没有这些小部件正好匹配（CSS）导航菜单。作为一个例子，可能的TabPanel控制在页面的某些内容（ - >咏叹调的控件），说不定的MenuBar太; 但我不能肯定，一个导航菜单控制页面（它控制下页显示）的内容。如果没有进一步的打算，还有一些其他的差异也较大。引用是在帖子的末尾。如果有人为导航菜单的更好（或更适合）的例子，我们很乐意了解他们。

参考

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
http://wiki.jqueryui.com/w/page/38666403/Menubar
http://www.oaa-accessibility.org/examplep/menubar2/
http://test.cita.illinois.edu/aria/menubar/
http://dev.aol.com/dhtml_style_guide#menu
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
http://www.w3.org/TR/wai-aria-practices/#menu
http://www.w3.org/TR/wai-aria/roles
http://www-03.ibm.com/able/resources/wai_aria_intro.html

Answer 1:

一种可能的实现将是：

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>
角色=“菜单栏”为<ul>导航栏容器
角色=“菜单”用于第二级<ul>容器
角色=“呈现”为第一级和第二级<li>的菜单项（它们不需要在曝光可访问的菜单栏结构）
角色=“菜单项”的第一级和第二级<a>菜单项

属性：

咏叹调-haspopup =“真”为第一级<a>具有子菜单的菜单项
咏叹调-labelledby =“以前的ID <a>为第二级菜单项” <ul>容器

状态：

咏叹调选择=“真”上当前访问的第一或第二级<a>项; 咏叹调选择的在另一=“假” <a>项目。即强制的概念“选择了<==>当前页”
咏叹调发泡=“真/假”为第二级<ul>容器
咏叹调隐藏=“真/假”为第二级<ul>容器
咏叹调-activedescendant = “”用于主<ul>导航栏容器。这是具有tabIndex的另一种方法
的tabindex = 0上当前访问的<a>项; 的tabindex = -1另<a>项目。这是为了tab键导航栏时，首先关注在当前页面。这是与唱段，activedescendant的另一种方法

键盘：