html - 显示 :none, 下拉菜单和屏幕阅读器

Question

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

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

Option 2: use display:none and have a :focus state to match :hover that makes it display:block and brings the sub menu items onto the page, allowing them to receive the focus, but only while they are on the screen.

: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: 简单的答案是肯定的。

更长的答案:

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

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

解释:

可以使用 max-height 和 overflow hidden 对幻灯片方面进行动画处理(如果你有可变高度)。所以默认情况下，子菜单的最大高度为 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; }

如果将其设置为 9999px，过渡/动画的外观和感觉将受到与 250px 不同的影响。下面是一个简单的 CSS 示例:

较长的讨论点:

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

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