“Back to Top” links considered harmful
Jukka “Yucca” Korpela版权所有
作者：Jukka “Yucca” Korpela
译者：UCD翻译小组，波希米亚
原文地址： //www.cs.tut.fi/~jkorpela/www/totop.html

译者序：这是一篇关于可用性方面的文章，作者在本文中列✱举了很多例子，对这个话题研究的很细致，从多方面考♔虑了这个链接的可用性问题，同时也抛出了一个问题：到底是用浏览器固有支持的功能，还是用像“Back to Top”这种功能的替代品？本文都有详细阐述。

网页上经常都有一个链接用来回到页面开始的位置，有代表性的命名就是“Back to Top”，同时可能还兼带一个箭头朝上的图标。这篇文𝄹章用以讲解为什么这种用法不好，特别是以可访问性为理由。同时也讨论了创建这样的链接一定程度上低估了带来的损害。

“Back to Top”（或者叫“Top of page” ，或者你所采用的）同样分散了对实际内容的注意力。对某些人而言，甚至极小的注意力分散都是令他们不安的。网页通常有很多组成部分，范围从实际内容的不同部分到纯粹装饰。又新增加了不同的元素，比如用户界面窗口组件，这样的页面对认知能力有残障的人来说就更困难了。
当需要用纸打印时，“Back to Top”看起来是那么的蠢。（你可以用CSS去防止这件事，但很多作者并没有这样做。）
当使用“Tab”键跳跃到下一链接时，“Back to Top”一直傻站在那（译者注：必须先从它身上踩过去，才能到达下一个链接）。按“Tab”键好比代替鼠标点击，对很多人来说是必要的，例如肌肉有残疾的人。此外，很多人更喜欢用键盘导航，因为它更快。
“Back to Top” 链接也妨碍朗读工具的使用。你愿意在使用语音合成器朗读页面时，在每个段落结束后都突然蹦出一句“link: back to top”吗？这样的用户工具通常都有一个链接朗读模式，只朗读链接，一个接着一个地。
每个浏览器都有一些内置功能用来移动到当前页面的开始处（比如支持使用“Home”键）。就创建一个链接模仿这样的功能而言，你会把用户弄迷糊，他们会认为他们需要使用这个功能，而不是浏览器内置功能。
“Back to Top”的文字是有误导性的，因为用户压根就没想回到顶部。他可能认为会跟着这个链接到文章的顶部这里是意译，直译理解不准确，下一段也做了补充。 或一个位置。（对于这种情况，“To Top”和 “Start of page” 就好多了。）
“top” 的概念是模糊的。哪个顶部？如果你生平第一次看见“Back to Top”，你能知道它是页面顶部、站点顶部还是其他什么的顶部吗？（每天，都有数以千计的人头一次使用网站。）就这些理由，“Start of page”是更好的说法——但惯例不是这样。
“Back to Top”链接不是始终贯穿站点的，只在功能的表面或细节。
当点击了“Back to Top” 链接时，额外的内容干扰了浏览历史。例如，当你使用“上一页”按钮时，会发现当前页面又出现了一次。
不可否认，“Home”键（或等同的键）特点就是不改变焦点。这就意味着当你按“Tab”键时，焦点被移动到随之而来的链接（表格区域）上。如果你喜欢用 “Tab”键♐去导航，这可能会不方便，但在这个💖例子中， “Back to Top” 链接会更加讨厌。另一方面，失焦行为可能有用：你可能希望跳到页面开始的地方去查看一些东西，于是从你所在的链接（或区块）出发。

以下都是浏览器基础功能的替代品，“Back to Top” 链接、““Print this page””和“Bookmark this page”链接，还有改变字号的链接或菜单。然而，这些都是不同的窗口组件，伴有不同程度上的阻碍（和一些潜在或自称的好处）。基本问题还在于网页是否应ജ该为这个目的去创建用户界面，而不是接受用户看到的（或相反是由于用户经验丰富）🐽浏览器的固有功能。

尽管一些用户喜欢并使用“Back to Top”链接和其他浏⛄览器功能的替代品，但他们ꦚ走错路了。很多用户显然是不知道浏览器的内建功能，那些可以帮助他们在所有网页都使用一致操作的方式。

替代品本身可能不是坏东西。事实上，浏览器功能可以经常使用不同方法调用。例如，在IE中到当前文章开始处，我可以用“Home”键，或者可以用滚动条滚动到顶部，或者可以使用🃏“Page Up”键，就像很多时候需要的那样。当一个页面包含其他方法跳到开始处时，用户如何知道它做了♛什么？例如，它没法保证和“Home”键的效果一摸一样。事实上，它们是有差别的；比如，“Back to Top”可能没法跳到绝对顶部而只是接近的某个地方，顺便提一句，这样焦点行为就不同了。这就没法保证看上去相同的链接在不同页面上所达到的效果完全一致了。

Jakob Nielsen，可用性专家，他曾在alertbox中主张，目的地在同一页面内的链接应该尽量避免：避免页内链接 。Nielsen说这样的链接会破坏后面链接的心智模型。不过“Back to Top” 链接是个不同的例子，因为用户大概不希望加载一个新页面使得现有页面消失。然而，普遍观点认为概念清晰和简单实用无济于事：“链接最好用于引导从一个页面到另一个页面的工作，而不是指向页面内。”

如果你使用“Back to Top” 链接,相对伤害较小的方法：
<div class="toplink" align="right"><a href="#">Start of page <img alt="" src="up.gif" width="13" height="12" border="0"></a></div>

笔记：

这个链接被放在一个带有class的div元素中，使它很容易被样式控制。例如，你可以略微缩小字号或增加它与下面链接之间的距离。
链接文字简短（用以降低对语音浏览器的影响），尚可适当说明。
箭头图标和链接的其他部分都可以点击。不要把它弄成分开的链接，不然用户使用“Tab”键跳跃时会跳两次而不是一次。
箭头图标的存在可以作为一个视觉引导，当然，尽管它不是功能必须。
箭头图标的alt属性为空，因为当图片不显示时它不用进行文字替换——文字链接的内容就足够提供信息了。
链接的href属性值为“#”，它本身就是回到当前文章开始处。所以不同担心创建位置锚点的正确方法。然而，一个引用“#”的链接是无法改变焦点的。此外，Opera浏览器不支持这种链接，因为某些奇怪的原因；点了这中链接后没有任何效果，或许因为链接引用的是文章本身。如果你觉得其中一个会成为问题，你可以采用锚点+id的方法，放在文章主体的第一个元素里。例如，如果主体以<h1>开头，你可以使用<h1 id=”start”>。然后在链接里自然就要使用href=“#start”。（一些非常老的浏览器，例如Netscape 4，不支持使用id属性进行位置界定。或许在这种环境中混略它们更安全，特别是当这种链接仅仅是浏览器功能的替代品时候。）

在样式表里，你最好加上下面这样一条，这样在打印页面的时候就会把这些链接忽略掉：
@media print{.toplink{display:none;}}

? 波希米亚（转载请保留原文链接）

原文：//blog.b3inside.com/userexperience/backtotop-cons꧃🥂idered-harmful/