“Skip Navigation”链接

概观

主要内容通常不是网页上的第一件事键盘和屏幕阅读器用户通常必须在到达主要内容之前导航一长串导航链接,链接子列表,公司图标,站点搜索和其他元素对于患有某些形式的运动障碍的用户来说,这尤其困难。

如果没有某种绕过长链接列表的系统,一些用户处于极大的劣势考虑没有手臂移动的用户,通过在开关上轻敲头部来使用计算机或者在嘴里使用棒来按键盘键的用户要求用户在到达主要内容之前执行任何动作大约100次是完全不可接受的。

当然,有视力的人使用他们的鼠标在这样的页面上没有任何问题他们几乎可以立即在页面扫描和识别的主要内容实际上,有视力的用户有一个内置的“跳过导航”机制:他们的眼睛他们还可以在主要内容之前绕过许多链接,然后直接点击他们想要的链接“跳过导航”的想法是发明给屏幕阅读器和键盘用户相同能力的直接观测的主要内容鼠标用户理所当然。

创建“跳过导航”链接

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content在大多数情况下,这确实是容易的,但有多个方法来完成这个目标有些技术比其他技术更好这里讨论的技术是:

  1. 在页面顶部提供可见链接
  2. 在页面的其他位置提供可见链接
  3. 使链接不可见
  4. 使链接不可见,直到它收到键盘焦点

页面顶部的可见链接

创建“跳过导航”链接的最简单方法是将其以常规文本放在页面顶部将相应的锚点(链接目标)放在主要内容的开头。

链路的水平位置并不重要链接可以位于左侧,中间,右侧或两者之间的某个位置关键是要确保链接是第一个项目之一屏幕阅读器听到和键盘用户选项卡否则,用户可能没有意识到有“跳过导航”链接,并可能浪费时间试图蒙混过关无关的链接如果屏幕阅读器用户在页面的早期没有听到“跳过导航”链接,他们可能会感到不耐烦。

为了最佳地使用,链接也必须在视觉上明显一个非常小或隐藏的链接不会使大多数需要“跳过”链接的受众受益 - 有视力的键盘用户。

判决:这个方法是高度万博体育官网网址这种方法的一个缺点是链接可能会干扰视觉设计 - 它必须是可见的并且在页面的最开头此外,链接将呈现给所有用户,甚至是可能不使用它的有视力的鼠标用户,或者可能被它混淆的用户。

例子

该链接是页面中的第一项链接的锚点或目标(链接将用户跳转到的位置)放置在主要内容的开头。

<身体>
<a href="#maincontent">跳至主要内容</a>
...
<main id =“maincontent”>
<H1>标题</ H1>
<p>这是第一段</ p>

目标是确定的ID属性值相匹配的HREF“跳过”链接的值(减去“#”)。

或者,您可以使用命名锚点来标识链接的目标,但命名锚点不再符合HTML5。

<H1><a name="maincontent" id="maincontent"> </a>标题</ H1>
<p>这是第一段</ p>

隐形链接

许多开发人员担心“跳过导航”链接的美学影响他们可能认为这些链接看起来并不特别有吸引力,它们“毁了”布局,或者它们妨碍了艺术表达很容易争辩说链接可能会使不需要它们的用户感到困惑而可见的“跳过”链接声明一个类型的不同的可访问性的承诺,为了解决这些问题,可以直观地隐藏链接。

有一些方法来这样做,但它是至关重要的,仍然是可用的所有键盘用户的联系,尤其是看到键盘的用户这意味着默认情况下应该可视地隐藏链接,但是当它接收键盘焦点时它应该变得可见一些技术,如用CSS隐藏内容永久,使链接相同的颜色为背景,大小为0像素的联系,或将其放置在一个像素的透明图像不满足这些重要的要求。

可视化隐藏跳过链接的最常用方法是将它们隐藏在屏幕外,然后在接收键盘焦点时将它们定位在屏幕上。

重要

查看文章屏幕阅读器用户的隐形内容有关使用CSS隐藏“跳过”屏幕的链接。

这种方法的一个潜在问题是,如果用户使用该方法非常快速地导航选项卡键,链接可能只在页面上显示只有几分之一秒,可能会被忽略这可以通过确保“跳过”链接在页面顶部在视觉上与众不同来部分解决另外,可以使用(最佳地)CSS3过渡的脚本来使链接动画化,使其在屏幕上保持可见一段时间。

注意

您可以看到一个隐藏的跳过链接的示例,该链接在键盘焦点上变得可见,它还具有CSS3动画,使其在视觉上与众不同,并且在此页面上始终可见只需浏览本页开头的链接即可选项卡键并在左上角的屏幕上观看“跳过”链接。

判决:这种方法适用于几乎所有用户有视力的鼠标用户(没有从链接中受益)看不到它,屏幕阅读器用户将听到链接,并且有视力的键盘用户在他们导航时会看到链接。

哪种措辞最好?

单词链接有多种“最佳”方式以下是一些相当常见的例子:

  • 跳过导航
  • 跳过主导航
  • 跳过导航链接
  • 跳到主要内容
  • 跳到内容

这些都不比其他人好一般来说,我们更喜欢“跳到主要内容”,因为它解释了他们导航到的位置与他们导航过去的内容Minor variations on these are probably acceptable, such as "skip top navigation." Don't get too creative here, or else users may not realize what the purpose of the link is.

浏览器怪癖

“跳过导航”链接是一个如此简单的概念,很难相信在实现它时会有任何浏览器怪癖,但有某些浏览器不完全支持页内链接虽然他们可能视觉焦点转移到目标或命名锚的位置“跳过”链接,他们实际上并没有设置键盘焦点位置使用JavaScript设置焦点(使用JavaScript)可以解决这些错误focus ())到目标元素。

