什么应该为屏幕阅读器提供“隐藏”元素（可访问性，a11y）？

Question

我听说过让.hidden课不是

的建议

.hidden { display: none }

但是使它的宽度和高度为1，并使用剪裁等使元素好像它仍然存在于屏幕上但内容不可见。

但是，当我们使用JavaScript来隐藏某些内容时，该元素的目的是否完成，我们希望它不会在屏幕上显示而对屏幕阅读器不可见，这是不是真的？

案例1：例如，如果它是一个输入框，并且框内有一条灰色的文本行“输入关键字”。当用户实际点击或keydown（或使用input事件）时，现在我们有一个JavaScript处理程序来隐藏“输入关键字”文本，因为它只是输入框内的灰色提示。在这种情况下，文本不应该被完全隐藏，实际上使用display: none，这样即使是屏幕阅读器也无法读取它？ （用户已经学会了足够的开始输入，所以提示不应该仍然在那里被屏幕阅读器读取，对吗？）

案例2：如果是弹出式泡泡，出现错误消息，或者有“为我们的订阅输入您的电子邮件”链接，它会弹出一个泡泡，然后当泡沫关闭时，不应该使用display: none完全关闭泡沫？屏幕阅读器实际上仍然无法读取完成和关闭的气泡的内容。

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

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

Answer 1

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

2014年编辑：我切换到clipping method from TJK at Yahoo!（由于隐藏的跨度只有一个＆lt; i＆gt; con可见的链接）。
我更喜欢position: relative; left: -5000px而非剪辑1x1px，我知道雅虎！团队只使用后者但目标是相同的 此外，我将其称为.visually-hidden（来自WordPress中的Twenty Sth主题以及其他CMS和框架）。 .a11y-hidden意味着相反：它只能由屏幕阅读器和纯HTML显示（可感知）。

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

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

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

案例3：此信息应以可访问的方式以HTML格式编码，因此您无需在视口或像素中直观地隐藏信息。
alt文本是首选的方式（甚至更好的视觉效果，旁边有一些真实文本，同时避免过多的混乱。我没有人体工程学方面的培训，这通常会让想要从页面中删除所有东西的网页设计者烦恼;）） 。
title属性应仅用于链接，并且您永远不会确定屏幕阅读器会选择阅读它们。这是个人问题，并按站点设置。他们可能会被一些网站所惹恼，他们会在所有地方禁用这些标题......但是，如果由于某些原因你不能这样做，它仍然是添加信息的最佳技术之一。

如何使用此.visually-hidden课程？

• 快速访问链接（内容，导航和搜索输入），当它们没有出现在模型中时。当聚焦时，它们将被带到屏幕，如http://www.nanomatrix.fr/（按Ctrl-L或Cmd-L，在Windows上键入六次，并通过Safari和/或OS X中的链接启用Tab键。请参阅上层离开3个链接）
• 在标签上出于某些（坏）原因，它们不在我收到的样机中。更好的解决方案（这是一个很好的解决方案），而不是在事先没有想到的时候改善可访问性......
• 关于表格的标题，因为大部分时间显示它们是来自客户，外部网站设计者等的否定
• 在带有字体图标旁边的信息的范围上，当它以性能方式编码但不易访问时。有许多使用字体图标的方法，我只说几个用例

Answer 2

这里有很多需要解决的问题。

首先，理想情况下，输入框中的灰色文本应由＆＃39;占位符＆＃39;处理。属性。浏览器将为用户提供一致且预期的行为，并且您也可以更轻松地进行编码！

其次，理想情况下，对于可访问性，所有输入应始终具有标签。这样可以正确地向屏幕阅读器描述输入。你可以隐藏它们，如果设计没有要求它们（一些网站只使用占位符文本，但这并不意味着它们不应该在那里） - 这让我想到了我的第三点 - 隐藏屏幕上的内容但不是屏幕阅读器：

{display：none}将隐藏屏幕上的信息和屏幕阅读器。它基本上是一种使某些东西消失的方式 - 对每个人而言。这就是.visuallyhidden类（或类似的）进来的地方 - 它是一种向DOM添加上下文（额外信息）的方式，它将由屏幕阅读器拾取但不被有视力的用户读取，并且它是一种非常适用的技术。通常在不破坏页面布局或设计的情况下使AT用户更容易理解页面。

使用经过尝试和信任的类（例如HTML5样板中的类）是一个好主意，因为错误可能会使您在Google上受到惩罚（尝试使用blackhat内容）或在某些设备上创建一些屏幕阅读器的问题（例如iOS） - 位置：左侧和文本缩进由于多种原因不是一个好的解决方案，所以坚持使用1px和剪辑技术。