激活父键链接键盘焦点在没有Javascript的可表达孩子？

Question

考虑像this这样的情况：

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

如果我专注于<div />并按Enter键，我会在主要桌面浏览器（OS X Yosemite）中获得不同的行为：

• Chrome 54.0.2840.71：未激活父链接。 <a />和子<div />都可以通过标签单独选择。
• Firefox 48.0.2：<a />似乎无法自行选择，但可以通过关注<div />来激活链接。
• Opera 39.0：与Chrome相同的行为。
• Safari 9.1.2：与Firefox一样，<a />本身不可选，但是当选择<div />时，链接不是激活。

由于<a />无法嵌套，有没有办法让一个有针对性的子元素在没有Javascript的浏览器中激活父链接？ Javascript选项很明显，但我觉得这个简单需要的东西有些令人难以置信。

Answer 1

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

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

  

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

这些互动元素不属于a[href]标记

  

a元素可以包裹整个段落，列表，表格等，甚至整个部分，只要 中没有互动内容

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

Answer 2

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

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

我已经在FF和Chrome上进行了测试，你可以专注于锚点和div ...但链接只会从锚点开始，这似乎很明显。

BTW：为什么你甚至需要这个tabindex？

Answer 3

在没有示例或用例的情况下，并且考虑到Adam的上述答案，我还想指出，通过仅关注其任何部分来激活链接（无论是直接还是间接）是违反WCAG 2.0成功的标准3.2.1。这是一个A级项目（意味着您无法通过任何失败的A级测试的AA级合规性）。

  

3.2.1: On Focus: Level A

     

当任何组件获得焦点时，它不会启动上下文的更改。

“更改上下文”将涵盖加载新页面/网址。

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

简而言之，不要这样做。即使您可以使用JavaScript（我甚至不会尝试），但您的项目将失败基本的可访问性指南（并且在某些国家/地区违反了法律）。这也意味着您正在打开您的雇主/客户诉讼（假设只是制造一个糟糕的，无法访问的用户体验是不够的）。