什么是针对导航栏/菜单的符合WAI的实现？

Question

我们正在实现(即增加)WAI支持到一个门户网站的主导航菜单。菜单如下所示：

​

​

菜单是通过经典的<ul> / <li> / <a> DOM树来实现的，它使用CSS样式，看起来像水平选项卡。

对于这样一个小部件，什么是符合WAI的实现？

我从w3org上阅读了最近的WAI规范的许多部分，以了解总体情况、分类法等。然后，我阅读了几个UI小部件实现的例子。在这样的CSS导航菜单上，我找不到任何特定目标的示例。我经常发现的最近的小部件是菜单、MenuBar和TabPanel。当然，我还查看了免费ARIA社区小组 (这个问题最初是在这里发布的)。

我想说的是，这些小部件中没有一个与(CSS)导航菜单完全匹配。例如，TabPanel可能控制页面中的某些内容(->aria-控件)，也可能是MenuBar；但我完全不确定导航菜单是否控制页面中的内容(它控制要显示的下一个页面)。没有更进一步，还有其他一些不同之处。推荐信在帖子的末尾。如果有更好的(或更合适的)导航菜单的例子，我们会很高兴知道他们。

参考资料

• 菜单
• http://wiki.jqueryui.com/w/page/38666403/Menubar
• http://www.oaa-accessibility.org/examplep/menubar2/
• http://test.cita.illinois.edu/aria/menubar/
• guide#menu
• 模块/demo.htm
• http://www.w3.org/TR/wai-aria-practices/#menu
• http://www.w3.org/TR/wai-aria/roles
• 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>的<div>“导航”
• 用于role=导航条容器的<ul>“menubar”
• 用于二级role=容器的<ul>“菜单”
• Role=第一级和第二级<li>菜单项的“表示”(在公开的可访问菜单结构中不需要它们)
• 用于第一级和第二级role=菜单项的菜单项

属性：

• 对于具有子菜单的第一级<a>菜单项，aria-haspopup="true“
• 用于二级<a>容器的aria-labelledby=“先前<ul>菜单项的ID”

国家：

• 对于当前访问的第一级或二级<a>项目，aria-selected="true“；在其他<a>项上，aria-selected="false”。即强制执行“选定的<==>当前页”的概念。
• aria-展开=用于二级<ul>容器的“真/假”
• 用于二级<ul>容器的aria-隐藏=“true/false”
• 针对主<ul>导航栏容器的活动项=“”。这是一种替代使用tabindex的方法。
• 当前访问tabindex=0项目的<a>；其他<a>项的tabindex=-1。这是为了第一次集中在当前页面时，选项卡到导航栏。它是一种替代使用aria激活剂的方法。

键盘：

• 选项卡:将焦点从web应用程序中的其他点移入/移出菜单。
• Shift+Tab:将焦点从web应用程序中的其他点移到/移出菜单，顺序是相反的。
• 右箭头:下一个导航栏项目
• 左箭头:前一个导航栏项
• 输入:激活当前焦点项(即导航到相应的URL)
• 空格:激活当前焦点项(即导航到相应的URL)

/2014年8月:aria-选定的Vs菜单项目

在回答@Joshua的评论时:现在我可以看到从这里开始以及他的证言，aria-selected属性不允许用于menuitem角色。

正如我从这个最近的所以回答中看到的，在当前的情况下，有一些解决方案，并且还有一个新的提议属性。

Answer 2

通过将aria-posinset和aria-setsize属性添加到带有role=menuitem的元素中，您可以获得一个菜单来宣布'X of Y‘信息。

Answer 3

+Escape键应该关闭打开的菜单，并将焦点返回到打开它的元素。