1

我从Stephanie Eckles的CSS-Only Accessible Dropdown Navigation Menu中了解到。但她对下拉菜单导航菜单的响应式设计仅适用于少于 3 项的菜单，不适用于超过 4 项的菜单。

我想保留那个菜单，但我不知道手机上有超过 4 个项目的菜单的哪种解决方案，使其易于访问和使用。

一些文章说带有汉堡图标的侧面导航菜单无法访问和使用。

在我的网站，在手机上，超过 4 个项目的菜单超出了屏幕限制。

我不确定这些菜单是否可以在手机上访问和使用：

如何保留相同的菜单并为手机重新使用这些菜单之一？

4

1 回答 1

1

这里有几位要解决的问题。

一些文章说带有汉堡图标的侧面导航菜单无法访问和使用。

不确定这些是哪些文章，但这根本不是真的。显然你必须正确地实现它们（这就是为什么它们中的许多是不可访问的）但是没有什么能阻止你使用这种模式。

汉堡包图标本身就是一个可访问性问题，最好在它旁边加上“菜单”一词，也许这就是这里混淆问题的原因。

我从 Stephanie Eckles 的 CSS-Only Accessible Dropdown Navigation Menu 中了解到。

这不是一个完整的解决方案，尽管文章确实说明了这一点，但认为她的模式仅适用于 CSS 是一种误导，但它并不是完全可访问的。

要修复她的示例，您需要做几件事：

  1. 使用 JavaScript 切换aria-expanded到true何时打开下拉菜单。aria-expanded="false"一旦菜单关闭，您将其切换回。这是屏幕阅读器用户的重要信息。

  2. 您还需要停止下拉菜单在焦点上自动打开。键盘用户被迫以当前实现的方式在下拉菜单中的所有项目之间切换。相反，您应该将菜单的打开和关闭附加到Enter键上，以便用户可以浏览与他们不相关的菜单项。幸运的是，此更改使项目编号 1 变得容易，因为您可以aria-expanded打开Enter。

  3. 能够使用键关闭下拉菜单<kbd>Escape</kbd>。

可能还有其他问题需要解决，但正如您可能会说的那样，这远非易懂，而且恐怕不是一个值得学习的好例子。

超过 4 个项目的菜单超出了屏幕限制。

由于您已经用完了水平空间，因此您只有几个选择。

第一个是将菜单变成<select>我们之前讨论的侧导航菜单。

关于可访问的滑出式菜单，此代码笔是一般原则的一个很好的起点，该原则取自这篇文章，解释了如何使滑出式菜单可访问以及为什么每个项目都以这种方式实现。我没有详细检查它，但我看不到任何直接的缺陷/故障，并且 HTML 应该与您现有的 HTML 足够接近，以允许您保留菜单的桌面版本（具有上一节中所述的修复）。

或者，如果您只有 4 个主菜单项（这不太可能改变），那么您可以将菜单项堆叠在 2 x 2 网格中。

这很容易通过在移动媒体查询中添加float: left和width: 50%菜单来实现<li>，以便它们堆叠成 2 x 2 网格。

还有其他方法可以做到这一点，但只需简单浏览一下您的网站，这似乎是最快的方法。

于 2021-01-04T10:29:35.213 回答