我们所说的“导航”是什么意思?
我们在这里使用“导航”一词是指您的网站或应用对所有用户的可访问性。具体来说,对于使用辅助技术(如屏幕阅读器和鼠标以外的输入设备)的人来说,网站或应用的可访问性如何,以及这些人如何轻松地浏览您的页面。
换句话说,“导航”就是确保所有用户都能够在其网络浏览器或任何可能存在的残障下消费页面内容。
使您的页面易于高效导航对于使您的网站对所有用户都能够访问至关重要,因为导航障碍会阻止人们充分获取您的内容。
这里需要注意的是,我们 不 谈论页面如何分组或网站页眉、汉堡菜单或其他菜单中包含了哪些链接。这是站点结构,我们在国际SEO站点结构指南中会更详细地介绍。
网站导航在SEO中的作用
全球范围内,15% 的人口经历某种形式的残疾,其中五分之一的人(超过1.9亿人)经历“重大残疾”。世界卫生组织估计,22亿人经历某种形式的视力障碍。
正如我们在追溯将核心网络要素用于搜索排名的演变时所介绍的,Google意识到其用户希望它能够找到并推荐最相关和正确的信息,他们期望这些信息能够在最优秀的页面上获得。
因为谷歌的搜索排名相当于谷歌的推荐,他们非常关心页面的可用性和可访问性。用户体验(UX)、可访问性和搜索引擎优化(SEO)之间的界限已经变得模糊,几乎消失了。
导航受到什么影响
当您检查网站的导航以查找潜在的无障碍问题时,有一些跳过主要标准需要注意:
- "accesskey" 值
- 跳转链接和地标部分
- "id" 属性
- HTML 标题
- "tabindex" 值
"accesskey" 值
访问键是可以添加到页面元素的 HTML 属性。它们允许用户通过使用键盘快捷键快速轻松地“选择”(称为聚焦或激活)页面上的该元素。
在Windows PC上,通常通过同时按下alt键和访问键值来使用此快捷方式。Mac用户通常同时按下alt、ctrl和访问键值。
以这个超链接代码为例:<a href="woorank.com" accesskey="w">WooRank</a>。对于这个链接,accesskey 的值是"w"。用户可以通过按下 alt+w 键(或者如果他们在 Mac 上,则是 alt+ctrl+w 键)来聚焦在这个超链接上,然后通过按下"enter"键或用鼠标点击来访问 WooRank 主页。
accesskey 属性还允许用户使用键盘快捷键激活文本输入字段。
在表单的名称字段上使用accesskey="n"允许用户快速激活该字段并开始输入他们的姓名,而无需使用鼠标。
Accesskey 值使得无法使用鼠标的人能够访问互联网。如果没有 accesskey 值,这些人将无法在线浏览或与内容互动。
当页面上的两个或多个元素共享相同的 accesskey 值时,可能会遇到问题。
重复的accesskey值会导致人们尝试使用键盘访问时出现意外或意外的结果。例如,如果您的页面上有这样的链接:<a href="woorank.com" accesskey="w">WooRank</a>,然后稍后又有另一个链接:<a href="https://www.wikipedia.org/" accesskey="w">Wikipedia</a>,当用户按下alt+w时,浏览器无法确定用户想要聚焦哪个链接。这可能导致浏览器聚焦到错误的元素上。
确保页面上所有的accesskey值都是唯一的,以避免这个问题。
标题、跳转链接和地标区域
跳转链接和地标区域是您可以添加到页面的 HTML 元素,以便让用户快速导航到页面的最重要部分。
- 跳转链接: 跳转链接是锚标签,提供页面主要内容的页面内链接。这个链接是页面上出现的第一个元素,通常对用户来说是隐藏的。将这个链接放在页面代码的最开始(在<head>之后)使其成为辅助技术和按下键盘上的Tab键的用户选择的第一个元素。
- 地标区域: 地标区域是定义页面内容部分相对于页面上每个部分重要性的HTML元素。常见的地标有主要内容的main、导航菜单的navigation和支持或补充内容的sidebar。地标区域使人们能够直接导航到这些部分,以访问他们正在寻找的内容。
- HTML标题: HTML标题是将标题和副标题与页面其余内容分开的标签。它们为页面内容提供了大纲和结构,使其更容易消化和理解。在我们的SEO中的HTML标题指南中了解更多细节。
跳转链接、地标区域和HTML标题可以极大地影响人们浏览页面内容的便利程度。大多数网站都有内容(通常是导航菜单和标题)在许多甚至所有页面上重复出现。虽然这些导航菜单对于使用鼠标浏览网页的人来说非常有帮助,但对于使用屏幕阅读器或其他辅助技术和输入设备的人来说,它们可能会使页面的使用变得困难和烦人。
跳转链接、地标区域和HTML标题使这些用户能够跳过对他们没有帮助的重复内容,直接进入页面的有用部分。
只需这样想:使用一个包含“跳转至食谱”链接的食谱网站,比一个让你滚动直到找到配料清单的网站要愉快得多,不是吗?
"id" 属性
id 是添加到元素的 HTML 属性,用于为该元素分配标签(也称为“标识”)。CSS 和 JavaScript 使用 id 属性根据属性中的内容执行特定任务。
例如,这里是按钮的 HTML 代码:
<button id="button1">提交</button>
id="button1" 标签了这个按钮为 button1。其他按钮,比如取消或返回,可能分别标记为 button2 或 button3。
这些 id 属性告诉浏览器根据属性内容对这些按钮应用特定的 CSS 和/或 JavaScript。
id 属性还被辅助技术用于向使用这些技术的人描述页面内容。当多个元素具有相同的 id 值时,这些工具无法准确描述页面或执行用户命令。
使用我们上面的简单按钮,如果“提交”和“取消”按钮都使用id="button1",告诉屏幕阅读器点击“button1”可能会导致意外和不希望的结果,因为浏览器不知道你指的是哪个按钮。换句话说,试图点击“取消”按钮很可能会导致某人提交而不是取消。
这并不难想象这可能给用户带来严重问题。
页面上重复的id值也会导致用户体验问题,尤其是对于不使用辅助技术的人。因为CSS和JavaScript可能依赖于id来正确运行,非唯一的值可能导致页面无法按预期显示或工作。
与访问键值一样,通过确保所有 id 属性都是唯一的并且没有重复,避免任何无障碍问题。
标题顺序
正如我们上面快速指出的,标题是指定页面内容的标题和副标题的HTML元素。它们为内容提供结构,使其更易于阅读和理解。
HTML标题应该保持逻辑下降的数字顺序1-6,1表示最重要,6表示最不重要。当HTML标题不按顺序排列时,会破坏内容的大纲。
这个混乱的顺序会让使用屏幕阅读器的人更难以准确地理解内容的结构。他们在从一个部分导航到另一个部分时也可能会遇到问题,因为标题并不准确反映应该与哪些子标题相关联。
再次,有关HTML标题的详细信息,请查看我们的HTML标题指南。
"tabindex" 值
tabindex 属性是一个 HTML 属性,你可以将其添加到元素中,以指定该元素在通过键盘输入(通常是 Tab 键)导航页面时,该元素在可聚焦元素的顺序中所处的位置。因此,tabindex="1" 的元素将在 tabindex="2" 的元素之前获得焦点。
然而,指定一个大于0的tabindex值可能会导致用户的导航和可访问性问题。
指定大于0的值告诉辅助技术在将焦点放在tabindex="0"的元素或没有tabindex属性的任何元素之前,先将焦点放在该元素上。因此,为了将焦点放在这些元素上,用户必须在能够访问其他元素之前,通过具有更高tabindex值的所有内容进行导航。
然而,需要注意的是,一旦一个元素被聚焦,它就会从tabindex导航中移除。因此,如果用户通过tabindex大于0的元素全部遍历后,需要返回访问tabindex="10"的内容,他们就必须先遍历tabindex="1"到tabindex="9"。
当页面的视觉顺序与页面的标签顺序不匹配时,这种行为不仅仅是一种恼人的现象。这种情况会导致用户在页面上以意想不到和不太有帮助的方式来回跳转,从而在尝试输入信息时产生混乱和错误。
由于页面几乎永远不会被发布并永远保持不变,指定选项卡顺序将需要您不断地照看页面的代码,以保持正确的选项卡顺序。这项任务根本不值得花费时间、精力和资源。
最后,指定一个选项卡顺序会阻止用户按照他们想要的方式浏览和与页面交互。指定的选项卡顺序可能不一定是最适合他们在页面上想要完成的任务。
为了避免这些问题,最好不要指定大于 0 的 tabindex 值。或者干脆不指定任何 tabindex 值。
SEO 与可访问性的重叠
重要的是要明白,尽管SEO和可访问性实际上是非常不同的关注领域,具有非常不同的目标,但在优化方面存在大量重叠。
将时间和精力集中在确保所有用户可以轻松浏览您的页面以访问和参与内容,这在优化您的网站以适应谷歌时应被视为基本支柱。
毕竟,谷歌正在逐渐缩小我们传统上认为的“用户体验”和“搜索引擎优化”之间的界限,以便为其搜索者提供最佳的在线体验。
审核您的内容导航将确保任何人都可以在线访问您的内容。