Menu 导航栏/菜单的推荐WAI-ARIA实现

我们正在对门户网站的主导航菜单实施（即添加）WAI-ARIA支持。菜单如下所示：

菜单通过经典的

/

/

实现（此问题最初发布在此处）

我要说的是，这些小部件中没有一个与（CSS）导航菜单完全匹配。例如，TabPanel可以控制页面中的某些内容（->aria控件），也可以控制菜单栏；但我不确定导航菜单是否控制页面中的内容（它控制下一页的显示）。如果不进一步讨论，还有一些其他差异。
推荐信在这篇文章的末尾。如果有人能提供更好（或更适合）的导航菜单示例，我们很高兴了解他们

参考资料











一种可能的实施方式是：

HTML结构：




，以及从中，
aria selected
属性不允许用于
menuitem
角色。

正如我从最近的文章中所读到的，鉴于当前的情况，有一些解决方案，还有一个新的建议属性。
+Escape键应该关闭一个打开的菜单，并将焦点返回到打开它的元素。
作为参考，通过向role=menuitem的元素添加aria posinset和aria setsize属性，可以获得一个菜单来宣布“X/Y”信息。
真诚地
Bryan Garaventa
Escape to close（退出关闭）是一种标准的返回方式，这是许多用户的预期行为。
ARIA设计模式为一系列自定义控件提供了预期的UI行为使用esc键关闭并在关闭时返回触发元素是桌面和web上的标准UI。在任何Google docs应用程序上试用（例如）
 在我读到你的答案之前，我几乎准备放弃考虑不周的咏叹调规格。对我来说，菜单中缺少的是“演示”角色，这导致了奇怪的行为，比如每个菜单项都被读出为“1对1”，而不是“1对[长度]”。我在网上看到的大多数例子都会导致这种不受欢迎的行为，除了你的答案之外，我没有发现任何一个例子说
ul[role=menu]>li[role=presentation]>a[role=menuitem]
。做得好。实际上，“1/1”问题是在我尝试
ul[role=menu]>li>a[role=menuitem]
时出现的。平心而论，大多数人都在推荐ul[role=menu]>li[role=menuitem]>a
，但这根本不起作用！它会阅读菜单项，但由于没有链接聚焦，你不能带着它们去任何地方。很高兴它有帮助！就我所知，每次插入一些（嵌套的）节点只是出于审美目的，即定位、显示/隐藏、背景着色等，都需要xxx[role=presentation]。但是，从内容的角度来看，这些节点毫无意义，因此您可以将它们标记为任何可访问性工具。
应用程序
角色也需要定义吗？此外，当使用屏幕阅读器（SR）时，如JAWS元素和
menuitem
角色（如锚定链接）将在SR快捷方式列表中被忽略。如果一些顶级菜单项不是链接，而是仅用于打开子菜单的按钮，应如何处理它们？我上次考虑这些功能已经有一段时间了。乍一看，使用Escape键关闭打开的菜单似乎是一个很好的选择（我不记得我在搜索过程中是否已经看到了上面提到的内容）。我不确定在使用Esc关闭菜单后会发生什么：我觉得您的建议（将焦点返回到打开它的元素）不合适。Escape是关闭的标准。谢谢分享。我认为如果菜单DOM进行日常更改，可能会对其他人有所帮助。我可以读到“如果集合中的所有元素都出现在DOM中，则不必这样做”，只是有点晚了：谢谢您的添加，福克纳先生