如何隐藏屏幕阅读器中的文本

在网站中添加文本、链接和其他元素并用 CSS 或 JavaScript 隐藏这些元素是很常见的，但这可能会导致屏幕阅读器和其他设备的可用性问题。

如果内容被跳过，使用屏幕阅读器的用户可能会难以浏览您的网站。如果内容重复，用户可能也会感到沮丧，如果内容不合适，用户可能会感到困惑。

最常见的两种屏幕阅读器是JAWS和NVDA。NVDA 屏幕阅读器是免费的，而 JAWS 则需要购买许可证。

本指南讨论了您可能想要隐藏屏幕阅读器中的内容或仅向屏幕阅读器显示内容的常见情况。本指南还将指出导致问题的场景以及了解有关无障碍功能的其他资源。

网站通常会多次显示徽标以强化品牌。但每次让屏幕阅读器读出您的公司名称可能会令人厌烦。当屏幕阅读器用户阅读您的内容时，它还会减慢他们的速度。整个网站上的徽标和其他装饰性图像可能不会给听到您网站内容的人带来任何价值。这些情况非常适合向屏幕阅读器隐藏内容。

相反的情况是，您可能将内容隐藏起来，但又想确保屏幕阅读器仍能读取。您可能为无法通过视觉访问的用户提供特殊说明。为了解决这个问题，每个网站都应该有一个“跳转到主要内容”锚链接，让用户可以跳过收听您网页中不太重要的部分。

另一种情况是向所有人隐藏内容。您的网站可能要求用户在显示内容之前执行操作。展开和折叠按钮、阅读更多按钮或切换内容的面板既适合这种情况，也适合前一种情况，具体取决于要显示的文本量或文本的重要性。

要隐藏屏幕阅读器中的文本并以可视方式显示它，请使用aria-hidden属性并将其设置为 true。

<p aria-hidden="true">屏幕阅读器应忽略的可见文本</p>

要对屏幕阅读器隐藏文本并在视觉上隐藏它，请使用隐藏属性。

<p hidden>隐藏文本屏幕阅读器也应该忽略</p>

您还可以使用 CSS 设置display: none或visibility: hidden来从屏幕阅读器和视觉上隐藏元素。

要向屏幕阅读器显示元素并将其隐藏，您需要使用 CSS 模式使文本显示在屏幕外或不适合一个像素的可见区域。WebAim提供了两种解决方案。

如果您在与aria-hidden="true"相同的元素中使用aria-scribeby，屏幕阅读器可能会读取它。

aria -hidden属性不适用于可聚焦元素，例如表单输入，链接和按钮。

如果在具有子元素的元素上使用aria-hidden ，则子元素也将被隐藏。

投入时间和精力实现无障碍功能对每个人都有好处！无障碍功能有助于搜索引擎优化 (SEO)，即使不使用屏幕阅读器的用户也可以更轻松地访问内容。

要了解有关可访问性的更多信息，Pluralsight 提供了很棒的“入门”课程和有关Web 可访问性指南的课程。

您还可以阅读 W3C 有关如何使用 ARIA 的指南。

Matt Ferderer 是一名软件开发人员，他在推特、帖子和博客上发布有关网络开发的内容。