WebAIM -考虑网页的可访问性

“跳过导航”链接

概观

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

如果没有某种绕过长链接列表的系统,一些用户将处于巨大的劣势。想想那些手臂不动的用户,那些用头敲击开关来使用电脑的用户,或者那些用嘴插入一根棍子来按键盘键的用户。要求用户在访问主要内容之前执行任何操作可能达100多次是不可接受的。

当然,谁使用他们的鼠标近视的人没有与像这样的网页任何麻烦。他们几乎可以立即扫描整个页面,并查明的主要内容是。实际上,视力正常的用户有一个内置的“跳过导航”的机制:他们的眼睛。他们还可以绕过主要内容面前的许多环节,直接点击自己想要的链接鼠标上。“跳过导航”理念的发明给屏幕阅读器和键盘用户直接到主要内容是理所当然的短视鼠标用户采取相同的能力。

创建“跳过导航”链接

这个想法很简单:提供在该跳的主要内容开头的用户下降到锚或目标页面顶部的链接。在大多数情况下,它确实是这样的简单,虽然有实现目标的方法不止一种。有些技术是比别人做得更好。这里讨论的技术是:

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

在页面的顶部可见链接

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

链接的水平位置并不重要。链接可以在左边、中间、右边,或者在中间的某个位置。关键是确保链接是第一个项目屏幕阅读器听到了,键盘用户按下tab键。否则,用户可能根本就没有意识到那里有一个“跳过导航”链接,而可能会浪费时间试图混过无关的链接。特别是屏幕阅读器用户,如果他们在页面的早期没有听到“跳过导航”链接,就会不耐烦。

为了达到最佳的可用性,链接还必须在视觉上很明显。一个非常小的或隐藏的链接对那些最需要“跳过”链接的用户——有视力的键盘用户没有好处。

判决:此方法效果是非常方便的。万博体育官网网址这种方法的缺点是,该链接可能侵入到视觉设计 - 它必须是可见的,并在一开始的页面。此外,该链接呈现给所有用户,甚至是短视的鼠标用户谁可以不使用它,或者可能被它迷惑。

例子

链接是网页中的第一项。该链接的锚定件或靶(其中链路将跳到用户)被放置在所述主内容的开始。


跳转到主内容
...
<主ID = “搜索Maincontent”>
<标题>标题< / h1 >
这是第一段

