屏幕阅读器什么时候可以使用“隐藏”元素（为了可访问性，a11y）？

Question

我听说.hidden不要把这门课当成

.hidden { display: none }

但将其宽度和高度设为 1，并使用剪裁等方式使元素就好像它仍然存在于屏幕上一样，但内容只是不可见。

但是，当我们使用 JavaScript 隐藏某些东西时，该元素的用途就完成了，我们不希望它显示在屏幕上并且对屏幕阅读器不可见，这难道不是真的吗？

情况一：比如是一个输入框，输入框里面有一行灰色的文字“输入关键字”。当用户实际单击或按下键（或使用input事件）时，现在我们有一个 JavaScript 处理程序来隐藏“输入关键字”文本，因为它只是输入框中的灰色提示。在这种情况下，不应该完全隐藏文本，实际上使用 a display: none，以便即使屏幕阅读器也无法阅读它？（用户已经学会了开始打字的足够多的知识，所以屏幕阅读器不应该真的还在那里阅读提示，对吗？）

情况二：如果是弹出气泡，错误提示，或者有“请输入您的邮箱订阅我们”的链接，会弹出一个气泡，那么当气泡关闭时，应该不是气泡真的完全关闭使用display: none？屏幕阅读器不应该仍然能够为已完成并关闭的气泡读取这些内容。

情况 3：我能想到的唯一情况是屏幕阅读器应该可以使用“隐藏”的一小部分是：它用于提供额外信息的气泡，例如产品评级（5 颗星中有多少颗星） )，或者当鼠标悬停在某个“？”上时可以弹出的额外帮助信息。图标或链接。但即使在这种情况下，不会屏幕阅读器实际宣读“链接的详细信息”或“链接显示等级”，即在alt或title标签，而不是阅读弹出信息，直到用户弹出它开放?

所以我的问题是：不应该真的有两种类型的隐藏。一种是display: none屏幕阅读器不应该看到的类型（将其设为.hidden类），另一种width: 1px; height; 1px是屏幕阅读器可以看到（或将读出）（将其.a11y-hidden设为类），以及类型 2 的频率是否远低于类型 1？

Answer 1

大多数情况下，就是这样。

编辑 2014：我从 Yahoo! 的 TJK切换到剪辑方法！（因为隐藏跨度到只有 <i>con 可见的链接）。
我更喜欢position: relative; left: -5000px剪裁 1x1px，我知道 Yahoo! 团队只使用后者，但目的是相同的。
我也称它为.visually-hidden（来自 WordPress 和其他 CMS 和框架中的第 20 主题）。.a11y-hidden将意味着相反：它只能由屏幕阅读器和纯 HTML 可见（可感知）。

标签内容、尚未发生的错误消息（您的案例 2）不应被任何人察觉。屏幕阅读器用户必须单击选项卡才能像其他人一样显示其内容。
注意：屏幕阅读器将忽略display: noneANDvisibility: hidden元素。而且其中一些（特别是 OS X 上的 VoiceOver）会忽略带有height: 0等的元素

相关文章 : Invisible Content Just for Screen Reader Users from WebAIM

情况 1：被读出的重要部分是与for/关联id到表单字段的标签。
如果您使用键盘从一个字段导航到另一个字段，则当您将其聚焦时，该文本将消失，并且对缩放 x00% 的用户不可见。HTML5 引入了placeholder与此提示具有相同作用的属性（这不是 label 的替代品，这是一个提示，但很少有人阅读 HTML5 文档 唉）并且仍然可以传递给屏幕阅读器，即使它在视觉上是隐藏的。

情况 3：此信息应以可访问的方式在 HTML 中编码，因此您无需在视口或像素中隐藏信息。
alt 文本是首选方式（或者甚至更好的视觉效果，旁边有一些真实的文本，同时避免过多的混乱。我没有接受过人体工程学方面的培训，这通常会惹恼想要从页面中删除所有内容的网页设计师；）） .
title属性应该只用在链接上，你永远无法确定屏幕阅读器会选择阅读它们。这是个人问题，并根据每个站点进行设置。他们可能会对某些网站感到恼火，以至于他们会在任何地方禁用这些标题……尽管如此，如果由于某种原因您无法以其他方式添加信息，它仍然是添加信息的最佳技术之一。

我如何使用这个.visually-hidden类？

• 没有出现在模型中的快速访问链接（指向内容、导航和搜索输入）。聚焦后，它们将像http://www.nanomatrix.fr/一样显示在屏幕上（在 Windows 上按Ctrl-L或Cmd- L，Tab 六次，并通过 Safari 和/或 OS X 中的链接启用 Tab 键。参见左上角的 3 个链接）
• 在标签上，由于某些（不好的）原因，它们不在我收到的模型中。最好有一个修复（这是一个很好的），而不是在事先没有想到的情况下不采取任何措施来改善可访问性......
• 在表格的标题上，因为大多数时候显示它们是来自客户、外部网页设计师等的否定
• 在字体图标旁边带有信息的跨度上，当它以性能方式编码但不太容易访问时。字体图标的使用方法有很多种，我只说几个用例