18新利官方网站基督教Heilmann

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

周二,2月5日,2019年12点34分

今天早上我发了一篇博文回到基础:JavaScript处理的非导航链接并且理所当然地招致了贡纳指出文章的缺陷。

从本质上讲,这篇文章问下面五个例子中,哪个是正确的例子来创建一个调用JavaScript功能的链接:


              
              href=
              ”“
              >
             
               
               href=
               “#”
               >
              
                
                href=
                “#” 
                onclick=
                ”返回false;“ 
                />
               
                 
                 href=
                 “javascript:无效(0)”
                 >
                
                  
                  href=
                  “javascript:{ }”
                  >
                 
                   
                   href=
                   “# 0”
                   >
                  

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

如果您想在站点或应用程序中创建一个带您到另一个web资源的交互式元素,那么可以使用锚。您不使用锚元素来触发脚本功能。这就是按钮元素的作用。

两者都很容易使用,并且附带了大量的易访问性好处,比如浏览器中的键盘访问和本机状态指示器。

何时使用锚/链接

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

或当你在同一文件内连结至目的地:


              
              href=
              “#”
              >
             我们的条款和条件供您忽略>…成卡车的HTML…
              
              id=
              “条款”
              >
             >

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

何时使用按钮

如果,你的应用没有URL不同状态的端点和所有处理都是在JavaScript中进行的,没有必要让你的用户对一个链接感到困惑,因为它不会在另一个选项卡中打开任何东西。使用一个按钮,你不会承诺任何你没有的功能。


             
              >
             收件箱>

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

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

不要混淆用户

当涉及到可访问性问题时,这一点尤其重要。屏幕阅读器用户,例如,可以以多种方式浏览文档。其中之一是获取文档中所有链接的列表。这就避免了他们必须监听整个文档才能找到其中的某个部分。如果你创建了很多指向别处的链接,你在这张单子上填满了废话。如果您创建按钮并相应地对其进行标签,即使是看不到你的用户界面的人也能浏览它。

为什么这仍然是个问题?

标记和简单web的爱好者很早就知道这一点,我们每隔几年就得重复一次。然而,链接不断地被用于web或文档中不存在的功能。

原因主要是浏览器出错的历史和货物狂热的恐怖故事。浏览器的过去有一些问题的按钮。要覆盖它们的浏览器样式是很困难的。非常老版本的Internet Explorer有一个错误,只有第一个按钮包含在表单数据中,不是那个被压制的。

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

最后一个原因可能是它有效,我们也见过其他人这么做。这是一个有理由且懒惰的理由。浏览器必须原谅它们所显示的内容,以避免最终用户体验不佳。然而,不是每个人都有相同的设置,我们拥有的能力和想法是多么好的界面。通过为正确的工作使用正确的元素,我们有很多责任为浏览器和操作系统创建一个工作界面,而不是自己动手。仅仅因为链接不会为我们断开并不意味着它们不会为其他人断开当一个按钮更坚固时,定制的解决方案。

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

在Twitter上分享