如何阻止子元素具备交互性与可聚焦性？

要实现父容器作为可交互按钮，同时让所有子元素完全不可交互（视觉保留，鼠标/键盘/屏幕阅读器都无法触发），可以通过以下两步实现，不需要遍历所有子元素：

1. 用aria-hidden="true"屏蔽子元素的无障碍访问 #

给父按钮内部的直接子容器添加aria-hidden="true"，这会让屏幕阅读器将子元素从无障碍树中移除，彻底避免它们被编程式访问。同时配合你已经用到的pointer-events: none，阻断鼠标交互。

2. 拦截父容器的键盘事件，控制焦点流转 #

当父按钮获得焦点时，监听Tab/Shift+Tab事件，手动将焦点切换到下一个/上一个按钮组件，阻止默认Tab行为导致焦点进入子元素；同时保留Enter和Space键的按钮触发逻辑，符合无障碍规范。

修改后的代码示例 #

CSS（保留原有逻辑）

.focusable {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

.focusable > * {
  pointer-events: none;
}

.focusable:hover {
  background-color: lightgrey;
}

HTML（添加aria-hidden）

<div role="button" tabindex="0" class="focusable" aria-label="Action 0">
  <div aria-hidden="true">
    Some html markup
    <a href="#">Should not be focusable, but should be visible</a>
  </div>
</div>

<div role="button" tabindex="0" class="focusable" aria-label="Action 1">
  <div aria-hidden="true">
    Some html markup
    <input type="text" placeholder="should not be focusable" />
  </div>
</div>

JavaScript（控制键盘焦点）

document.querySelectorAll('.focusable').forEach(button => {
  button.addEventListener('keydown', (e) => {
    // 处理Tab键切换焦点
    if (e.key === 'Tab') {
      const buttons = Array.from(document.querySelectorAll('.focusable'));
      const currentIdx = buttons.indexOf(button);
      const nextIdx = e.shiftKey 
        ? (currentIdx > 0 ? currentIdx - 1 : buttons.length - 1) 
        : (currentIdx < buttons.length - 1 ? currentIdx + 1 : 0);
      
      buttons[nextIdx].focus();
      e.preventDefault(); // 阻止默认Tab行为，避免焦点落入子元素
    }
    // 处理Enter/Space触发按钮点击
    else if (e.key === 'Enter' || e.key === ' ') {
      button.click();
      e.preventDefault();
    }
  });
});

为什么这个方案有效？ #

• aria-hidden="true"直接从无障碍层面隐藏子元素，比单独设置tabindex="-1"更彻底，屏幕阅读器不会再识别到子元素的交互属性。
• 键盘事件拦截确保焦点只会在父按钮之间流转，完全避免子元素获得焦点的可能。
• 只需要给父容器的直接子元素添加属性和监听父元素事件，不需要遍历所有子交互元素，适配你无法控制内部HTML的场景。

内容的提问来源于stack exchange，提问作者neiya