如何对屏幕阅读器隐藏父元素且不影响子元素的无障碍属性

你遇到的核心问题是aria-hidden属性具备继承性，给父元素设置后所有后代元素都会同步被屏幕阅读器忽略，因此不能直接给父元素加该属性。可以通过以下方式实现需求：

1. 把父元素下的直接文本内容（也就是不属于任何子元素的「Parent Element」文本）单独用span标签包裹，给该span设置aria-hidden="true"隐藏屏幕阅读器对这段文本的识别
2. 给父元素添加aria-label=" "（值为单个空格，避免部分老旧屏幕阅读器忽略空值后 fallback 读取元素内的实际内容）

修改后的代码如下：

<div tabIndex=-1 aria-label=" "> 
     <span aria-hidden="true">Parent Element</span>
     <div>Child 1</div>
     <div tabIndex=-1>
         Child 2
         <div>Child 3</div>
     </div>
 </div>
 <button>Tab Button</button>

效果验证 #

• 父元素tabIndex=-1保留，满足「不可通过Tab访问、支持键盘聚焦」的需求
• 父元素本身无有效可朗读内容，不会被屏幕阅读器识别
• 所有子元素的属性完全没有修改，原有的无障碍能力保留，可正常被屏幕阅读器访问

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