18新利官方网站克里斯蒂安·海尔曼

不去任何地方的链接应该是按钮

今天早上我发了一篇关于回到基础知识:用于JavaScript处理的非导航链接并正当地招致了贡纳指出文章的缺陷。

In essence,本文询问以下五个示例中哪一个是创建调用某些JavaScript功能的链接的正确示例:



	

正确答案是没有人.这不是锚的作用。锚定元素应具有指向有效的统一资源定位地址资源。换言之:

You use an anchor if you want to create an interactive element in the your site or app that takes you to another web resource.不使用anchor元素触发脚本功能。这就是button元素的作用。

两者都很容易使用,而且具有大量的便利性,比如键盘访问和浏览器中的本机状态指示器。

何时使用锚/链接

当链接到统一资源定位地址美国石油学会端点:

中的交互元素HTML

	

收件箱

或者当您链接到同一文档中的目标时:

我们的条款和条件让你忽略

	

…卡车的货物HTML

然后,您可以使用javascript截获链接并覆盖其默认行为,以保持用户在页面上。如果javascript由于某种原因失败,用户将重新加载整个用户界面,并仍会转到他们需要去的地方。在这个W3C网站的示例中,应用程序或术语的/inbox端点UIdiv.他们也可以打开其他选项卡中的任何一个。我经常在WordPress中这样做。这很好,固体,使用户保持控制的设计。然而,当没有统一资源定位地址或者在要转到的页面目标中,你给了一个你不遵守的承诺。

何时使用按钮

如果,你的应用程序没有统一资源定位地址不同状态的端点和所有处理都在javascript中进行,there is no point in confusing your users with a link that goes nowhere and won't open anything in another tab.使用一个按钮,你就不会承诺你没有的任何功能。

这个HTML元素是专门为这个目的定制的,即使使用键盘也能正常工作。

按钮甚至可以在没有javascript的情况下工作。如果将它们放入表单元素中,按下它们将把表单数据发送到服务器,您可以对后端中按下的按钮做出反应。当然,您也可以覆盖这个功能并在脚本中完成所有的工作——您只需要希望它能够工作。

不要混淆用户

当涉及到可访问性问题时,这一点尤其重要。屏幕阅读器用户,例如,可以以各种方式导航文档。其中之一是获取文档中所有链接的列表。这就避免了他们必须聆听整个文档才能找到其中的某一部分。如果你创建了很多毫无意义的链接,你用胡说八道填这张单子。如果创建按钮并相应地标记它们,即使是看不到你的用户界面的人也能浏览它。

为什么这仍然是个问题?

Markup和一个简单的Web的粉丝已经知道这一点很多年了,我们每隔几年就要重复一次。然而,链接一直被用于Web或文档中任何位置都无法使用的功能。

原因主要是历史和货运狂热的恐怖故事浏览器做错事。过去的浏览器在按钮方面有一些问题。很难覆盖他们的浏览器风格。旧版本的Internet Explorer有一个bug,表单数据中只包含第一个按钮,不是被压的那个。

样式可能仍然是人们错误使用按钮的链接的主要原因。按钮是比链接复杂得多的交互元素,它们有更多的附加样式。链接是文本渲染器的一部分,按钮传统上是表单的一部分,而且更复杂。所以如果有人不喜欢CSS担心“事情不对劲”,使用链接很有诱惑力,因为它更易于设计样式。那,然而,是产品项目管理出现问题的指示器。最终用户不应该得到错误的交互模型,因为必须设计产品风格的人不知道该怎么做,也不想这样做。

最后一个原因可能是它起作用了,我们已经看到其他人这样做了。这是一个有资格和懒惰的理由。浏览器必须宽容显示的内容,以避免最终用户获得失败的体验。然而,不是每个人都有相同的设置,我们的能力和想法是一个多么伟大的界面。通过为正确的工作使用正确的元素,we hand a lot of the responsibility to create a working interface to the browser and the OS instead of having to do it ourselves.仅仅因为链接不会为我们断开并不意味着当一个按钮更坚固时,它们不会为其他人断开,定制解决方案。

旧浏览器中按钮的问题现在已得到修复。这些天没有理由不使用按钮,尤其是当考虑到免费获得多少可访问性好处时。