HTML 验证 : Why is it not valid to put an interactive element inside an interactive element?

Question

免责声明:我知道它不是有效的 HTML。我想了解为什么不允许这样做？

W3C 建议使用像 button 这样的交互元素。或 a不得包含其他交互元素。

我可以找到很多提到这条规则和一些变通办法的资源，还有一些与这如何影响可访问性和屏幕阅读器相关的资源，但几乎所有这些资源都谈到这是一项要求，但没有解释为什么。

https://adrianroselli.com/2016/12/be-wary-of-nesting-roles.html

https://codepen.io/vloux/pen/wXGyOv

Nesting <a> inside <button> doesn't work in Firefox

https://github.com/dequelabs/axe-core/issues/601

我真的无法找到为什么不允许的解释？它会导致任何可用性问题吗？

这是一个相关的问题:
Why should interactive element not be used within an anchor?

接受的答案是令人满意的，但还不足以使这条规则成为一项要求。使用适当的事件处理可以避免所描述的情况。

此外，如果嵌套的交互式内容无效，我们应该如何拥有这样的东西:

整体上可点击的卡片，内部还有一个可点击的辅助 CTA。
我知道一种解决方法是在卡内设置主要和次要 CTA，但是否也应允许上述情况？

这是一个 fiddle :
https://jsfiddle.net/t9qbwas5/2/

<button type="button" class="card">
  The card itself is the primary CTA.
  <br/>
  <br/>
  some important content to read through.
  some important content to read through.
  some important content to read through.
  <div class="cta">
   Secondary CTA
  </div>
</button>

.cta {
  padding: 4px;
  background: #00a9a9;
  color: white;
  width: 80px;
  margin: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

在上面的示例中，我通过在按钮内使用可点击的 div 来实现这一点，但这不是语义 (?) 和功能明智的，它是另一个内部的交互元素。我试图理解，即使我使用这种解决方法，嵌套交互元素是否从根本上是错误的？这是一个糟糕的设计/可用性实践吗？

Answer 1

答案实际上在原则上非常简单。当您单击另一个交互元素内的交互元素时，应该触发哪个功能？

在您的示例中，如果我单击辅助 CTA，它应该触发辅助 CTA 的功能还是应该触发卡片的功能？

下面的 fiddle 应该演示问题，进入第一个按钮并按 Enter，然后进入 CTA 并按 Enter。

显然你可以解决这个问题，但我认为它证明了这一点。

$('.card').on('click', function(){
    console.log("card");
});
$('.cta').on('click', function(){
    console.log("cta");
});

.cta {
  padding: 4px;
  background: #00a9a9;
  color: white;
  width: 80px;
  margin: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="card">
  The card itself is the primary CTA.
  <br/>
  <br/>
  some important content to read through.
  some important content to read through.
  some important content to read through.
  <div class="cta" tabindex="0">
   Secondary CTA
  </div>
</button>

然后，此原则继续适用于屏幕阅读器和其他 Augmentative and alternative communication (AAC)设备。

他们在描述子元素时是否应该考虑父元素？如果您在 <button> 中嵌套一个复选框，它们是否应该允许使用 Space 来激活？ , 那么 Enter 应该只影响按钮还是两者都影响？