Zurb Foundation 菜单可访问性 - 子菜单切换按钮答案

【问题标题】：Zurb Foundation menu accessibility - submenu toggle buttonZurb Foundation 菜单可访问性 - 子菜单切换按钮
【发布时间】：2018-11-23 12:06:45
【问题描述】：

我正在从事一个需要可访问性的项目。我正在尝试测试多级和响应式水平菜单，如下所示：

除了一个问题外，功能性似乎对可访问性很好。通过键盘打开子菜单的唯一方法是在链接上按 Enter 键，这会阻止默认打开页面的功能。相反，我需要使用链接旁边的切换按钮来打开子菜单（类似于汉堡菜单按钮的功能）。

可以自定义 Foundation 以包括每个子菜单的切换吗？就像我可以从链接中删除切换功能并将其应用于按钮一样？

【问题讨论】：

【解决方案1】：

以防有人仍然想知道。我喜欢在“画布外”设置基础并添加启用子菜单切换的手风琴菜单。我可以从基础 6.4xx imo 中获得的最佳移动菜单 UX。您可以使用标签来打开每个链接或子菜单，也可以使用箭头在它们之间循环。

【讨论】：

【解决方案2】：

没错，您可以使用箭头键浏览所有子菜单。但问题是打开子菜单的功能禁用了链接，所以在链接上点击回车就无法访问该页面。（尝试用链接填充菜单并单击它们）

手风琴菜单添加了一个切换按钮，但它不会在模糊/聚焦时关闭菜单。它也没有悬停支持，但我可以在 CSS 中添加它： li.is-accordion-submenu-parent:hover > ul { display: block !important }

我还必须让它再次看起来像一个水平菜单，我现在将使用它作为一种解决方法。它允许键盘、单击和触摸访问。

【讨论】：

【解决方案3】：

一/二/三示例中的“一”菜单缺少aria-expanded 属性，该属性应根据是否显示子菜单在真/假之间切换。与“三”下的子菜单相同。

我能够使用向下箭头键展开“一个”菜单。

【讨论】：