左：信息图表作为图像（页面还在页面上提供信息图表文本）。 右图：以 HTML 和 CSS （来源此处）。 左图：图像信息图。右图：HTML 信息图。 你会注意到它们看起来极其相似。
我们来看看代码。这是 Google 存档的每个页面的信息 捷克共和国 数字数据 图表文本内容。 上图：图片信息图页面上提供的信息图文本的 Google 缓存（部分）。 以下： CSS 信息图页面上的信息图中的信息图文本的 Google 缓存（部分） 。
图片信息图页面上提供的信息图文本的 Google 缓存（部分） CSS 信息图表页面上的信息图表文本的 Google 缓存（部分）。 两者都提供可索引且屏幕可读的解决方案。
CSS 版本为查看者实现了这一点，而不会重复页面上的文本信息。 您可能已经注意到，CSS 版本还添加了一个有用的隐藏显示：无部分标题，该标题对于屏幕阅读器可见，但在信息图中不可见。
有关隐藏文本的更多信息，请参阅上一篇文章. 视觉和非文本元素的工具和资源 HTML5：提供有用文本替代的技术- 使非文本元素可访问的更多深入示例 HTML5 可访问性芯片：图形和图形标题元素 可访问的信息图表 如何创建易于访问的信息图。