优化可访问性 + SEO：格式和链接重叠

sarkerraihanss6

搜索引擎优化 (SEO) 是由搜索引擎创建算法来自动对网站进行分类和排名而发展起来的，而 SEO 则利用了这些算法中的漏洞。 另一方面，可及性则源于包容性的愿望。通过辅助技术 (AT) 将人类与信息连接起来。 当我们将这两个行业剥离到机器读取网页的行业时，就会发现有一些重叠之处。这就是我们在本系列中要讨论的内容。如果您针对搜索引擎进行优化，您还会影响使用屏幕阅读器和辅助技术的人们对您网站的体验。 在今天关于辅助功能 + SEO 的文章中，我们将深入研究页面方面，包括格式化文本、颜色、链接以及我们看不到但机器可以看到的内容。上一篇文章介绍了结构重叠，我们将在本篇文章之后的最后一篇文章中介绍图像、视频和非文本元素。


隐藏文字 有时，页面上可以看到的内容提供了机器人或屏幕 爱沙尼亚 WhatsApp 号码列表 阅读器无法读取的信息或上下文，例如信息图表图像。文本、图形和整体上下文都在图像中，因此在这种情况下，您需要提供屏幕阅读器和机器人可用于获取信息和上下文的文本（无论是可见的还是隐藏的）。 可能还有其他原因您想要主动隐藏所有可见显示中的文本，但不隐藏机器人或屏幕阅读器。例如，只有在单击插入符号时，段落才会展开以显示更多文本。在这种情况下，默认情况下，文本在视觉体验中是隐藏的，但您希望确保屏幕阅读器和机器人可以获取它。 网站上四个问题的屏幕截图，其中包含插入符以打开问题以查看答案。 三个关闭，一个打开以显示答案文本。 下表显示了视力正常的用户、屏幕阅读器和搜索引擎如何看待这些不同的隐藏内容方法。我不是无障碍专家，所以如果您知道任何不同或额外的内容，请分享。 隐藏文本方法 谁可以看到每种方法的默认内容？ 有视力的访客 屏幕阅读器 Google* （链接是 Google 缓存此方法的示例） 可见性：隐藏 不 不 是的 显示：无 不 不 是的 文本缩进： -10000 不 是的 是的 CSS 剪辑 不 是于图像中，因此我们需要向屏幕阅读器和机器人提供隐藏内容，第二个默认情况下对用户隐藏主要内容，我们需要确保屏幕阅读器和机器人找到它。



为信息图提供文本 这是 SEO 喜欢的信息图示例，我们希望向屏幕阅读器和搜索引擎提供信息图信息和上下文。简单的方法是将文本添加到信息图下方的页面，如本例所示。 但 Ted Drake 是一位可访问性天才（他在本系列文章中的帮助以及我对 a11y 的总体兴趣非常宝贵 - 谢谢 Ted），并且还向我们展示了一个为屏幕阅读器和机器人提供信息的选项，即对于有视力的用户来说是看不见的。信息图通过 iFrame 拉入页面（或轻松共享），除了信息图图像之外，iFrame HTML 还包含剪辑内容中的所有描述性文本，对于通过信息图阅读相同内容的视力正常的用户来说是不可见的，但对于无法阅读信息图的屏幕阅读器和机器人来说，完全清晰且具有交互性。 亲自检查一下。此页面出现在 Google 搜索结果中，信息图文本“日子越来越长，但您仍然无法找到时间来计划那些急需的度假。” 该文本实际上并不会直观地显示在页面上。 旁注：请注意，页面上带有文本的文本（我上面提供的示例）的排名高于我的可见文本文本。