目标是通过识别其id属性值相匹配的href值(减去“#”),“跳过”链接。

或者,你可以使用一个命名锚来识别链接的目标,尽管命名锚在HTML5中已经不符合。

标题
这是第一段

隐形链接

许多开发人员担心“跳过导航”链接对美观的影响。他们可能认为这些链接看起来不是特别吸引人,他们“破坏”了布局,或者他们妨碍了艺术表达。对于不需要链接的用户来说,这些链接可能会让他们感到困惑。虽然可见的“跳过”链接声明了一种明确的可访问性承诺类型,但为了解决这些问题,可以在视觉上隐藏该链接。

有一些方法可以做到这一点,但至关重要的是链接仍然对所有键盘用户可用,特别是有视力的键盘用户。这意味着默认情况下链接应该是隐藏的,但是当它接收到键盘焦点时应该是可见的。有些技术,例如用CSS永久隐藏内容,使链接与背景颜色相同,将链接大小调整到0像素,或将其放在一个像素的透明图像上,都不能满足这些重要的要求。

可能最容易在视觉上隐藏跳过链接的方法万博体育官网网址是将它们隐藏在屏幕之外,然后当它们接收到键盘焦点时将它们定位在屏幕上。

重要的

查看的文章不可见的内容,仅供屏幕阅读器用户使用关于使用CSS来隐藏细节“跳过”关闭屏幕上的链接。

这种方法的一个潜在的问题是,如果用户浏览速度非常快使用标签键,链接可用于只有一秒钟的一小部分是在页面上可见,并可能被忽略。这可以通过确保“跳过”链接是在页面的顶部独特的视觉来部分地解决。此外,可以使用的(最佳)CSS3过渡脚本来导致链路动画,因此一段时间仍然显示在屏幕上。

请注意

你可以看到一个隐藏的跳过链接的例子,它在键盘焦点上变得可见,也有CSS3动画,使它在视觉上与众不同,在屏幕上随时可见。方法简单地浏览本页开头的链接标签键和手表顶部的“跳过”链接屏幕左侧。

判决:这种方法适用于几乎所有的用户。视力正常的鼠标用户(不能从链接中获益)看不到它,屏幕阅读器用户会听到链接,而键盘用户导航到链接时会看到链接。

其措辞是最好的?

有不止一个“最佳”的方式来字的链接。下面是一些比较常见的例子:

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

这些都不是天生就比别人更好。在一般情况下,我们更喜欢“跳到主要内容”,因为它说明了在那里它们被导航到与他们所浏览的过去。这些微小的变化可能是可以接受的,如“跳过顶部导航”。不要太有创意了这里,否则用户可能不知道该链接的目的是什么。

浏览器怪癖

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

多个“跳过”链接

如果一个页面有多个部分和/或导航链接的多层?开发者们应该提供一个“跳过导航”,以每一部分或在每个层或导航链接?在大多数情况下,这是没有必要的。请记住,的“跳过导航”的链接目的是减少的链接列表的混乱。添加更多的链接增加链路混乱。

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

  1. 跳到内容
  2. 跳转至政府搜寻
  3. 跳至底部导航
  4. 跳转到顶部导航栏,右对齐
  5. 跳到通过组织
  6. 跳到联系您的政府
  7. 跳转到引用中心
  8. 跳转至按主题信息
  9. 跳转到市民:把它在网上完成!

这使它们是否需要“跳过跳过链接”链接的问题!通过提供一个适当的文档大纲,可能使用HTML5部元件和ARIA地标,并简化页面结构和导航,通常一个或两个“跳过”链接就足够了。

跳过链接或其他在页面的链接也可以用来让用户跳转到或跳过网页内容。例如,内容在本页面顶部的表包括页面链接,以方便导航页面的区域。A“跳过”链接也可以被使用,以允许用户快速旁路混淆或可能不可访问的内容,如ASCII艺术的,复杂的表等万博体育官网网址

替代“跳过导航”链接

事实是,“跳过导航”的链接是一个相当笨拙和突兀地解决现实世界的问题。他们工作。他们是有用的,但他们是一个黑客攻击的一位。他们将继续是有用的,直到指定的导航和主要内容的发展和完全支持之间的差异更为规范的方法。随着ARIA地标和HTML5<主>元素,这就更接近现实了。不幸的是,目前还没有浏览器完全支持通过这些元素进行键盘导航。尽管有这些限制,除了“跳过”链接,还有其他方法可以帮助页面导航。

按标题导航

最有用的替代方法是创建有适当标题的文档,这样用户就可以从标题跳到标题。大多数屏幕阅读器允许用户听一个标题列表或按顺序听每个标题,跳过段落、图像、链接和其他无关的信息。如果文档创建正确,它们通常可以形成一个标题大纲,这不仅可以跳过导航,还可以让屏幕阅读器用户“扫描”文档的主要思想,而不必阅读整篇文档。在主要内容的开头定义主要文档标题

可以提供非常快速访问主要内容的开始。

一个缺点这种方法是,只有屏幕阅读器的用户可以访问此功能。浏览器不配备此功能。这意味着,有远见的键盘用户不能从一个链接跳到链接相同的方式,屏幕阅读器用户可以。

结论:这种方法对于屏幕阅读器的用户非常有效,但明眼人键盘的用户一般不能利用它。即便如此,原因有很多使用的标题,所以这种方法是强烈建议。

替代阅读订单

一些开发商把主要内容先在阅读顺序和最后一个导航 - 通常使用CSS来保持第一导航页面视觉。这种方法使“跳过导航”的链接是不必要的,但它提出了另外一个问题。如果这些网站提供“跳过导航”的链接呢?这是一个棘手的问题。链接将用户带至导航是意想不到的,并可能导致一些混乱。不管有没有‘跳过导航’的链接,谁想要访问导航屏幕阅读器用户可能迷失在页面,不知道是否有任何导航。

这种方法还会导致阅读和导航的顺序非常非典型——这可能会让人非常困惑,特别是对于视觉上跟踪导航焦点的用户来说,导航焦点似乎在页面中跳跃,而不是从头开始。

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