多个“跳过”链接

What if a page has multiple sections and/or multiple layers of navigational links? Should developers provide a "skip navigation" to each of these sections or over each layer or navigational links? In most cases, this is not necessary请记住,“跳过导航”链接的目的是减少链接列表的混乱增加link-clutter添加更多的链接。

一个受欢迎的美国政府网站最近总共有九个不同的“跳过导航”链接(使用CSS隐藏链接):

  1. 跳到内容
  2. 跳到政府搜索
  3. 跳到底部导航
  4. 跳到顶部导航栏 - 右对齐
  5. 跳到组织
  6. 跳过联系您的政府
  7. 跳到参考中心
  8. 通过主题跳到信息
  9. 跳到公民:在线完成!

This brings of the question of whether they need a "Skip the skip links" link! By providing a proper document outline, perhaps using HTML5 section elements and ARIA landmarks, and simplifying page structure and navigation, typically one or two "skip" links is sufficient.

跳过链接或其他页内链接也可用于允许用户跳转或跳过页面内容例如,此页面顶部的目录包含页内链接,以便于导航到页面区域还可以使用“跳过”链接来允许用户快速绕过令人困惑或可能存在的内容,例如ASCII艺术,复杂表格等。

“跳过导航”链接的替代方案

事实是,“跳过导航”链接是对现实世界问题的一种相当笨拙和突兀的解决方案他们工作它们很有用,但它们有点像黑客它们将继续有用,直到指定导航和主要内容之间差异的更标准化方法发展并得到完全支持使用ARIA地标和HTML5<主>元素,这更接近成为现实不幸的是,没有浏览器通过这些元素完全支持键盘导航尽管有这些限制,除了“跳过”链接之外,还有其他方法可以促进页面导航。

按标题导航

最有用的替代方法是创建文档通过适当的标题从标题,标题,这样用户可以跳过大多数屏幕阅读器允许用户收听标题列表或按顺序收听每个标题,跳过段落,图像,链接和其他无关信息如果正确创建文档,它们通常可以形成标题大纲,这不仅可以作为跳过导航的一种方式,还可以让屏幕阅读器用户“扫描”文档的主要思想,而无需阅读整个文档Defining your primary document heading at the beginning of your main content as an<H1>可以非常快速地访问主要内容的开头。

这种方法的一个缺点是只有屏幕阅读器用户才能访问此功能浏览器没有此功能这意味着发现键盘用户无法跳过链接,链接的屏幕阅读器用户可以以同样的方式。

结论:这种方法对于屏幕阅读器用户非常有效,但有视力的键盘用户通常无法利用它即便如此,有很多原因使用标题,所以这种方法是强烈推荐。

替代阅读订单

一些开发人员将主要内容放在阅读顺序和导航的最后 - 通常使用CSS在视觉上首先在页面中维护导航这种方法不需要“跳过导航”链接,但它提出了另一个问题这些网站应该提供“跳过导航“链接?这是一个棘手的问题将用户引导至导航的链接是意外的,并且可能导致一些混淆有或没有“跳过导航”链接,屏幕阅读器用户想要访问导航可能迷失在页面,想知道如果有任何导航。

这种方法还会导致读取和导航顺序非常不典型 - 这可能会非常混乱,特别是对于视觉上跟踪导航焦点的视力用户而言,这些用户似乎跳过页面而不是从头开始。

结论:这个概念可以是有用的,但用户可以与非典型阅读变得迷失方向和导航。