html - 作用于 `input` 的 HTML 元素的语义

Question

我有一组具有以下结构的复选框:

<div>
  <div>
    <label><input type="checkbox" value="a1"/>A1</label>
  </div>
  <div>
    <label><input type="checkbox" value="a2"/>A2</label>
  </div>
  ...
</div>

复选框仅用于 UI 控制(不用于表单提交)。我有一个关联的 html 元素，它有一个 onclick jQuery 函数，可以清除所有复选框。该元素目前只是一个 div。从语义上讲，是否有任何最佳实践可以说明这应该是一个 button、一个 a(没有 href 值)还是继续是一个div?

Answer 1

你应该使用 button element在button state (或 input element 中的 button state)。

为什么不 a ? 因为它应该只用于指向资源的链接。

为什么不 div ? 因为默认情况下它不可聚焦(对于键盘用户)，并且因为它没有隐式 WAI-ARIA 角色(对于可访问性)，所以您必须手动添加这两个功能，本质上是重新创建一个已经存在的元素:button。