必威体育下载基督教Heilmann

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

今天早上我发了一篇关于回到基础:用于JavaScript处理的非导航链接并理所当然地招致了贡纳指出文章的不足之处。

本质上,本文询问以下五个例子中哪个是创建调用JavaScript功能的链接的正确示例:



	

正确答案是没有一个。这不是锚的作用。锚元素应该有一个指向有效值的href属性URL资源。换句话说:

如果要在网站或应用程序中创建可带您访问其他Web资源的交互式元素,请使用锚定。您不使用锚元素来触发脚本功能。这就是button元素的作用。

这两种方法都很容易使用,而且都有很多可访问性的好处,比如键盘访问和浏览器中的本地状态指示器。

何时使用锚/链接

链接到a时使用锚元素URL或者一个API端点:

互动元素HTML

	

收件箱

或当你连接到同一文件中的某个目的地时:

我们的条款和条件,请您忽略

	

…卡车的HTML

然后,您可以使用JavaScript拦截链接并覆盖其默认行为,以保持用户在页面上。如果JavaScript因为某种原因失败了,用户将重新加载整个UI,并且仍然会去他们需要去的地方。在本例的w3c网站上,应用程序或术语的/inbox端点UIDIV。他们也可以在其他选项卡中打开其中任何一个。我在WordPress中一直这么做。这很好,固体,保持用户控制的设计。然而,当没有URL或进入页内目标,你给了一个你没有遵守的承诺。

何时使用按钮

如果,你的应用没有URL不同状态的端点和所有处理都在JavaScript中发生,没有必要用一个无处可去且不会在另一个选项卡中打开任何内容的链接来混淆您的用户。使用一个按钮,你不会承诺任何你没有的功能。

HTML元素正是为此目的定制的,即使使用键盘也可以很好地工作。

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

不要混淆用户

当涉及到可访问性问题时,这一点尤其重要。屏幕阅读器用户,例如,可以以多种方式导航文档。其中之一是获取文档中所有链接的列表。这就避免了他们必须监听整个文档才能找到其中的某个部分。如果你创建了很多没有指向任何地方的链接,你把这张单子全填满了废话。如果你创建按钮并相应地标记它们,甚至那些看不到你的UI的人也能浏览它。

为什么这仍然是个问题?

喜欢标记和简单web的人知道这一点已经有很多年了,我们每隔几年就要重复一次。然而,链接不断被用于web或文档中任何地方都没有的功能。

究其原因,很大程度上是历史和对货物崇拜的恐怖故事浏览器做错了。过去的浏览器有一些按钮的问题。很难覆盖它们的浏览器内样式。非常老版本的Internet Explorer有一个bug,只有第一个按钮包含在表单数据中,不是被压的那个。

样式可能仍然是人们在应该使用按钮的地方错误使用链接的主要原因。按钮是比链接复杂得多的交互元素,它们有更多的样式。链接是文本渲染器的一部分,传统上,按钮是表单的一部分,而且要复杂得多。所以如果有人不喜欢CSS担心“事情看起来不对劲”,使用链接很诱人,因为它更容易设计样式。那然而,表示您的产品的项目管理存在问题。最终用户不应该得到错误的交互模型,因为设计产品样式的人不知道如何或想要这样做。

最后一个原因可能是它很有效,我们已经看到其他人这么做了。这是一个有名无实而又懒惰的理由。浏览器必须原谅它们所显示的内容,以避免最终用户得到一个糟糕的体验。然而,不是每个人都有相同的设置,我们的能力和想法是一个多么好的界面。通过为正确的工作使用正确的元素,我们有责任为浏览器和操作系统创建一个工作界面,而不是自己去做。虽然链接对我们来说不会中断,但这并不意味着当按钮更加坚固时,其他人也不会中断,定制的解决方案。

旧浏览器中按钮的问题现在已经解决了。现在没有理由不使用按钮,特别是考虑到您可以免费获得多少可访问性好处时。