回到主页

优化辅助功能+搜索引擎优化:格式化和链接重叠

搜索引擎优化(SEO)由搜索引擎发展,创建算法以自动化网站的分类和排名,其中SEO操纵这些算法的漏洞。

另一方面,可访问性源于一种包容性的愿望; 通过辅助技术(AT)将人类与信息联系起来。

当我们将两个行业拆分到机器正在阅读网页的地方时,会有一些重叠。这就是我们在本系列中所看到的。如果您正在优化搜索引擎,那么您也会影响使用屏幕阅读器和辅助技术的人们如何体验您的网站。

在今天关于可访问性+ SEO的帖子中,我们正在深入研究页面方面,包括格式化文本,颜色,链接和内容,我们看不到但机器可以看到。上一篇文章涵盖的结构重叠,我们将在此后的最后一篇文章中介绍图像,视频和非文本元素。

    隐藏的文字

    有时可以在页面上看到的东西提供无法通过机器人或屏幕阅读器读取的信息或上下文,例如信息图表图像。文本,图形和整体上下文都在图像中,因此在这种情况下,您需要提供屏幕阅读器和漫游器可用于信息和上下文的文本 - 可见或隐藏。

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

    下表显示了有视觉的用户,屏幕阅读器和搜索引擎如何感知这些隐藏内容的不同方法。我不是可访问性专家,所以如果您知道任何不同或额外的内容,请分享。

    *我强烈建议不要仅将此隐藏文字技术用于垃圾邮件,因为Google可能会将隐藏文字编入索引,但不会为隐藏文本提供与非隐藏文本相同的权重或排名效果,如果它被滥用且必须是手动审查,你可能会发现自己遇到了一些麻烦。

    在这方面,让我们深入研究两个实际的常见例子:一个主要内容在图像中,因此我们需要为屏幕阅读器和漫游器提供隐藏内容,第二个默认情况下主要内容对用户隐藏,我们需要确保屏幕阅读器和机器人找到它。

    提供信息图表的文本

    这是一个例子,SEO会喜欢信息图,我们希望为屏幕阅读器和搜索引擎提供信息图和信息。简单的方法是将文本添加到信息图下面的页面,就像在这个例子中一样。

    但是Ted Drake是一个可访问性的天才(在这个系列文章中他的帮助非常宝贵,我对a11y感兴趣 - 谢谢Ted),并且还向我们展示了为屏幕阅读器和机器人提供信息的选项。视力正常的用户看不见。信息图表通过iFrame被拉入页面(或轻松共享),除了信息图表图像之外,iFrame HTML还包含剪辑内容中的所有描述性文本,对于通过信息图表读取相同内容的视力正常的用户来说是不可见的,但对于无法读取信息图的屏幕阅读器和机器人而言,它们完全清晰易读。

    亲自检查一下。此页面显示在Google搜索结果中,用于信息图表文字“时间更长,但您仍然无法抽出时间来计划那些急需的假期。” 该文本实际上并未在页面上以可视方式显示。

    附注:请注意,页面上带有文本的文本我上面提供的示例)的排名高于可见文本。

    在此隐藏文本示例中,信息图本身是在单独的HTML页面上提供的图像,文本信息位于1px CSS剪辑中,通过iFrame拉入搜索结果中的该页面。

    乍一看,单独的HTML页面看起来只有一个图像,但你会在代码中看到隐藏在“视觉隐藏”的CSS类中文本会剪切内容,而且这个文本具有语义标记允许屏幕阅读器用户浏览,复制文本等,使其成为在页面上正确显示文本的高度可用的交互式替代方案。

    因为我知道这会让更多垃圾邮件的SEO看到很多令人兴奋的事情,我还会提到那些控制垃圾邮件调整的人也知道这种方法,甚至是这个具体的例子。虽然他们确信他们专门打击隐藏文本垃圾邮件的过程非常强大,但我只能在良心上展示这个例子,并说不要垃圾邮件。谷歌在看。考虑此方法的可访问性,尤其是与文本内容共享信息图。

    隐藏辅助文本

    有时候你想向有视力的用户展示一些文字,但是如果他们选择(或者通过它浏览并继续浏览页面上的其他内容),让他们点击像插入符号这样的内容来扩展更多的文本内容。

    我已经完成了功能所在的站点审核(对于有视力的用户),但由于编码方式,内容未编入索引。您可以使用display:none作为隐藏的默认内容,这将隐藏屏幕阅读器和视线用户浏览页面的额外内容,但如果任一用户点击了插入符号或链接,则允许访问该内容。

    以下是Netflix帮助页面隐藏来自有视力的访问者屏幕阅读器的内容的示例,除非访问者选择展开和访问内容。它在CSS中使用display:none。屏幕阅读器和有视力的访问者可以访问它,并且插入内容由搜索引擎索引。双赢共赢。

    隐藏的文字做和不做:
    1. 不要将隐藏文字用于垃圾邮件。如果你想保持鼻子清洁的SEO,不推荐将隐藏的关键词填入页面,对屏幕阅读器访问者来说可能是一种糟糕的体验。
    2. 请考虑有视力和无视力的受众:如果您需要隐藏文字,请考虑最好使用哪种方法,具体取决于您是否希望屏幕阅读器看到它以及有视力的用户不要,或者您是否希望所有访问者都不要。
    关键字填充

    关键字填充是一个主要是老派的SEO实践,仍然徘徊。它在网站非常重要的页面上,在旧的Flash页面上,甚至在内容正常但开发人员想要在页面上有更多基于文本的关键字的页面上非常流行。这只针对搜索引擎,所以我们为什么要关心屏幕阅读器以外的访问者是否遇到过它?

    幸运的是,现在很难找到好的关键字填充示例,因此@Joeartdotcom向我发送了一个完美的存档示例,其中包含一个2007年Patagonia主页,其中包含大图像,最小内容和一堆“搜索索引页面描述”文本。通过屏幕阅读器(如适用于Chrome的ChromeVox或适用于Firefox的Fangs)收听。有视觉的读者可以在这个Wayback Machine页面上查看文本,如果您想要阅读,或者只是听这个视频。

    希望关键字填充不像2007年那样大,但它仍然是一个选项,它很可能会惹恼你的屏幕阅读器用户。

    关键字填充做和不做
    1. 在构建时要提前考虑:避免使用关键字填充来吸引搜索引擎,并使用相关的可索引文本信息构建可访问的页面。
    2. 写得自然。这对每个人都是最好的,这可以使用关键字完成,但不能滥用关键字。
    文字的大小和颜色对比

    人们经常会使用小字体和低对比度文本来简化页面美学。SEO有时会使用低对比度的小字体文本为页面添加更多关键字,而不会分散其他内容的注意力。

    这不是我在这里详细介绍的内容,但搜索引擎可以考虑字体大小和颜色。他们知道我们所做的一切。

    这可能是SEO之外的问题所在。色盲或色觉缺乏的读者可能无法区分某些颜色或只能看到黑白或灰色阴影的东西,这些缺陷可能是轻微或严重的。

    该视频显示了一些色彩对比示例,即使对于没有色彩缺陷的读者也是如此。

    另外,低视力读者可能是老年读者,或者可能患有影响其视力的病症,如青光眼或黄斑变性,并且难以感知太小,不能缩放或低对比度的内容。这里有一些很好的低视力例子。

    为了更好地了解辅助技术如何在这些情况下提供帮助,请查看非常酷的ZoomText屏幕放大镜的演示,它还可以改变颜色对比度,在鼠标指针上创建十字线或巨圆,并突出显示光标焦点或活动区域焦点。

    有些人,比如合法失明的学生Kim Russell,正在以12-14倍的放大率使用ZoomText来浏览你的网站。那是巨大的。

    在设计页面时和/或当您考虑使用超小的低对比度文本时,需要记住很多字体和颜色。查看资源部分,了解更多有趣的工具和详细信息,超出此处列出的做法和注意事项。

    文字大小和颜色做和不做
    1. 不要将文字用作图像。当这些文本图像被放大时,尽可能使用实际文本而不是文本图形来避免像素化。
    2. 不要仅仅依靠颜色来描绘信息。如果删除了所有颜色,用户应该能够理解内容。如果仅通过红色表示链接文本,则红色敏感的色盲用户可能看不到链接。无论链接颜色如何,链接上的下划线都更加明显。
    3. 最大化文本的对比度。这包括徽标文本和图像中的文本。使用颜色对比工具可以找到良好的前景 - 背景对比度,对于小文本至少为4.5:1,对于大文本为3:1。例如,#757575是可以在白色背景上访问的最轻的灰色。
    4. 使用相对字体大小与绝对值。按相对百分比或em大小调整字体大小可以比通过像素或点的绝对大小调整更好地调整大小。
    5. 使用可读字体:尽量远离草书,幻想(装饰)和等宽字体(例如:Courier),并且更接近本机衬线和无衬线字体系列,尽可能少使用不同的字体表面以保持连续性。
    链接和锚文本

    屏幕阅读器用户经常通过页面选项卡来浏览页面的链接。链接锚文本在每个实例处公布,同时宣布“链接”以及锚文本,并且用户可以按Enter键以关注任何焦点链接。

    描述性和信息性链接

    与描述性锚文本的链接是搜索引擎和屏幕阅读器的胜利。当链接描述它指向的内容时,它为两者提供上下文,告诉屏幕阅读器用户通过链接标记链接指向的内容,并且对于SEO,提供关于目标页面的内容的上下文并可能帮助该目的地排名那个短语或主题。

    提供链接上下文对屏幕阅读器也很有帮助。查看下面的视频,其中导航了此网页示例以显示错误的辅助功能。第一个徽标链接非常有趣,但也注意到[图像描述]链接,MORE >>链接不提供任何上下文,并且没有连接到它们在页面上可视连接的文章,并且臭名昭着的“点击此处”和“阅读更多”链接,这是一个熟悉的SEO用户。

    避免使用伪链接和按钮

    虽然这不一定是搜索引擎优化的重叠,但这对于可访问性来说是一个巨大的问题,值得在本文中提到。使用正确的标记创建链接和按钮对于确保使用辅助技术可以单击这些链接和按钮非常重要。简单的规则是使用链接导航到其他位置和按钮以启动操作,并且不要对这些情况使用<span>或<div>,因为它们不是正确的标记,可能无法正常工作。

    卡尔·格罗夫斯(Karl Groves)对这些差异有很好的写作,有一些例子以及为什么它们存在问题。

    面包屑链接

    SEO就像我们的面包屑链接一样,因为它们是链接。而且他们是关键字丰富的。但是对于屏幕阅读器来说,缺少面包屑链接的上下文可能会令人困惑。

    链接锚文本做和不做
    1. 不要在关键字中填充您的链接。假设您有一个以西雅图为重点的网站,其中有一篇文章宣布开设一家新的咖啡店。您可以通过链接短语(例如“咖啡店”和“西雅图咖啡店”和“西雅图的咖啡店”)尽可能地将文章发送到咖啡店网站。对于任何人来说,阅读这篇文章并不好玩。不要这样做。
    2. 创建描述性链接。当您使用屏幕阅读器时,您可以通过页面上的链接进行选项卡。如果所有链接都说“在这里”,那么使用屏幕阅读器的人试图在页面上找到特定的链接并不是很有用。
    3. 请使用正确的链接和按钮标记。Div和spans不是链接或按钮,没有href属性或空主题标记目标<a href="#">的空<a>锚点都可能存在问题。
    4. 请考虑解释面包屑链接。考虑在屏幕阅读器的面包屑链接之前隐藏一些解释性文本,例如“你在这里”。
    所有文章
    ×

    还剩一步!

    确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

    好的