HTML 验证:为什么将交互式元素放入交互式元素中无效? [英] HTML Validation: Why is it not valid to put an interactive element inside an interactive element?

问题描述

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

W3C 建议像 button 或 a 这样的交互元素不能包含另一个交互元素.

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

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

解决方案

答案其实原则上很简单.当你点击另一个交互元素内的交互元素时，你应该触发哪个功能?

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

下面的小提琴应该说明问题，Tab 进入第一个按钮并按 enter，然后 Tab 进入 CTA 并按 Enter.

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

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

.cta {填充:4px；背景:#00a9a9；白颜色;宽度:80px；保证金:自动；边距顶部:8px；底边距:8px；}.卡片 {宽度:200px；显示:弹性；弹性方向:列；对齐内容:居中；文本对齐:居中；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" class="card">卡片本身是主要的 CTA.<br/><br/>一些重要的内容要通读.一些重要的内容要通读.一些重要的内容要通读.<div class="cta" tabindex="0">辅助 CTA

</button>

此原则随后延续到屏幕阅读器和其他 增强和替代通信 (AAC) 设备.

在描述子元素时是否应该考虑父元素?如果您在 中嵌套复选框，它们是否允许使用 Space 激活，然后 Enter 应该只影响按钮或两个都?

Disclaimer: I understand that it is not valid HTML. I am trying to understand why is it not allowed?

W3C suggests that an interactive element like button or a mustn't contain another interactive element.

I could find a lot of resources mentioning this rule and some workarounds, also some resources related to how this impacts accessibility and screenreaders, but almost all of those resources talk about the fact that this is a requirement but do not explain why.

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

I wasn't really able to find an explanation for why is it not allowed? does it lead to any usability problems?

This is a related question: Why should interactive element not be used within an anchor?

The accepted answer is satisfactory but is not enough to make this rule a requirement. The described situation can be avoided using proper event handling.

Also, if nested interactive content is invalid, how are we supposed to have something like this:

A card which is clickable as a whole, and also has a clickable secondary CTA inside it. I know a workaround would be to have a primary and secondary CTA inside the card, but shouldn't the above be allowed as well?

Here is a 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;
}

In the above example, I am achieving this by using a clickable div inside the button, but that is not semantic (?) and also functionality wise, it is an interactive element inside another one. I am trying to understand that even if I use this workaround, is it fundamentally wrong to have nested interactive elements? is it a bad design/usability practice?

解决方案

The answer is actually quite simple in principle. When you click on the interactive element inside another interactive element which function should you trigger?

In your example if I click on Secondary CTA should it fire the function for secondary CTA or should it fire the function for the card?

The fiddle below should demonstrate the problem, tab into the first button and press enter, then tab into the CTA and press Enter.

Obviously you could work around this but I think it demonstates the point.

$('.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>

This principle then continues through to Screen Readers and other Augmentative and alternative communication (AAC) devices.

Should they take into account the parent element when describing the child element? Should they allow the use of Space to activate if you nest a checkbox within a <button>, should Enter then affect only the button or both?

这篇关于HTML 验证:为什么将交互式元素放入交互式元素中无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！