Return to site

优化辅助功能+搜索引擎优化:网站和页面结构重叠

有3900万人失明。有2.85亿视力障碍者。全世界15%的人口 - 超过10亿人 - 患有某种形式的残疾。

残疾可以有多种形式和形式:身体,认知,视觉,听觉。盲人如何检查他们的电子邮件?如果有人无法听到破解YouTube上数千万个视频的任何内容?当所有同学都在使用互联网进行研究时,残疾学生如何保持优势?

许多人使用辅助技术来帮助完成这些任务。屏幕阅读器就像搜索引擎一样,它们无法看到页面的内容,而是依赖代码中的信号来浏览网页并理解页面的内容。

在此以及两篇后续文章中,我们将探讨优化搜索引擎与优化屏幕阅读器和辅助技术之间的重叠。但首先,让我们更好地了解屏幕阅读器的内容。

在下面的视频中,Kyle Woodruff在没有他的视线的情况下浏览网络,四肢网络用户Gordon Richins没有用手在网上导航,而Curtis Radford在他没有听到的情况下浏览网页。您会发现他们仍然面临挑战,因为辅助技术(AT)可以做的事与实际构建的事物之间存在差距,可以通过辅助技术访问和导航。

试一试

这是一个简单的方法,可以立即尝试这样的事情:

  1. 打开Chrome浏览器
  2. 安装屏幕阅读器扩展ChromeVox并启用它。
  3. 为了获得更好的体验,请使用以下ChromeVox帮助:
    1. ChromeVox教程(快速,简单,强烈推荐)
    2. ChromeVox快捷方式参考(打印并将其粘贴到您的显示器上(如果您有视力))。
  4. 去吧。导航。

或者,您也可以在设备上启用这些更复杂的免费屏幕阅读器:

  1. Mac OSX,iOS上的VoiceOver 。用户指南。快捷方式。
  2. 适用于Windows机器的NVDA免费屏幕阅读器。用户指南。快捷方式。

在您自己的网站上尝试任何这些。这有多痛苦?

做点什么吧

考虑通过利用一些技术代码优化印章帮助数百万残疾人在网络上获得更好的体验,考虑超越仅仅意识到全球无障碍意识日的可访问性(A11y)。

让我们非常清楚:学习网络可访问性并非易事。这是一个复杂的行业,辅助技术不仅仅是为屏幕阅读器优化一些Web代码。

但是在这里您可以轻松开始:优化Web可访问性的一些任务与我们在搜索引擎优化(SEO)中看到的内容重叠。在最基本的层面上,重要的是不要通过像关键字填充这样的事情过度优化SEO来蚕食屏幕阅读器的体验。如果您能够识别重叠并考虑如何优化屏幕阅读器(AKA人类,实质上)和搜索引擎(机器人),那么在更高级别,您将是一流的。

在这篇文章中,我们将看一些简单的结构重叠。在下周的帖子中,我们将更多地涉及格式和链接的重叠,包括可能有些争议的内容:隐藏文本。在最后的帖子中,我们将研究可访问性和SEO重叠优化视频,图像和非文本元素,包括使信息图表可访问。

SEO / A11y重叠:结构

页面上的标记有助于搜索引擎和辅助技术(AT)(如屏幕阅读器)了解页面中的元素。对于SEO,标题标签,标题或某些模式标记等不同元素可以比其他标记具有更多权重或价值。使用辅助技术的人依赖于这些结构元素来浏览页面而无法看到它或者无法使用鼠标。

我们将从一些简单的SEO +可访问性重叠开始:您可能在日常编码或优化中处理的结构元素。考虑实现和优化这些元素的可访问性方面,以便为您构建SEO时为残障访问者提供更好的体验。

标题标签

标题标签(不要与标题属性混淆)在搜索引擎优化中非常重要,因为(1)提供关于Google抓取页面时的内容的上下文以及(2)页面在搜索结果显示中的显示方式。多年来,虽然搜索引擎优化技术已经出现并且在感知有效性方面波动,但页面标题仍然是更有价值的页面策略之一。

在考虑可访问性时,W3C为各种残疾提供页面标题的这些特定好处:

  1. 该标准使所有用户受益,允许用户快速且容易地识别网页中包含的信息是否与他们的需求相关。
  2. 视力残疾人士可以在多个网页开放时能够区分内容。
  3. 有认知障碍,短期记忆力有限和阅读障碍的人也可以通过标题来识别内容。
  4. 该标准还使具有严重行动障碍的人受益,其操作模式在网页之间导航时依赖于音频。
