42

我们正在实施（即添加）对 Web 门户主导航菜单的 WAI-ARIA 支持。菜单是此处显示的菜单：

导航菜单截图

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

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

我已经阅读了 w3org 的最新 WAI-ARIA 规范的许多部分，以获得一般的理解、分类等。然后，我阅读了几个 UI 小部件实现的示例。我找不到任何专门针对此类 CSS 导航菜单的示例。我经常发现的最接近的小部件是 Menu、MenuBar 和 TabPanel。当然，我还查看了Free ARIA 社区组（最初发布此问题的地方）。

我会说这些小部件都不完全匹配（CSS）导航菜单。例如，TabPanel 可能控制页面中的某些内容（--> aria-controls），也可能是 MenuBar；但我完全不确定导航菜单是否控制页面中的内容（它控制要显示的下一页）。无需进一步说明，还有一些其他差异。参考文献在文章末尾。如果有人作为导航菜单的更好（或更合适）示例，我们将很高兴了解它们。

参考

4

5 回答 5

76

一个可能的实现是：

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

特性：

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

状态：

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

键盘：

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

2014 年 8 月：选择咏叹调 Vs menuitem

回复@Joshua Muheim 评论：现在我可以从这里以及他的参考中看到，角色aria-selected不允许该属性。 正如我从这个最近的SO 答案中读到的，鉴于当前的情况，有一些解决方案，并且还有一个新的提议属性。menuitem

于 2012-09-05T10:15:33.000 回答
0

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

于 2013-12-07T06:40:40.503 回答
0

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

于 2014-08-20T20:45:52.937 回答
-1

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

于 2013-08-30T19:20:25.890 回答
-1

Escape to close 是一种标准的回归方式，它是许多用户的预期行为。

于 2014-08-20T20:03:34.177 回答