display:none、下拉菜单和屏幕阅读器
display:none, drop-down-menus and screen-readers
我经常读到使用 display:none 作为下拉菜单（就像 here 那样）是不好的做法，因为它是屏幕无法访问-readers.
在这篇文章中：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：
screen-readers 是否可以访问选项 2 中的下拉菜单？ screen-reader 是否阅读了完整的页面，然后您可以通过 tab 键浏览页面并且他们读出过 link？这是否意味着子菜单仅在屏幕上读取-reader 当用户通过标签浏览时？
问题 2：
使用 display:none 对我来说有很大的优势，我可以使用 jQuery 函数，比如 .slideDown() 和.slideUp() 为下拉菜单添加了漂亮的动画效果。如果我使用 position:absolute 并隐藏左侧的子菜单，我怎么能得到类似于 .slideDown() 的漂亮动画效果和 .slideUp()?
答案1：简单的答案是肯定的。
更长的答案：
屏幕 readers 有很多选项可以在页面上移动、列出所有可用的锚点等。例如，NVDA 也可以通过鼠标交互读取信息。不过，可访问性讨论的重点通常是键盘用户，因为他们经常被开发人员遗忘。如果用户在页面中切换，可见的锚点（不显示 none）可以获得焦点并被阅读。因此，只有在通过导航进行制表时，键盘用户（在选项 2 中）才能访问子菜单。这适用于视觉和屏幕 reader 键盘用户。您可以添加自己的键盘交互，以便在选项卡之外提供内容。但是，请记住，最终用户可能不知道如何使用菜单。您还需要注意已经绑定到屏幕 reader 的键。
答案2： 简单的答案——你可能要考虑CSS3 animations/transitions。
解释：
可以使用 max-height 和 overflow hidden 对幻灯片方面进行动画处理（如果高度可变）。所以默认情况下，子菜单的最大高度为 0，然后当添加 class 时，您可以将其设置为您认为有意义的数字。
.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，transition/animation 的外观和感觉将受到与 250px 不同的影响。下面是一个简单的 CSS 示例：
更长的讨论点：
如果使用与您提到的选项类似的方法，则隐藏菜单的位置绝对偏左与显示 none 菜单不会有太大好处。您可以讨论何时禁用 JS 以及那时需要可用的内容。默认情况下显示 none 会阻止键盘用户获取内容（不过屏幕 reader 可以理解 Javascript）。但是 JS 争论带来了进一步的困境，如果我们真的希望这对所有没有 Javascript 的用户来说都是完美的，并且有不同的情况。由于内容仅在视觉上隐藏且位置绝对偏左，作为视觉用户的键盘用户将能够专注于锚点但永远不会看到内容并且可能会迷路（因为它仍然在屏幕之外）。
因此，如果我们真的想考虑所有情况下的所有用户，那并不容易。有时我们必须设置一些限制，渐进增强是一个可能需要记住的方面。也许子菜单只对 Javascript 用户可用。如果内部页面有子部分链接的轨道导航，那么非 JS 用户无论屏幕 reader 用户还是可视键盘用户仍然可以访问站点的所有页面。
我经常读到使用 display:none 作为下拉菜单（就像 here 那样）是不好的做法，因为它是屏幕无法访问-readers.
在这篇文章中：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： screen-readers 是否可以访问选项 2 中的下拉菜单？ screen-reader 是否阅读了完整的页面，然后您可以通过 tab 键浏览页面并且他们读出过 link？这是否意味着子菜单仅在屏幕上读取-reader 当用户通过标签浏览时？
问题 2： 使用 display:none 对我来说有很大的优势，我可以使用 jQuery 函数，比如 .slideDown() 和.slideUp() 为下拉菜单添加了漂亮的动画效果。如果我使用 position:absolute 并隐藏左侧的子菜单，我怎么能得到类似于 .slideDown() 的漂亮动画效果和 .slideUp()?
答案1：简单的答案是肯定的。
更长的答案：
屏幕 readers 有很多选项可以在页面上移动、列出所有可用的锚点等。例如，NVDA 也可以通过鼠标交互读取信息。不过，可访问性讨论的重点通常是键盘用户，因为他们经常被开发人员遗忘。如果用户在页面中切换，可见的锚点（不显示 none）可以获得焦点并被阅读。因此，只有在通过导航进行制表时，键盘用户（在选项 2 中）才能访问子菜单。这适用于视觉和屏幕 reader 键盘用户。您可以添加自己的键盘交互，以便在选项卡之外提供内容。但是，请记住，最终用户可能不知道如何使用菜单。您还需要注意已经绑定到屏幕 reader 的键。
答案2： 简单的答案——你可能要考虑CSS3 animations/transitions。
解释：
可以使用 max-height 和 overflow hidden 对幻灯片方面进行动画处理（如果高度可变）。所以默认情况下，子菜单的最大高度为 0，然后当添加 class 时，您可以将其设置为您认为有意义的数字。
.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，transition/animation 的外观和感觉将受到与 250px 不同的影响。下面是一个简单的 CSS 示例：
更长的讨论点：
如果使用与您提到的选项类似的方法，则隐藏菜单的位置绝对偏左与显示 none 菜单不会有太大好处。您可以讨论何时禁用 JS 以及那时需要可用的内容。默认情况下显示 none 会阻止键盘用户获取内容（不过屏幕 reader 可以理解 Javascript）。但是 JS 争论带来了进一步的困境，如果我们真的希望这对所有没有 Javascript 的用户来说都是完美的，并且有不同的情况。由于内容仅在视觉上隐藏且位置绝对偏左，作为视觉用户的键盘用户将能够专注于锚点但永远不会看到内容并且可能会迷路（因为它仍然在屏幕之外）。
因此，如果我们真的想考虑所有情况下的所有用户，那并不容易。有时我们必须设置一些限制，渐进增强是一个可能需要记住的方面。也许子菜单只对 Javascript 用户可用。如果内部页面有子部分链接的轨道导航，那么非 JS 用户无论屏幕 reader 用户还是可视键盘用户仍然可以访问站点的所有页面。