HTML中为何不能嵌套按钮？嵌套后的问题及A11y影响咨询

为什么规范禁止嵌套交互式标签？ #

交互式元素（如<button>、<a>、<input>、<select>）本身具备独立的语义、交互行为和无障碍属性，嵌套会直接破坏浏览器对这些元素的预设解析逻辑，导致行为不可预测。

违反规则嵌套按钮的实际后果 #

• DOM结构被篡改：浏览器会自动修正不符合规范的嵌套，比如把内部的<button>从外层按钮中剥离出来，放到同级位置，导致你写的布局和实际渲染的DOM完全不一致，页面排版混乱。
• 事件触发混乱：点击内部嵌套的按钮时，事件会通过冒泡机制触发外层按钮的点击事件，一次操作触发两次交互逻辑。比如外层按钮是提交表单，内层是重置，点内层可能同时执行提交和重置，完全不符合预期。
• 跨浏览器行为不一致：不同浏览器的修正逻辑存在差异，比如Firefox和Chrome对嵌套按钮的处理方式不同，导致页面在不同浏览器上的交互效果不一致，增加调试成本。

是否会触发错误？ #

不会触发JavaScript语法错误，HTML本身是容错性极强的标记语言，浏览器会尽量“修复”不符合规范的代码。但浏览器控制台的Elements面板会出现黄色警告，提示你嵌套了交互式元素，违反了HTML规范。这种警告不会导致页面崩溃，但会让页面行为不可控。

对无障碍访问（A11y）的负面影响 #

这部分的影响非常严重：

• 屏幕阅读器识别混乱：NVDA、VoiceOver等辅助工具遇到嵌套的交互式元素时，会重复播报“按钮”语义，或者无法区分内外层元素，让视障用户搞不清哪个元素对应哪个操作。
• 键盘导航异常：使用Tab键切换焦点时，可能会同时聚焦到外层和内层按钮，或者跳过某个元素，键盘依赖用户无法正常完成交互操作。
• 语义结构破坏：无障碍技术完全依赖HTML的语义化标签来理解页面逻辑，嵌套交互式元素会让辅助技术误判页面的交互结构，直接剥夺了残障用户正常使用页面的权利。

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