Html 在不使用Javascript的情况下，通过键盘将焦点放在tabbable子级上激活父链接？

考虑如下情况：

如果我专注于

并按enter键，我会在主要的桌面浏览器（OS X Yosemite）上看到不同的行为：

• Chrome 54.0.2840.71:父链接未激活。选项卡可分别选择
  和子

• Firefox 48.0.2:
  本身似乎不可选择，但可以激活链接，重点是

• Opera 39.0：与Chrome的性能相同
• Safari 9.1.2：与Firefox一样，
  本身是不可选择的，但是当选择
  时，链接不会被激活

---

既然

不能嵌套，有没有办法让一个聚焦的子元素在没有Javascript的情况下跨浏览器激活父链接？Javascript选项是显而易见的，但我觉得这有点难以置信，因为这么简单的东西需要它。

我认为没有JS就没有办法解决这个问题。 问题是你如何测试什么是重点？ 试试这个：

setInterval(function(){
  console.log(document.activeElement);
},1000);

我已经测试了FF和Chrome，你可以专注于锚和div。。。但是，这种联系只会从锚中触发，这似乎是非常明显的

---

顺便问一下：为什么你甚至需要这个标签索引

任何带有tabindex的元素都被视为

交互式内容

见：

tabindex属性还可以将任何元素转换为交互式内容

这些交互元素不能属于

a[href]

标记

a元素可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容

---

因此，如果没有javascript，您将无法实现这一点，因为这不是您的浏览器正常应该做的事情。

在没有示例或用例的情况下，根据Adam上面的回答，我还想指出，激活链接（直接或间接）仅仅关注其中的任何部分都违反了WCAG 2.0成功标准3.2.1。这是a级项目（意味着您无法通过任何失败的a级测试的AA级合规性）

当任何组件接收到焦点时，它不会启动上下文的更改

“上下文更改”将包括加载新页面/URL

简而言之，HTML规范不仅告诉您不要嵌套交互内容，WCAG还特别禁止仅通过聚焦元素来更改页面

---

简而言之，不要这样做。即使您可以使用JavaScript（我甚至不打算尝试），您的项目也将无法通过基本的可访问性准则（并且违反了某些国家的法律）。这也意味着你正在向你的雇主/客户提起诉讼（假设仅仅制造一个糟糕的、无法访问的用户体验还不够理由）。

有趣！感谢您链接和引用规范。“这不是您的浏览器应该正常执行的事情”-我知道浏览器会阻止

）。由于最新版本没有重新构造，
a>[tabindex]
结构在旧浏览器中有多不安全？我认为您正在试图解决一个不存在的问题。你是否有一个你想要达到的目标的样本页面或描述？在您的示例中，
tabindex
是完全不必要的，因为
将接收焦点，并且没有其他子元素。因此需要一个真实的例子或场景。这里的大图是什么？为什么要尝试嵌套交互元素？你能举例说明这个用户界面在现实世界中可能是什么样子吗？可能还有另一种方法可以得到你想要的最终结果，从而避免这种情况……很抱歉，没有一个非玩具的例子，我正在制作一个更具说明性的例子。在实施的过程中，我发现没有必要这样做。最初，我打算让整个卡片都可以点击，并以“阅读更多”作为鼠标用户的目标——这个链接为屏幕阅读器用户提供了更多的上下文。不过，最后，一个关于“阅读更多”的链接就足够了。如果我将上下文更改绑定到某个“onfocus”事件，我可以将其理解为违反了此规范。按enter键或单击任意聚焦元素时启动上下文更改不是很明显吗？单击（或点击或按enter键）按钮或链接，例如，通常会更改上下文和预期（例外情况是更改现有页面，但也可能是更改上下文）。然而，将焦点放在按钮/链接上不会改变上下文，也不应该改变上下文。在这种情况下，单击图元时是否聚焦该图元没有方向感。考虑两个鼠标和键盘的用户，他们可以在页面中加标签，然后点击其他地方的元素。“把重点放在按钮/链接上，不会改变上下文，也不应该改变。”我完全同意。在这种情况下，关注链接的子元素（参见我问题中的JSFIDLE）不会改变上下文，我也不希望它改变上下文-只需单击、轻敲或按enter键，就像您的标准链接/按钮一样。那么，当父元素已经可以接收焦点时，使子元素可聚焦的目的是什么？我不明白你想达到什么目的，你的问题听起来像是你想让父母在孩子获得注意力时激活。@Alohci，我不知道这与我的答案有什么关系。但是将一个可聚焦的元素放在另一个交互元素中是一个问题。无法访问图像的上下文菜单也是一个问题。您必须整理出一个同时解决这两个问题的接口。
setInterval(function(){
  console.log(document.activeElement);
},1000);