我们正在对Web门户的主导航菜单实现(即添加)WAI-ARIA支持。菜单显示在这里:
菜单是通过经典的<ul> / <li> / <a> DOM树实现的，DOM树采用CSS样式，看起来像水平制表符。
对于此类小部件，推荐的WAI-ARIA实现建议是什么？
我将在此处发布一个可能的实现作为答案，以便使事情顺利进行。
如果您知道/不关心WAI-ARIA上下文中的CSS导航菜单，请跳过其余段落。
TA
前言(可以这么说)
我已经阅读了w3org的最新WAI-ARIA规范的许多部分，以获取一般的了解，分类法等。
然后，我阅读了关于UI小部件实现的几个示例。我找不到任何针对此类CSS导航菜单的示例。我经常发现的最接近的小部件是Menu，MenuBar和TabPanel。当然，我还查看了Free ARIA Community group(最初发布此问题的位置)。
我要说的是，这些小部件都不完全符合(CSS)导航菜单。例如，TabPanel可以控制页面中的某些内容(-> aria-controls)，也可以控制MenuBar。但我完全不确定导航菜单会控制页面中的内容(它控制要显示的下一页)。不做进一步的介绍，还有其他一些区别。
引用在帖子的结尾。如果有任何更好(或更适合)的导航菜单示例，我们将很高兴了解它们。
引用
最佳答案
可能的实现方式是:
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>容器<ul>菜单项(在公开的可访问菜单栏结构中不需要它们)一级和二级
<li>菜单项属性:
<a>菜单项<a>容器<a>菜单项的ID”省:
当前访问的第一级或第二级
<ul>项上的<a>项上的aria-selected =“false”。那就是要强制执行“选定的当前页面”概念<a>容器<ul>容器<ul>导航栏容器。这是使用tabindex 当前访问的
<ul>项上的<a>项上。这是为了在转到导航栏时首先关注当前页面。它是使用aria-activedescendant 键盘:
，2014年8月:aria选择的Vs菜单项
回复@Joshua Muheim的评论:现在我可以从from here中看到his reference，并且
<a>角色不允许使用aria-selected属性。正如我从最近的SO answer中读到的那样，鉴于当前的事物状态，有一些解决方案，并且还有一个新的提议属性。
关于menu - 导航栏/菜单的推荐WAI-ARIA实现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12279113/