不能在 <button> 内使用 <div>，但可点击的 div 被认为是错误的。什么是 "correct" 方法？

Question

我正在构建一个采用日历形式的 React 应用程序，用户应该可以在其中单击日历上的日期。这些日子由大方块表示，因此它们可以包含当天的信息。出于可访问性原因，使用 <button>s 似乎是最明智的选择，但我的研究 (Why can't a <button> element contain a <div>?) + (https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element) 表明将 div 放在按钮内是不正确的。我能想到的唯一其他选择是将日子变成它们自己的 <div>，但让它们可点击并手动为它们提供 tabIndex 和 role 功能以实现可访问性目的.

可点击区域的正确 html 标签或方法是什么，其中可能还包含多个 <div>？

Answer 1

您可以将 div 包裹在锚点中：

<a href="javascript:void(0)"><div>Hello World!</div></a>

Answer 2

您可以在 <button> 中使用 <span> 个元素并且它是有效 HTML.

<button>
  <span>Three Different Spans</span>
  <span>But Perfectly Valid</span>
  <span>HTML!</span>
</button>

因为您可以按照自己的方式设置跨度的样式，所以这不会给您带来任何问题。

但是：如果您发现需要一个可点击区域（您认为应该是一个按钮，这对于日历来说确实是正确的！）需要多个容器，则很可能是您设计的不正确，可能需要重新考虑设计。

您可以求助于 CSS :before 和 :after 伪选择器来增加您需要的复杂性（没有看到设计很难给出任何可靠的建议）。

如果您真的不确定，可以将 aria-label 添加到 <button> 元素，然后（同样取决于内容）将 aria-hidden="true" 添加到所有内部项目。

<button aria-label="function of the button, this will be read to screen readers and other assistive tech">
  <!-- this should be unnecessary, but depending on the content this is a technique to fix any issues caused by the button content -->
  <span aria-hidden="true">Three Different Spans</span>
  <span aria-hidden="true">But Perfectly Valid</span>
  <span aria-hidden="true">HTML!</span>
</button>

不能在 <button> 内使用 <div>，但可点击的 div 被认为是错误的。什么是 "correct" 方法？

Cannot use <div> inside of <button>, but clickable divs are considered bad. What is "correct" approach?

html

javascript

css

accessibility

reactjs