3

我听说过让.hidden课程不作为

.hidden { display: none }

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

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

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

案例2：如果是弹出气泡，对于错误信息，或者有“输入您的电子邮件以进行订阅”的链接，它会弹出一个气泡，那么当气泡关闭时，气泡不应该是真的完全关闭使用display: none？屏幕阅读器不应该真的仍然能够为已完成并关闭的气泡读取这些内容。

案例3：我能想到的唯一案例是屏幕阅读器应该可以使用“隐藏”的一小部分是：它是用于获取额外信息的气泡，例如产品评级（5颗星中有多少颗)，或者当鼠标悬停在某个“？”上时可以弹出的额外帮助信息。图标或链接。但即使在这种情况下，屏幕阅读器也不会真正读出“更多信息的链接”或“显示评级的链接”，即在标签的altortitle中，并且在用户打开弹出信息之前不会阅读弹出信息?

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

4

2 回答 2

5

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

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

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

相关文章：WebAIM 的屏幕阅读器用户专用的不可见内容

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

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

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

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

这里有很多事情需要解决。

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

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

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

使用经过验证且受信任的类是个好主意，例如 HTML5 样板中的类，因为弄错可能会在 Google 上惩罚您（尝试黑帽内容）或在某些设备（例如 iOS）上对某些屏幕阅读器造成问题) - position:left 和 text-indent 不是一个好的解决方案，原因有很多，所以坚持使用 1px 和剪裁技术。

于 2014-07-04T10:23:07.037 回答