在没有 Javascript 的情况下激活父项 link，键盘焦点在可标记的子项上？

Question

考虑这样的情况 this:

<a href="#">
    <div tabindex="0">Tab focus me, then ⏎</div>
</a>

如果我专注于 <div /> 并按回车键，我会在主要桌面浏览器中获得不同的行为 (OS X Yosemite):

Chrome 54.0.2840.71：父link未激活。 <a /> 和子 <div /> 都可以通过选项卡单独选择。
Firefox 48.0.2: <a /> 似乎不能自己选择，但是 link 可以激活 <div />.
Opera 39.0：与 Chrome 相同的行为。
Safari 9.1.2：与 Firefox 一样，<a /> 本身不可选，但当 <div /> 被选中时，link 不可选 已激活。

既然<a />不能嵌套，有没有什么方法可以让一个焦点子元素在没有Javascript的情况下跨浏览器激活父元素link？ Javascript 选项很明显，但我觉得有点难以置信，这么简单的东西竟然需要它。

Answer 1

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

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

我已经在 FF 和 Chrome 上测试过，你可以专注于锚点和 div ...但是 link 只会从锚点发射，这似乎很明显.

顺便说一句：为什么你甚至需要这个 tabindex ？

Answer 2

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

见： http://w3c.github.io/html/single-page.html#kinds-of-content-interactive-content

The tabindex attribute can also make any element into interactive content.

并且那些交互元素不能属于a[href]标签

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within

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

Answer 3

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

3.2.1: On Focus: Level A

When any component receives focus, it does not initiate a change of context.

"Change of context" 将涵盖加载新的 page/URL.

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

简而言之，不要这样做。即使您可以使用 JavaScript 来完成（我什至不打算尝试），那么您的项目将无法满足基本的可访问性准则（并且违反某些国家/地区的法律）。这也意味着您 employer/client 面临诉讼（假设仅仅制造糟糕、无法访问的用户体验是不够的）。

在没有 Javascript 的情况下激活父项 link，键盘焦点在可标记的子项上？

Activating parent link with keyboard focus on tabbable child without Javascript?

html

accessibility

hyperlink

tabindex