我听到建议.hidden类不作为
.hidden { display: none }
但将其宽度和高度设置为 1，并使用剪切等，使元素看起来仍然存在于屏幕上，但内容不可见。
但是，当我们使用 JavaScript 隐藏某些内容时，该元素的目的就已经完成，我们不希望它显示在屏幕上并且对屏幕阅读器不可见，这不是真的吗？
情况1：例如，如果是一个输入框，框内有一条灰色的文字“输入关键字”。当用户实际单击或按下键盘时（或使用input事件），现在我们有一个 JavaScript 处理程序来隐藏“输入关键字”文本，因为它只是输入框中的灰色提示。在这种情况下，文本不应该完全隐藏吗？实际上使用display: none，这样即使屏幕阅读器也无法读取它？ （用户已经学会了足够的知识来开始打字，所以提示不应该仍然存在以供屏幕阅读器阅读，对吧？）
情况2：如果是弹出一个气泡，提示错误信息，或者有一个链接“输入您的邮箱进行我们的订阅”，就会弹出一个气泡，那么当气泡关闭时，气泡不应该是真的完全关闭了使用display: none？屏幕阅读器实际上不应该仍然能够读出已完成并关闭的气泡的这些内容。
情况 3：我能想到的唯一情况是屏幕阅读器应该可以使用“隐藏”的一小部分是：它是用于额外信息的气泡，例如产品评级（5 颗星中有多少颗星） ），或者当鼠标悬停在某些“？”上时会弹出额外的帮助信息。图标或链接。但即使在这种情况下，屏幕阅读器也不会真正读出“链接到更多信息”或“链接到显示评级”，即在alt or title标签的，并且在用户将其打开之前不读取弹出信息？
所以我的问题是：不应该有两种类型的隐藏吗？一是display: none键入屏幕阅读器不应该看到的内容（使其成为.hidden类），另一个是width: 1px; height; 1px屏幕阅读器可以看到（或将读出）（使其成为.a11y-hidden类），类型 2 的出现频率是否远低于类型 1？
大多数情况下，就是这样。
编辑2014：我切换到来自 Yahoo! 的 TJK 的剪辑方法 https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html（因为隐藏跨度到只有 我更喜欢position: relative; left: -5000px超过裁剪 1x1px，我知道 Yahoo!团队只使用后者，但目标是相同的。
我也将称之为.visually-hidden（来自 WordPress 和其他 CMS 和框架中的二十个主题）。.a11y-hidden则意味着相反：它只能由屏幕阅读器以纯 HTML 形式可见（可感知）。
选项卡内容、尚未发生的错误消息（您的案例 2）不应该被任何人察觉。屏幕阅读器用户必须像其他人一样单击选项卡才能显示其内容。
Note: display: none AND visibility: hidden屏幕阅读器将忽略元素。其中一些（特别是 OS X 上的 VoiceOver）会忽略带有以下内容的元素：height: 0, etc
相关文章：WebAIM 仅供屏幕阅读器用户使用的不可见内容 http://webaim.org/techniques/css/invisiblecontent/
情况 1：被读出的重要部分是与 关联的标签for/id到表单字段。
如果您使用键盘从一个字段导航到另一个字段，则当您将其聚焦时，该文本将会消失，并且缩放至 x00% 的用户将看不到它。 HTML5 引入了placeholder属性与此提示具有相同的作用（这不是标签的替代品，这是一个提示，但很少有人阅读 HTML5 文档之一），即使它在视觉上是隐藏的，仍然可以传递给屏幕阅读器。
情况 3：此信息应以可访问的方式在 HTML 中编码，因此您不需要在视口外或像素中直观地隐藏信息。
替代文本是首选方式（或者更好的是在其旁边有一些真实文本的视觉效果，同时避免太多混乱。我没有接受过人体工程学方面的培训，这通常会惹恼想要从页面中删除所有内容的网页设计师；）） 。
title属性只能用在链接上，并且您永远无法确定屏幕阅读器会选择阅读它们。这是个人问题并根据每个站点进行设置。他们可能会对某些网站感到非常恼火，以至于他们会在各处禁用这些标题...不过，如果由于某种原因您无法以其他方式添加信息，那么它仍然是添加信息的最佳技术之一。
我该如何使用这个.visually-hidden class?
- quick access links (to content, navigation and search input) when they don't appear in the mockup. When focused, they'll be brought to screen as in http://www.nanomatrix.fr/ http://www.nanomatrix.fr/ (press Ctrl-L or Cmd-L, tab half a dozen times on Windows and enable tabbing through links in Safari and/or OS X. See on upper left the 3 links)
- 在标签上，由于某些（坏的）原因，它们不在我收到的模型中。最好有一个修复（这是一个很好的修复），而不是在事先没有想到的情况下不采取任何措施来提高可访问性......
- 表格的标题，因为大多数时候显示它们是来自客户、外部网页设计师等的拒绝
- 当它以性能方式编码但不太易于访问时，在字体图标旁边包含信息的跨度上。使用字体图标的方法有很多种，我只讲几个用例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
