HTML 验证：为什么将交互式元素放在交互式元素中是无效的？

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，但上述内容是否也应该被允许？

这是一个小提琴： 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。

虽然视觉上可以想象并且在技术上是可行的，但辅助技术无法访问它，例如屏幕阅读器

我们举个简单的例子：

<button>
    Click for action 1
    <button>Click for action 2</button>
</button>

第一个<button> 的可访问名称将是“点击操作1 点击操作2”。如果你定义了一个aria-label="Click for action 1"，那么内部的button 元素根本不会被读取。

如果你真的想让整个元素可以点击，你可以完美地使用 javascript 并且仍然可以访问

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

  <button class="cta">
   Secondary CTA
  </button>
</div>

<script>
$(".outer").on("click", function() {$(".card").click()});
</script>

<style>
.outer {cursor: pointer}
</style>

在此示例中，您将正确地向屏幕阅读器呈现两个按钮，第一个是“卡片本身是主要 CTA”，第二个是“次要 CTA”，而在整个卡片上单击鼠标会导致相同的操作作为第一个按钮。

Answer 2

一个重要的问题与事件捕获有关；如果您单击嵌套在另一个交互式元素内的交互式元素（例如，可点击的button 内的select）会在此处产生干扰，并且可能会发生两种情况，具体取决于浏览器；

情况 1 是两个元素都会引发该事件（例如click）事件

情况 2 是父元素将捕获事件，而嵌套元素不会引发 event

事实上，这两种情况都会导致不确定的行为；

这实际上不仅限于click事件，而是click事件更具体；屏幕阅读器也将无法解析标记；键盘交互无法按预期工作；在下面的 sn-p 中尝试：

del.addEventListener('click', function(){
  console.log('deleting ...')
})

save.addEventListener('click', function(){
  console.log('saving ...')
})

sel.addEventListener('change', function(){
  console.log('changing to', sel.value)
})

<div id='del'>
delete 
<button id='save'> save 
<select id='sel'>
  <option>foo</option>
  <option>bar</option>
<select>
<input name='a' type='radio' />
<input name='a' type='radio' />
<input name='a' type='radio' />

</button>
</div>

Answer 3

很难回答“为什么”的问题，因为要考虑的因素很多，归根结底是规范规定的，但我会试一试。

当这种行为被指定时，这种设计风格并不常见。链接通常是单个图像或一小部分文本。看看this link to an article from the year 2000:
]
只有标题和图像是交互的。剩下的就是简单的文字。

即使在今天，这种情况也并不常见。还请看Microsoft 365 pricing page:

请注意卡片本身不是交互式的，只有里面的东西。您可以看到按钮形式的主要 CTA“立即购买”和超链接形式的次要 CTA。

---

现在，关于您的示例：那张卡片真的是一个按钮吗？这可能是主观的，但对我来说这不是一个按钮。按钮通常以与周围页面形成对比的配色方案出现。我会将卡片设为 <div>，将辅助 CTA 设为 <button>。

但它可能会让用户感到困惑，因为这张卡片对我来说似乎没有太多互动性。考虑将cursor: pointer 添加到<div>（除了所有必要的可访问性）`。

---

我注意到你标记了accessibility。我认为这对于使用屏幕阅读器的人来说不是一个好主意，而且我认为大多数屏幕阅读器在解释按钮内的按钮时会遇到问题（如果浏览器完全接受的话）。

我会改用“Microsoft 365 定价页面方法”。它更简单，并且适用于 HTML。

Answer 4

原则上答案其实很简单。当您单击另一个交互元素中的交互元素时，您应该触发哪个功能？

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

下面的小提琴应该演示问题，进入第一个按钮并按 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 然后只影响按钮还是同时影响两者？