Bootstrap Accordion内HTML表格表头关联无法被NVDA正确识别

不少做Angular+Bootstrap无障碍适配的开发者都碰到过完全一样的问题：原生语义写得没问题的表格，放在手风琴、标签页这类动态显隐组件里，NVDA就没法正确识别表头关联，本质不是表格代码写错了，是动态组件的ARIA属性和NVDA的解析逻辑冲突导致的。

• Bootstrap Accordion默认靠aria-hidden属性控制折叠内容的可访问性，很多版本存在展开后没有及时把内容容器的aria-hidden从true切回false的bug，NVDA会默认跳过aria-hidden="true"容器内的语义关联计算，只会把内部内容当零散的普通文本播报，不会建立表头和单元格的映射关系
• 部分定制化的Bootstrap主题会给折叠面板容器加role="presentation"或者role="none"，直接打断了原生table的语义树传递，NVDA遍历DOM时没法顺着DOM层级找到对应的表头元素

1. 先修复手风琴组件的ARIA属性逻辑 #

不要完全依赖Bootstrap默认的属性控制，自己绑定手风琴的展开/折叠事件，主动修正属性：

• 折叠状态下：给折叠内容容器加aria-hidden="true"，同时给容器内所有可交互元素加tabindex="-1"，避免键盘焦点误落到隐藏内容上
• 展开动作触发的第一时间：立刻把折叠内容容器的aria-hidden改为false，移除内部可交互元素的tabindex="-1"，不要等折叠展开动画结束再改属性——NVDA会在动作触发后立刻扫描DOM树，动画帧期间拿到错误的aria-hidden值就会错误解析内部内容
• 检查手风琴的标题栏、内容面板容器有没有被额外加role="presentation"/role="none"，如果有直接删掉，保留原生元素的默认角色即可。

2. 给表格加硬关联标识，绕开解析bug #

NVDA在多层嵌套ARIA容器里，对scope属性的识别率本身就不稳定，可以用id+headers做显式硬关联，这种关联方式的解析优先级远高于scope，不会被外层容器的属性干扰：

• 给表头行的每一列<th>绑定唯一ID
• 给表体每一行的行头<th>绑定唯一ID
• 给每个单元格<td>加headers属性，值为当前单元格对应的行头ID+列头ID，用空格分隔
  调整后的表格核心代码如下：

<div class="volume-table">
    <table>
        <caption>Volume Table</caption>
        <thead>
            <tr class="heading-row">
                <td></td>
                <th 
                    scope="col" 
                    *ngFor="let item of columns; let colIdx = index"
                    [id]="'vol-col-' + colIdx"
                >
                    {{ item.name }}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr 
                class="body-row" 
                *ngFor="let item of volumeTableData;let rowIdx = index"
            >
                <th 
                    scope="row"
                    [id]="'vol-row-' + rowIdx"
                >
                    {{ item.name }}
                </th>
                <td 
                    *ngFor="let element of columns; let colIdx = index"
                    [headers]="'vol-row-' + rowIdx + ' vol-col-' + colIdx"
                >
                    {{ item[element.prop] }}
                </td>
            </tr>
        </tbody>
    </table>
</div>

3. 常见避坑点 #

• 不要给<table>、<thead>、<tbody>、<tr>这类原生表格元素加自定义ARIA角色，比如随便加role="grid"反而会破坏原生语义，导致NVDA识别异常
• 检查手风琴展开过程中，有没有给内容容器加临时的无障碍隐藏样式（比如clip: rect(0,0,0,0)、position: absolute把元素移出视口），这类样式存在时NVDA也会把内容判定为不可访问，不做语义关联
• 测试时要切换到NVDA的表格导航模式验证，默认焦点导航模式下NVDA不会主动播报表头关联信息，属于正常现象。

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