button内不能嵌套div、可点击div可访问性不佳，正确实现方案是什么？

方案1：优先使用原生<button>标签（最推荐） #

先澄清一个常见的规范认知误区：HTML 5.2及之后的官方规范中，<button>的内容模型支持所有非交互性的流式内容，内部嵌套纯展示用的<div>完全合规，只要内部不包含其他可交互元素（如其他按钮、链接、输入框等）就不会出现验证错误。
原生<button>自带完整的可访问性能力：默认支持键盘聚焦、回车/空格触发点击、自带按钮语义，不需要手动补充大量属性，是交互元素的首选。
React场景示例代码：

<button 
  className="calendar-day-block"
  onClick={() => handleDateClick(date)}
  aria-label={`${date.month}月${date.day}日，共${eventCount}条日程`}
>
  <div className="day-number">{date.day}</div>
  <div className="day-events">
    <div className="event-item">早会 9:00</div>
    <div className="event-item">健身 19:00</div>
  </div>
</button>

样式层面只需要重置<button>的默认样式即可：去掉默认边框、背景、内边距，设置为你需要的方形尺寸即可正常使用。

方案2：使用<div>实现（适用于有特殊交互需求的场景） #

如果你的场景确实无法使用<button>，就需要手动补全所有可访问性属性，确保符合WCAG标准：

• 必须添加的核心属性：
  • role="button"：告知屏幕阅读器该元素是按钮交互组件
  • tabIndex={0}：让元素可以通过键盘Tab键聚焦
  • 同时绑定onClick、onKeyDown事件：除了鼠标点击，还要支持回车（Enter）和空格（Space）触发交互
• React场景示例代码：

<div 
  role="button"
  tabIndex={0}
  className="calendar-day-block"
  onClick={() => handleDateClick(date)}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handleDateClick(date)
    }
  }}
  aria-label={`${date.month}月${date.day}日，共${eventCount}条日程`}
>
  <div className="day-number">{date.day}</div>
  <div className="day-events">
    <div className="event-item">早会 9:00</div>
    <div className="event-item">健身 19:00</div>
  </div>
</div>

额外注意：需要手动添加聚焦态样式，方便键盘用户识别当前选中的日期区块。

额外可访问性优化建议 #

• 每个日期区块添加aria-selected属性，标记当前处于选中状态的日期
• 如果日期存在未读日程，可以添加aria-describedby关联对应的日程数量提示
• 整月日历容器可添加role="grid"，每个日期区块添加role="gridcell"，更贴合日历的语义场景

内容的提问来源于stack exchange，提问作者Ryan Thomas