<input type =“checkbox”/> vs <div role =“checkbox”>

Question

要添加复选框，最常见的做法是使用<input type="checkbox">，而我可以看到youtube和gmail不会使用它来创建复选框。 相反，他们使用<div role="checkbox" aria-checked="true">

你能否解释一下为什么创建复选框的方式与这些公司(using <div role="checkbox">)一样，不是最常见的做法？

Answer 1

常规复选框正常。它本质上是checkboxy。

一个div没有。 div是一个通用容器。要让它像复选框一样工作，你必须：

• 将其添加到标签顺序
• 风格
• 添加JavaScript以使其具有交互性
  • 确保JS使用鼠标
  • 和触控板
  • 和键盘
  • 和触摸屏
  • 和各种其他输入
• 说服屏幕阅读器宣布它为复选框
• 可能还有其他我想过的东西

...以及所有不同的网络浏览器。

为了更加灵活地了解复选框的外观，您需要做大量的工作。

使用HTML内置的复选框更加安全和简单。

简而言之：

  

你能否解释一下为什么创建复选框的方式与这些公司一样，不是最常见的做法

因为成本高而且收益低。