使用 `display: none;` 很诱人，但不要这样做

您想隐藏页面上的某些内容，因此

.hide {
   display: none;
}

但是等等！通过将该类应用于元素，您立即使该内容对屏幕阅读器“不可访问”。您可能一直都知道这一点，但即使这样，这个毒苹果仍然会时不时地潜入我们的代码中。

我不想重新讨论所有细节。如果您还不了解这一点，最好的办法是阅读 Aaron Gustafson 在 A List Apart 上发表的 “Now You See Me”，以了解这方面的内容。

鼓励自己做正确事情的一种方法是创建更合适的类名。您的常规隐藏类应该将内容放置在屏幕外，这仍然使其对屏幕阅读器可访问

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

我在这里使用 `!important`，因为如果您已经费心为某事物添加了“隐藏”类，您可能真的想这样做，而且不想太费神地考虑特异性值的强度是否足够。而且，如果您知道需要将某事物 `display: none`，该类应该帮助您理解它

.remember-this-will-NOT-be-read {
   display: none !important;
}

另一个可访问隐藏选项来自一些 Snook 研究 和 HTML5 模板

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

好的，您明白了。当您完全控制类名并且只需应用和删除它们时，这非常容易。但当使用应用了自己的 CSS 的 JS 库时，事情会变得有点棘手。例如，在 jQuery 中，在您 `$.slideUp()` 之后，您将有一个 `display: none` 在内联 CSS 中需要处理。是的，屏幕阅读器运行 JavaScript，是的，这仍然是一个问题。

同样，Aaron Gustafson 在那里为我们提供了帮助，他建议在滑动完成后应用可访问的类名，然后通过向另一个方向滑动来删除 `display: none`。

var $button = $('#myButton'),
    $text   = $('#myText'),
    visible = true;

$button.click(function() {
  if (visible) {
    $text.slideUp('fast',function() {
      $text.addClass('hide')
           .slideDown(0);
    });
  } else {
    $text.slideUp(0,function() {
      $text.removeClass('hide')
           .slideDown('fast');
    });
  }
  visible = !visible;
});

这是一个演示

查看代码笔 使用 jQuery 隐藏 由 CSS-Tricks (@css-tricks) 在 CodePen 上。

现在，我们有了必要的工具来停止使用 `display: none` 并开始使用更可访问的“隐藏”方法。

常见问题解答页面

如果您在点击问题之前隐藏答案，请使用可访问的类名进行隐藏。小心不要 `$.hide()` 然后 `$.slideToggle()`，这还不够好！

标签

使用 `placeholder` 文本作为标签替换很诱人（尤其是在一些浏览器改进了留置文本直到您真正输入的 UX 之后），但不要 `display: none` 或删除 `label`。我最近听到一个令人心碎的故事，一个盲女孩试图申请大学，表格中缺少 `label`，所以她不知道应该在哪些字段中输入什么。因此，如果您要使用 `placeholder` 文本作为标签替换，请对标签使用可访问的隐藏技术。

标签

仅仅因为内容面板不是“当前活动”的，并不意味着它应该不可访问。使用可访问的隐藏技术将其隐藏。或者，您可能根本不需要。如果所有面板的高度相同，您可以通过调整 `z-index` 来切换哪个面板可见。

@media 查询

在 OS X 中打开 Voice Over 并使用 Safari 是一个屏幕阅读器。现在想象一下，Safari 窗口打开了一个非常窄的宽度，并且页面有一些用于处理较小视口的 @media 查询。假设该 @media 查询使用 `display: none` 隐藏了一些内容，以便更好地在视觉上适应空间。这对可访问性来说可能是好是坏。您是否隐藏了许多对页面不重要的内容？或者您是否隐藏了一些有用的内容，这些内容是使用屏幕阅读器的人应该像往常一样访问的？

我不是专家

这篇文章的全部内容基于这样的前提：`display: none` 对可访问性不利。它不是基于我对屏幕阅读器和通用可访问性的深入而透彻的理解。如果您有更多内容要补充，需要更正的地方，或要分享的个人经验，请务必这样做。