HTML无障碍问题：屏幕阅读器无法读取更新后的legend内容？

问题分析 #

直接修改<legend>的textContent后，MacOS VoiceOver在Tab切换到表单元素时仍读取旧内容，原因是VoiceOver对<legend>的默认关联存在缓存机制，仅修改文本不会触发无障碍树的即时更新；而aria-live="polite"的作用是实时主动播报内容变化，并非在焦点切换时读取标签，因此无法解决该场景的问题。

解决方案 #

方法1：明确绑定fieldset与legend的关联 #

通过aria-labelledby属性显式将<fieldset>与<legend>绑定，替代默认关联，确保屏幕阅读器每次读取时获取最新的legend内容：

<fieldset aria-labelledby="legend">
    <legend id="legend">content to read</legend>
    <div>
        <input type="radio" name="radio-group" id="radio1">
        <label for="radio1">Radio 1</label>
    </div>
</fieldset>
<button onclick="updateLegend()">Click me to change text</button>

<script>
function updateLegend() {
    const legend = document.getElementById('legend');
    legend.textContent = 'updated text';
}
</script>

方法2：强制刷新无障碍树 #

如果方法1无效，可在更新文本后，通过临时修改并恢复aria-labelledby属性，强制触发浏览器更新无障碍树：

<fieldset aria-labelledby="legend">
    <legend id="legend">content to read</legend>
    <div>
        <input type="radio" name="radio-group" id="radio1">
        <label for="radio1">Radio 1</label>
    </div>
</fieldset>
<button onclick="updateLegend()">Click me to change text</button>

<script>
function updateLegend() {
    const legend = document.getElementById('legend');
    const fieldset = legend.parentElement;
    
    // 更新文本
    legend.textContent = 'updated text';
    
    // 强制刷新无障碍关联
    fieldset.setAttribute('aria-labelledby', '');
    fieldset.setAttribute('aria-labelledby', 'legend');
}
</script>

验证步骤 #

1. 开启VoiceOver，Tab切换到单选按钮，确认初始文本“content to read”被读取；
2. Tab到按钮并点击，修改legend文本为“updated text”；
3. 再次Tab切换到单选按钮，此时应读取更新后的文本“updated text”。

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