石家庄网站建设 > 做网站 >

石家庄网站建设教程

2020-12-02 20:31:03
石家庄网站建设教程 

搜索引擎优化(SEO)是由搜索引擎创建自动分类和排名的算法演变而来的,SEO利用这些算法中的漏洞进行操作。

另一方面,可访问性是出于一种愿望而产生的:通过辅助技术(AT)将人类与信息联系起来。

当我们把这两个行业剥离到一台机器正在阅读网页时,会有一些重叠。这就是我们在本系列中要研究的。如果你在优化搜索引擎,你也会影响到使用屏幕阅读器和辅助技术的人们对你网站的体验。

在今天关于易访问性+SEO的帖子中,我们将深入探讨页面上的一些方面,包括格式化文本、颜色、链接和我们看不到但机器可以看到的内容。上一篇文章覆盖的结构是重叠的,我们将在这篇文章之后的最后一篇文章中讨论图像、视频和非文本元素。

隐藏文本

有时候,页面上可以看到的内容提供了机器人或屏幕阅读器无法读取的信息或上下文,比如在信息图像中。文本、图形和整体上下文都在图像中,因此在本例中,您需要提供屏幕阅读器和机器人程序可以用于信息和上下文的文本—可以是可见的,也可以是隐藏的。

可能还有其他原因,您希望主动隐藏文本,而不是对所有可见的显示,但不是对机器人或屏幕阅读器。一个例子可能是一个段落,它只在单击插入符号时才会显示更多文本。在本例中,默认情况下,文本是从视觉体验中隐藏的,但是您需要确保屏幕阅读器和机器人程序能够获得它。

一个网站上四个问题的截图,用插入符号打开问题看答案。三个关闭,一个打开以显示答案文本。

下表显示了这些不同的隐藏内容的方法是如何被有视力的用户、屏幕阅读器和搜索引擎感知的。我不是一个无障碍专家,所以如果你知道什么不同或额外的,请分享。


我强烈建议不要仅仅针对垃圾邮件使用这些隐藏文本技术,因为谷歌可能会索引隐藏文本,但不会给隐藏文本与非隐藏文本相同的权重或排名效果,如果它被滥用,必须手动审阅,你可能会发现自己有一些麻烦。

在这一点上,让我们深入研究两个实际的常见示例:一个是主内容在图像中,因此我们需要使隐藏内容对屏幕阅读器和机器人程序可用;另一个是在默认情况下,主要内容对用户是隐藏的,我们需要确保屏幕阅读器和机器人能够找到它。

为信息图提供文本

我们想在这里为读者提供一个有关信息的图片和搜索引擎的例子。简单的方法是将文本添加到infographic下面的页面中,如本例所示。

但是泰德·德雷克是一个无障碍天才(他在本系列文章中的帮助以及我对a11y的兴趣——谢谢你,泰德),他还向我们展示了一种为屏幕阅读器和机器人提供视觉用户看不见的信息的选项。信息图通过iFrame被拉到一个页面中(或者很容易共享),除了infographic图像之外,iFrame HTML还包含了裁剪内容中的所有描述性文本,对于通过infographic阅读相同内容的有视力的用户来说是看不见的,但完全易读和互动的屏幕阅读器和机器人不能阅读信息图。

你自己看看吧。这个页面出现在Google搜索结果中的信息图片文本“日子越来越长,但你仍然无法抽出时间来计划那些急需的出游计划。”这段文字实际上并没有出现在页面上。

旁注:请注意,页面上有文本的那个,我上面提供的例子,对我来说,排名高于可见文本。

Google搜索结果显示了带有隐藏文本的infographic页面作为继带有暴露文本和pdf的infographic页面之后的第三个搜索结果

在这个隐藏的文本示例中,infographic本身是一个单独的HTML页面上提供的图像,其中的文本信息包含在1px CSS剪辑中,通过iFrame在搜索结果中拖入该页面。

乍一看,这个单独的HTML页面看起来只有一个图像,但是在代码中您会看到,在一个“视觉上隐藏”的CSS类中也隐藏了文本,这个CSS类剪辑了内容


返回列表