关于按钮

1

前几天，我们发布了 一篇关于 纯 CSS 技巧的文章，其中一个带有双边框的元素可以看起来像暂停图标，并可以很好地变形为 CSS 三角形 ，看起来像播放图标。它最初发布时使用了一个 <div> 作为演示元素，这是我们方面完全的无障碍错误，因为像这样旨在进行交互的东西实际上是一个 <button>。

它还包含一个使用 复选框黑客 来切换按钮状态的演示。这将键盘交互从“返回”单击更改为“空格键”切换，但更重要的是，应该有一个 :focus 状态来指示按钮（实际上是一个标签）是可交互的。

这两个问题都已修复。

2

Adam Silver 有一篇有趣的帖子，标题很好地概括了问题

但有时链接看起来像按钮（按钮看起来像链接）

真正的按钮（例如表单提交按钮）没有争议。真正的链接也没有争议。问题在于当我们混淆了它们时。

按钮（类型为“button”）不是提交按钮。按钮用于创建依赖于 JavaScript 的功能。例如显示菜单或显示日期选择器。

他举了另一个例子，一个“按钮”式的号召性用语。它们通常只是被样式化成按钮以突出显示的链接。这段话很重要

在 弹性 Web 设计 中，Jeremy Keith 讨论了材料诚实的想法。他说：“一种材料不应被用作另一种材料的替代品，否则最终结果将是欺骗性的”。

让链接看起来像按钮在材料上是不诚实的。它告诉用户链接和按钮是一样的，但实际上不是。

在 设计系统中的按钮 中，Nathan Curtis 说，我们应该区分链接和按钮，因为“按钮的行为会带来许多与简单的锚标签不同的考虑因素”。

例如，我们可以新标签页打开链接，复制地址或将其保存为书签。所有这些我们都不能用按钮做到。

号召性用语按钮——同样，只是链接——是欺骗性的。用户浑然不知，因为这种样式删除了它们自然的暗示，掩盖了它们的行为。

我们可以让号召性用语按钮看起来像普通链接。但这会让它们在视觉上变得弱化，从而削弱了它们的突出程度。这就是问题所在。

我发现即使在 <button> 中，你也会遇到问题，因为这些按钮的功能通常非常不同。例如，CodePen 上的 Fork 按钮会带你到一个全新的页面，其中包含笔的新副本，这感觉有点像点击链接。但它不是链接，这意味着它的行为不同，并且 需要解释.

3

我将再次重复 Adam 的话

按钮用于创建依赖于 JavaScript 的功能。

表单内的按钮具有无需 JavaScript 的功能，但这是唯一的情况。

这意味着，<button> 在 HTML 中完全没有用处，除非 JavaScript 成功下载并执行。

推到极端逻辑结论，你永远不应该在 HTML 中使用 <button>（或 type="button"），除非是在表单中。由于 JavaScript 是按钮执行任何操作的必要条件，因此你应该在 JavaScript 中将按钮注入到合适的位置，一旦它的功能准备就绪。

或者，如果这不可行...

<button disabled title="This button will become functional once JavaScript is downloaded and executed">
  Do Thing
</button>

那么在准备好后更改这些属性。