导航栏/菜单的推荐WAI-ARIA实施 [英] Recommended WAI-ARIA implementation for navigation bar/menu

问题描述

我们正在对Web门户的主导航菜单实施(即添加)WAI-ARIA支持.菜单是此处显示的菜单:

We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here:

菜单是通过经典的<ul>/<li>/<a> DOM树实现的，DOM树的样式类似于CSS，看起来像水平制表符.

Menu is implemented by means of classic <ul> / <li> / <a> DOM tree, styled with CSS to look like horizontal tabs.

对于这种小部件，推荐的WAI-ARIA实施建议是什么?

What is the recommended WAI-ARIA implementation for such a widget?

我将在此处发布一个可能的实现作为答案，以便使事情顺利进行.

I'm going to post a possible implementation here as an answer, so to get things going.

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

Skip the remaining paragraphs if you know/don't care about CSS navigation menus in WAI-ARIA context.

TA

序言(可以这么说)

我已经阅读了w3org的最新WAI-ARIA规范的许多部分，以获取一般的了解，分类法等. 然后，我阅读了有关UI小部件实现的几个示例.我找不到专门针对此类CSS导航菜单的任何示例.我经常发现的最接近的小部件是Menu，MenuBar和TabPanel.当然，我还查看了免费的ARIA社区组 (最初发布此问题的位置).

I've read many parts of most recent WAI-ARIA specs from w3org for a general understanding, taxonomy, and so on. Then I've read about several examples of UI widget implementations. I could not find any example specifically targetd at such a CSS navigation menu. The closest widgets I've always found around are the Menu, the MenuBar, and the TabPanel. Of course I also looked in Free ARIA Community group (where this question was originally posted).

我要说的是，这些小部件中的 none 都与(CSS)导航菜单完全匹配.例如，TabPanel可以控制页面中的某些内容(-> aria-controls)，也可以控制MenuBar.但我完全不确定导航菜单会控制页面中的内容(它控制要显示的下一页).如果不做进一步介绍，还存在一些其他差异. 参考在帖子的末尾.如果有任何更好(或更适合)的导航菜单示例，我们将很高兴了解它们.

I'd say that none of those widgets exactly match a (CSS) navigation menu. As an example, TabPanel may control some content in the page (--> aria-controls), maybe MenuBar too; but I'm not at all sure that a navigation menu controls content in the page (it controls the next page to show). Without going further, there are some other differences as well. References are at the end of the post. If anyone as better (or more fit) examples of navigation menu, we'd be glad to know about them.

参考

• https://developer.mozilla.org/zh- 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

• 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

推荐答案

可能的实现方式是:

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 =导航"用于外部包装<div>
• role ="menubar"用于<ul>导航栏容器
• role ="menu"用于第二级<ul>容器
• role ="presentation"用于第一级和第二级<li>菜单项(在公开的可访问菜单栏结构中不需要它们)
• role ="menuitem"用于第一级和第二级<a>菜单项

• role="navigation" for outer wrapper <div>
• role="menubar" for <ul> navigation bar container
• role="menu" for second-level <ul> containers
• role="presentation" for first- and second-level <li> menu items (they are not needed in the exposed accessible menubar structure)
• role="menuitem" for first- and second-level <a> menu items

属性:

• aria-haspopup ="true"用于具有子菜单的第一级<a>菜单项
• aria-labelledby =第二级<ul>容器的上一个<a>菜单项的ID"

• aria-haspopup="true" for first-level <a> menu items having a submenu
• aria-labelledby="ID of previous <a> menu item" for second-level <ul> containers

状态:

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

• aria-selected="true" on currently visited first- or second-level <a> item; aria-selected="false" on the other <a> items. That is to enforce the concept "selected <==> current page"
• aria-expanded="true/false" for second-level <ul> containers
• aria-hidden="true/false" for second-level <ul> containers
• aria-activedescendant="" for main <ul> navigation bar container. This is an alternative to working with tabindex
• tabindex=0 on currently visited <a> item; tabindex=-1 on the other <a> items. That is in order to first focus on the current page when tabbing to the navigation bar. It is an alternative to working with aria-activedescendant

键盘:

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

2014年8月:aria选择的Vs菜单项

在回复@Joshua Muheim的评论中:现在我可以在这里看到 以及他的参考书，即menuitem角色不允许使用>属性.
正如我从最近的 SO答案中所读到的，鉴于当前的事物状态，有一些解决方案，并且有一个新的提议属性也是.

In reply to @Joshua Muheim comment: now I can see from here, as well as from his reference, that aria-selected attribute is not allowed for menuitem role.
As I read from this recent SO answer there are some solutions given the current state of things, and there is a new proposed attribute too.

这篇关于导航栏/菜单的推荐WAI-ARIA实施的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！