标题标记做和不做
  1. 继续关注SEO的页面标题最佳实践。这应该与可访问性的标题一起使用。
  2. 不要关键词的东西。如果关键字填充仍然是你的事情,请考虑这样的事情(“购买肥皂分配器,泵肥皂分配器,传感器肥皂分配器和更多| MyStore”)与“MyStore的肥皂分配器”。保持简单和相关(并拆分)如果需要,将内容分成单独的页面。
标题

在搜索引擎优化中,有很多关注H1标签,而更少关注嵌套的H2-H6标题。H1标题表示页面的主要主题,而H2-H6表示子主题或页面部分。搜索引擎优化有时会使用多个H1标题,以便更多地强调页面上的更多关键字和内容。SEO有时也会将页面或页脚中的其他文本标记为H1标题,以尝试在搜索引擎前面获得更多关键字丰富的H1文本。这可能真的搞乱了屏幕阅读器,这就是原因。

标题允许辅助技术快速浏览页面。标题定义页面的结构,并且屏幕阅读器用户经常将这些用作移动到特定模块或内容区域的第一种方法。

标题做和不做
  1. 请使用标题。重要的是不要完全跳过标题,就像上面的时代新闻网站上的例子一样。
  2. 不要使用多个H1标题:HTML5允许多个H1,但浏览器/辅助技术不能很好地支持这一点。
  3. 使用标题来定义内容的各个部分。例如,对页面的子标题或关键部分使用H2标题,对内容模块使用H3标题。
  4. 如果没有以下内容,请勿使用标题。标题定义了内容的各个部分,因此如果没有内容部分,则不应该有标题。
HTML5元素和架构标记

HTML 5引入了更详细的页面元素标记,如<article>,<section>,<header>,<footer>等等。此外,架构标记由Google,Yahoo和Bing开发,以更好地理解页面元素。

我们知道Google会在搜索结果中使用一些架构元素作为丰富网页摘要,例如审核标记,以便在搜索结果中显示星级评分。我们不知道的是,在对页面及其元素进行索引和形成上下文时,搜索引擎会关注多少571个模式类型,和/或考虑HTML 5元素以及如何加权。

无论如何,这种标记允许通过不同浏览器的各种辅助设备更好地理解和浏览内容。通过html5accessibility.com的不同浏览器查看HTML 5元素的这些可访问性分数。该页面有更多有趣的细节。

语义标记做和不做
  • 使用相关标签标记您的内容。这对每个人都有好处。
  • 不要使用div或spans作为按钮。基于Div和span的按钮无法访问。如果它看起来像按钮一样,请使用按钮。
页面结构和导航

一些SEO阵营可能会热衷于在源代码的最开头放置源代码的正文或最重要的内容,试图确保在Google离开页面之前将其编入索引,或者尝试指示内容是更重要。

无论你是否属于那个阵营,对于可访问性来说都不是一个好主意。源代码内容的顺序对于能够使用键盘以正确的顺序轻松标记内容非常重要。理想情况下,这看起来像:H1标题,主导航,站点部分,然后页脚。只要源代码顺序合乎逻辑,您就可以通过CSS进行修改。它有助于获得良好的语义标记。

页面结构和导航做和不做
  • 确保您的源代码有序。您可以通过CSS更改内容,但键盘将在源代码中列出页面内容。
现场站点地图

这个很简单。当搜索引擎和屏幕阅读器无法识别复杂,复杂,复杂的导航或其他难以触及的网站部分和页面时,一个简单的概述站点地图可以提供快速简便的解决方案,其中包含指向所有部分和页面的链接更全面的索引和理解网站的内容。

网站地图做和不做
  • 如果可能,请提供现场站点地图。链接到站点的所有部分,显示与站点相同的组织,并保持链接更新。
  • 不要关键词的东西。我们都熟悉那些在每个链接中重复网站关键字的站点地图,例如二手车阿拉巴马,二手车阿拉斯加,二手车亚利桑那,二手车阿肯色州。您可能会让屏幕阅读器用户喝酒。不要这样做。
All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly