Internet Explorer下JAWS屏幕阅读器无法读取带tabindex="0"的标题问题

问题根因 #

IE搭配JAWS的组合对原生标题元素添加tabindex="0"后的焦点朗读逻辑存在兼容性缺陷，你当前代码里给<h3>额外添加的role="heading"、aria-level="3"属于冗余属性（原生<h3>自带对应语义），反而会进一步干扰JAWS的内容解析逻辑。

可行修复方案 #

1. 先清理冗余属性，删除<h3>上多余的role="heading"和aria-level="3"，降低解析干扰。
2. 给<h3>内部文本包裹的<span>添加唯一ID，同时给<h3>添加aria-labelledby属性指向该span的ID，强制JAWS将焦点元素和内部文本做关联，不会在其他屏幕阅读器上产生重复朗读问题。
3. 补充展开状态的无障碍属性：给<h3>添加动态切换的aria-expanded属性（展开时为true，收起时为false），给描述区域的外层div添加对应切换的aria-hidden属性（展开时为false，收起时为true），进一步辅助屏幕阅读器识别交互状态。

修改后的参考代码如下：

<div class="card container">
    <div class="card">
        <div class="content">
            <h3 tabindex="0" aria-labelledby="heading1" aria-expanded="false">
                <span id="heading1">
                    Heading Text 1
                </span>
            </h3>
            <div aria-hidden="true">
                <span>
                    Description text
                </span>
            </div>
        </div>
    </div>
    <!-- 其余卡片结构同理，注意各个标题对应的ID要唯一不重复 -->
    <div class="card">
        <div class="content">
            <h3 tabindex="0" aria-labelledby="heading2" aria-expanded="false">
                <span id="heading2">
                    Heading Text 2
                </span>
            </h3>
            <div aria-hidden="true">
                <span>
                    Description text
                </span>
            </div>
        </div>
    </div>
</div>

额外兼容方案 #

如果上述方案依然不生效，可以尝试给<h3>添加role="group"属性，该属性不会覆盖原生的标题语义，同时能触发JAWS对可聚焦容器的内容朗读逻辑。

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