如何实现元素被VoiceOver忽略但可被Voice Control识别？

我正在开发一款无障碍工具，其中包含一个切换按钮，鼠标悬停时会弹出更多内容菜单。为适配肢体障碍用户的Voice Control操作，我创建了一个隐藏元素来模拟按钮悬停功能——Voice Control会显示该元素的编号和名称，让用户知晓按钮具备切换和展开菜单两项功能。

但这个方案存在矛盾：虽然解决了Voice Control用户的操作需求，却会干扰VoiceOver（屏幕阅读器）用户。当使用VoiceOver导航键（ctrl + opt + 箭头键）时，焦点会移至这个隐藏元素，导致用户混淆。

POC代码示例 #

HTML代码 #

<html lang="en">
<body>

<div class="parent">
  <button class="button">Button</button>
  <div class="hidden element" role="button"></div>
</div>

</body>
</html>

CSS代码 #

.parent {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

.button{
  width: 40px;
  height: 20px;
  background: green;
  padding: 2px;
  position: relative;
  
}

.hiddenelement{
  width: 1px;
  height: 1px;
  opacity: 0;
 position: absolute;
  left: 0;
  top:0;
  z-index: -1;
  pointer-events: none;
  
  
}

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