我们正在为门户网站的主导航菜单实施（即添加）WAI-ARIA 支持。菜单如下所示：
菜单采用经典的方式实现<ul> / <li> / <a>DOM 树，使用 CSS 设计，看起来像水平选项卡。
这种小部件的 WAI-ARIA 兼容实现是什么？
我已经阅读了 w3org 的最新 WAI-ARIA 规范的许多部分，以获得一般理解、分类法等。
然后我阅读了几个 UI 小部件实现的示例。我找不到任何专门针对此类 CSS 导航菜单的示例。我一直发现的最接近的小部件是菜单、菜单栏和选项卡面板。当然我也看了免费 ARIA 社区组 https://groups.google.com/forum/?fromgroups=#!topic/free-aria/HWMoOUsnBOw（这个问题最初发布的地方）。
我想说的是none这些小部件与 (CSS) 导航菜单完全匹配。例如，TabPanel 可以控制页面中的某些内容（--> aria-controls），也可能是 MenuBar；但我完全不确定导航菜单控制页面中的内容（它控制要显示的下一页）。不进一步说，还有一些其他差异。
参考文献位于帖子末尾。如果有人提供更好（或更合适）的导航菜单示例，我们将很高兴了解它们。
参考
- https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
- http://wiki.jqueryui.com/w/page/38666403/Menubar http://wiki.jqueryui.com/w/page/38666403/Menubar
- http://www.oaa-accessibility.org/examplep/menubar2/ http://www.oaa-accessibility.org/examplep/menubar2/
- http://test.cita.illinois.edu/aria/menubar/ http://test.cita.illinois.edu/aria/menubar/
- http://dev.aol.com/dhtml_style_guide#menu http://dev.aol.com/dhtml_style_guide#menu
- http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm 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-practices/#menu
- http://www.w3.org/TR/wai-aria/roles http://www.w3.org/TR/wai-aria/roles
- http://www-03.ibm.com/able/resources/wai_aria_intro.html 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>
Roles:
- 外包装的 role=”navigation”
<div>
- 角色=“菜单栏”
<ul>导航栏容器
- 第二层的 role="menu"
<ul>容器
- 第一级和第二级的 role="presentation"
<li>菜单项（在公开的可访问菜单栏结构中不需要它们）
- 第一级和第二级的 role="menuitem"
<a>菜单项
特性：
- aria-haspopup="true" 为第一级
<a>具有子菜单的菜单项
- aria-labelledby="上一个的 ID
<a>二级菜单项”<ul>容器
States:
- aria-selected="true" 当前访问的第一级或第二级
<a>物品;另一方面 aria-selected="false"<a>项目。即强制执行“选定 当前页面”的概念
- aria-expanded="true/false" 用于第二级
<ul>容器
- aria-hidden="true/false" 用于第二级
<ul>容器
- aria-activedescendant="" 为主
<ul>导航栏容器。这是使用 tabindex 的替代方法
- 当前访问的 tabindex=0
<a>物品;另一方面 tabindex=-1<a>项目。这是为了在切换到导航栏时首先关注当前页面。它是使用 aria-activedescendant 的替代方法
键盘：
- Tab：将焦点从 Web 应用程序中的其他点移入/移出菜单。
- Shift+Tab：以相反的顺序将焦点从 Web 应用程序中的其他点移入/移出菜单。
- 右箭头：下一个导航栏项目
- 左箭头：上一个导航栏项目
- Enter：激活当前聚焦的项目（即导航到相应的 URL）
- 空格：激活当前聚焦的项目（即导航到相应的 URL）
2014 年 8 月：所选咏叹调与菜单项
回复 @Joshua Muheim 评论：现在我可以看到从这里 http://www.w3.org/TR/wai-aria/roles#menuitemradio，以及来自他的参考 http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected, that aria-selected不允许使用属性menuitem role.
正如我最近读到的所以答案 https://stackoverflow.com/a/24798883/540776鉴于当前的情况，有一些解决方案，并且还有一个新的提议属性。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
