推荐的导航栏/菜单的WAI-ARIA实现

Question

我们正在实施(即添加)WAI-ARIA支持到Web门户的主导航菜单.菜单如下所示:

菜单是通过经典的<ul>/ <li>/ <a>DOM树实现的,用CSS设计样式,看起来像水平标签.

对于这样的小部件,推荐的WAI-ARIA实现是什么？

我将在这里发布一个可能的实现作为答案,以便让事情顺利进行.

如果您知道/不关心WAI-ARIA上下文中的CSS导航菜单,请跳过其余段落.

TA

序言(可以这么说)

我已经阅读了来自w3org的最新WAI-ARIA规范的许多部分,以获得一般性理解,分类等.然后我读了几个UI小部件实现的例子.我找不到任何专门针对这样的CSS导航菜单的例子.我一直找到的最近的小部件是Menu,MenuBar和TabPanel.当然,我也查看过免费ARIA社区小组(这个问题最初发布的地方).

我会说这些小部件都没有与(CSS)导航菜单完全匹配.例如,TabPanel可以控制页面中的一些内容( - > aria-controls),也可以控制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>

角色:

• 外包装的role ="navigation" <div>
• role ="menubar"用于<ul>导航栏容器
• role ="menu"表示二级<ul>容器
• role ="presentation"用于第一级和第二级<li>菜单项(在暴露的可访问菜单栏结构中不需要它们)
• role ="menuitem"用于第一级和第二级<a>菜单项

属性:

• aria-haspopup ="true"表示<a>具有子菜单的第一级菜单项
• aria-labelledby =" <a>二级<ul>容器的前一菜单项的ID "

状态:

• 当前访问的第一级或第二级<a>项目的aria-selected ="true" ; aria-selected ="false"在其他<a>项目上.那就是强制执行"选择<==>当前页面"的概念
• 对于二级<ul>容器,aria-expanded ="true/false"
• 第二级<ul>容器的aria-hidden ="true/false"
• 主<ul>导航栏容器的aria-activedescendant ="" .这是使用tabindex的替代方法
• tabindex = 0当前访问的<a>项目; tabindex = -1其他<a>项目.这是为了在选项卡到导航栏时首先关注当前页面.它是使用aria-activedescendant的替代方案

键盘:

• 选项卡:将焦点从Web应用程序中的其他点移入/移出菜单.
• Shift + Tab:以相反的顺序将焦点从Web应用程序中的其他点移入/移出菜单.
• 右箭头:下一个导航栏项目
• 向左箭头:上一个导航栏项目
• 输入:激活当前关注的项目(即导航到相应的URL)
• 空间:激活当前关注的项目(即导航到相应的URL)

2014年8月:aria-selected Vs menuitem

回复@Joshua Muheim的评论:现在我可以从这里看到,也可以从他的参考资料中看到,该aria-selected属性不允许用于menuitem角色.
当我从最近的SO回答中读到时,根据当前的状态给出了一些解决方案,并且还有一个新的提议属性.