什么应该为屏幕阅读器提供“隐藏”元素（可访问性，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 width: 1px; height; 1px 屏幕阅读器可以看到（或将读出）的width: 1px; height; 1px （将其.a11y-hidden类），类型2是否可能远远少于类型1？

Answer 1

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

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

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

相关文章： 仅适用于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中的链接启用Tab键X.见左上角的3个链接）
• 在标签上出于某些（坏）原因，它们不在我收到的样机中。 更好地修复（这是一个很好的修复），而不是在事先没有想到的时候改善可访问性。
• 在表格的标题上，因为大部分时间显示它们是来自客户，外部webdesigner等的否定
• 当字体图标以性能方式编码但不易访问时，在字体图标旁边显示信息的范围。 有很多种使用字体图标的方法，我只说几个用例

Answer 2

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

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

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

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

使用经过尝试和信任的类（例如HTML5样板中的类）是一个好主意，因为错误可能会使您在Google上遇到麻烦（尝试使用blackhat内容）或在某些设备上创建一些屏幕阅读器（例如iOS） ） - position：left和text-indent由于多种原因不是一个好的解决方案，所以坚持1px和剪辑技术。