为信息图提供文本 这里有一个例子,SEO会喜欢信息图,读器和搜索引擎提供信息图信息和上下文。最简单的方法是将文本添加到信息图下方的页面,如本例所示۔ 但是 Ted Drake 是一位无障碍天才(他对这个系列文章的帮助以及我对 a11y 的兴趣非常宝贵 - 感谢 Ted),他还向我们展示了为屏幕阅读器和机器人提供查看用户不可见的信息的选项。
信息图通过 iFrame 被拉入页面(或轻松共享),除了信息 丹麦号码数据 图图像之外,所有解释性文字都包含在剪辑到 iFrame HTML 中的内容中,这些内容对于通过信息图阅读相同内容的查看用户来说是不可见的,但对于无法读取信息图的屏幕阅读器和机器人来说,却是完全可以理解和交互的。
请亲眼看看。此页面出现在 Google 搜索结果中,用于信息图表文本“日子很长,但你仍然找不到时间来规划那些急需的路线。”该文本实际上并未在页面上直观显示。 旁注:请注意,对于页面上的文本(我上面提供的示例),其排名比可见文本更高。
Google 搜索结果显示带有隐藏文本的信息图表页面,随后显示带有文本和 PDF 的信息图表页面作为第三个搜索结果。 在这个隐藏文本的例子中,信息图本身是一个在单独的 HTML 页面上提供的图像,其中包含 1px CSS 剪辑中的文本信息,该图像通过 iFrame 拉入搜索结果中的该页面。