显示：无，下拉菜单和屏幕阅读器

Question

我经常读到将 display:none 用于下拉菜单（如 done here）是不好的做法，因为屏幕阅读器无法访问它。

在这篇文章中：http://simplyaccessible.com/article/better-for-accessibility/ 作者指出，display:none 的 position-off-left 替代方案也有缺点，并提出以下建议以使下拉菜单键盘可访问：

选项 2：使用 display:none 并有一个 :focus 状态来匹配 :hover 使其显示：阻止并将子菜单项带到 页面，允许他们接收焦点，但仅在他们打开时 屏幕。

:focus 调整是用 JavaScript 实现的。他在http://examples.simplyaccessible.com/css-menu/option-2.php 上举了一个例子。

问题 1： 屏幕阅读器是否可以访问选项 2 中的下拉菜单？屏幕阅读器是否会阅读完整的页面，然后您可以通过标签浏览页面并且他们会读出任何链接？这是否意味着子菜单只有在用户切换时才会被屏幕阅读器读取？

问题 2： 使用 display:none 对我来说有很大的优势，我可以使用像 .slideDown() 和 .slideUp() 这样的 jQuery 函数来添加下拉菜单上有漂亮的动画效果。如果我使用 position:absolute 并隐藏左侧的子菜单，我怎样才能获得类似于 .slideDown() 和 .slideUp 的漂亮动画效果()?

Answer 1

答案 1： 简单的答案是肯定的。

更长的答案：

屏幕阅读器有很多选项可以在页面中移动、列出所有可用的锚点等。例如，NVDA 也可以通过鼠标交互来读取信息。但是，可访问性讨论的焦点通常是键盘用户，因为他们经常被开发人员遗忘。如果用户正在浏览页面，则可见的锚点（不显示无）可以具有焦点并被阅读。因此，只有在通过导航切换时，键盘用户（在选项 2 中）才能访问子菜单。这适用于视觉和屏幕阅读器键盘用户。您可以添加自己的键盘交互，以便在选项卡之外提供内容。但是，请记住，最终用户可能不知道如何使用菜单。您还需要注意已经绑定到屏幕阅读器的键。

答案 2： 简单的答案 - 您可能需要考虑 CSS3 动画/过渡。

说明：

可以使用 max-height 和 overflow hidden 对幻灯片方面进行动画处理（如果您有可变高度）。所以默认情况下子菜单的 max-height 为 0，然后当添加类时，您可以将其设置为您认为有意义的数字。

.menu li { position:relative; }
.sub-menu {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:all 0.3s ease-in;
}
.active > .sub-menu { max-height:99em; opacity:1; }

如果您将其设为 9999 像素，则过渡/动画外观的影响将不同于 250 像素。下面是一个简单的 CSS 示例：

更长的讨论点：

如果使用类似于您提到的选项的方法，隐藏绝对位置偏左的菜单与不显示菜单并没有太大的好处。您可以讨论何时禁用 JS 以及需要可用的内容。默认情况下不显示会阻止键盘用户获取内容（但屏幕阅读器确实理解 Javascript）。但是，如果我们真的希望这对于所有没有 Javascript 的不同情况的用户来说都是完美的，那么 JS 的争论会带来更多的困境。由于内容仅在位置绝对离开左侧方法的情况下视觉隐藏，作为视觉用户的键盘用户将能够专注于锚点，但永远不会看到内容并且可能会迷路（因为它仍然不在屏幕上）。

因此，如果我们真的想在所有情况下考虑所有用户，这并不容易。我们有时必须设置一些限制，而渐进增强是需要牢记的一个可能方面。也许子菜单只对 Javascript 用户可用。如果内部页面具有子部分链接的轨道导航，那么非 JS 用户（无论屏幕阅读器用户或可视键盘用户）仍然可以访问站点的所有页面。