我正在构建一个React应用程序，它采用日历的形式，用户应该能够点击日历上的日期。这些日子用大的ish正方形表示，这样它们就可以包含当天的信息。出于可访问性的原因，使用<button>似乎是最明智的选择，但我的研究(为什么一个<button>元素可以包含<div>？)+(https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button元素)表示将div放在按钮内部是不正确的。我唯一能想到的另一个选择是将这些日子制作成自己的<div>，但使它们可以点击，并手动为它们提供tabIndex和role功能，以便于访问。
对于一个可能包含多个<div>的可点击区域，正确的html标签或方法是什么？
您可以在<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>
您可以将div封装在一个锚点中：
<a href="javascript:void(0)"><div>Hello World!</div></a>