什么是符合WAI-ARIA的导航栏/菜单实现

Question

我们正在对门户网站的主导航菜单实施（即添加）WAI-ARIA支持。菜单如下所示：

菜单是通过经典实现的

这种小部件的WAI-ARIA兼容实现是什么？

我已经阅读了w3org最新的WAI-ARIA规范的许多部分，以获得对WAI-ARIA规范的一般理解、分类等。然后我阅读了几个UI小部件实现的示例。我找不到任何专门针对这种CSS导航菜单的示例。我经常找到的最接近的小部件是菜单、菜单栏和选项卡面板。当然，我也看了免费的ARIA社区组（这个问题最初发布在这里）。

我要说的是，这些小部件中没有一个与（CSS）导航菜单完全匹配。例如，TabPanel可以控制页面中的某些内容(--

参考文献

• 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

您可以通过将aria-posinset和aria-setsize属性添加到具有角色=menuproject的元素来获得宣布'X of Y'信息的菜单。

Answer 2

ARIA设计模式为一系列自定义控件提供了预期的UI行为http://www.w3.org/TR/wai-aria-practices/#aria_ex使用esc键关闭并在关闭时返回触发元素是桌面和web上的标准UI。在任何Google docs应用程序上试用（例如）。

Answer 3

一种可能的实施办法是：

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”

特性：

• 对于第一级

国家：

• 当前访问的第一级或第二级

键盘：

• Tab：将焦点从Web应用程序中的其他点移入/移出菜单。
• Shift Tab：将焦点从Web应用程序中的其他点移入/移出菜单，顺序相反。
• 右箭头：下一个导航栏项
• 左箭头：上一个导航栏项
• 回车：激活当前关注的项目（即导航到相应的URL）
• 空格：激活当前关注的项目（即导航到相应的URL）

2014年8月：aria精选Vs menuitem

在回复@Joshua Muheim comment时：现在我可以从这里以及他的参考资料中看到，aria selected属性不允许用于menuitem角色
正如我从最近的答案中所读到的，考虑到当前的情况，有一些解决方案，还有一个新的建议属性。