隐藏辅助文本
Posted: Sat Feb 01, 2025 5:05 am
但是 Ted Drake 是一位无障碍天才（他在本系列文章中提供的帮助以及我对 a11y 的普遍兴趣都十分宝贵 — 感谢 Ted），他还向我们展示了一种为屏幕阅读器和机器人提供信息的选项，而这些信息对视力正常的用户是不可见的。信息图通过 iFrame 拉入页面（或轻松共享），除了信息图图像之外，iFrame HTML 还包含剪辑内容中的所有描述性文本，视力正常的用户通过信息图阅读相同内容时看不到这些文本，但对于无法阅读信息图的屏幕阅读器和机器人来说，这些文本是完全可读且可交互的。
自己看看吧。这个页面出 RCS 数据库 现在 Google 搜索结果中，用于信息图表文本“白天越来越长，但你仍然没有时间计划那些急需的度假。”该文本实际上并没有在页面上以可视方式显示。
旁注：请注意，页面上带有文本的文本（我上面提供的示例）的排名高于可见文本的排名。
Google 搜索结果显示，在显示文本和 PDF 的信息图表页面之后，显示隐藏文本的信息图表页面，作为第三个搜索结果
在这个隐藏文本的例子中，信息图本身是一个在单独的 HTML 页面上提供的图像，其中包含 1px CSS 剪辑中的文本信息，并通过 iFrame 拉入搜索结果中的该页面。
乍一看，单独的 HTML 页面上似乎只有一张图片，但您会在代码中看到，在剪辑内容的“视觉隐藏”CSS 类中还隐藏有文本，并且此文本具有语义标记，允许屏幕阅读器用户浏览它、复制文本等，使其成为一种高度可用、交互式的替代方案，可以替代直接在页面上显示文本。
iframe 页面的屏幕截图显示了信息图以及页面代码，其中显示了代码中的格式化描述性文本。
在此处查看 VoiceOver 屏幕阅读器的实际操作：
自己看看吧。这个页面出 RCS 数据库 现在 Google 搜索结果中，用于信息图表文本“白天越来越长，但你仍然没有时间计划那些急需的度假。”该文本实际上并没有在页面上以可视方式显示。
旁注：请注意，页面上带有文本的文本（我上面提供的示例）的排名高于可见文本的排名。
Google 搜索结果显示，在显示文本和 PDF 的信息图表页面之后，显示隐藏文本的信息图表页面，作为第三个搜索结果
在这个隐藏文本的例子中，信息图本身是一个在单独的 HTML 页面上提供的图像，其中包含 1px CSS 剪辑中的文本信息，并通过 iFrame 拉入搜索结果中的该页面。
乍一看，单独的 HTML 页面上似乎只有一张图片，但您会在代码中看到，在剪辑内容的“视觉隐藏”CSS 类中还隐藏有文本，并且此文本具有语义标记，允许屏幕阅读器用户浏览它、复制文本等，使其成为一种高度可用、交互式的替代方案，可以替代直接在页面上显示文本。
iframe 页面的屏幕截图显示了信息图以及页面代码，其中显示了代码中的格式化描述性文本。
在此处查看 VoiceOver 屏幕阅读器的实际操作：