无障碍Narrator：ARIA状态变更自动播报异常及内容不符问题求助

问题1：状态播报内容不符合预期 #

• aria-selected 仅适用于<option>、<tab>、<li>等具备可选角色的元素，按钮元素不支持该属性，因此改用它时旁白无播报是正常语义表现。
• 保留aria-pressed作为切换按钮的状态标识，移除多余的aria-roledescription="button"——button元素本身已自带标准角色语义，手动设置会干扰旁白的默认解读逻辑。
• 将aria-roledescription设置为"toggle button"，Windows旁白会针对切换按钮的aria-pressed状态，自动调用本地化的“已选中/未选中”词汇播报，无需硬编码任何状态文本。

问题2：状态变更后旁白不自动播报 #

仅修改ARIA属性不会主动触发旁白的状态更新播报，需通过事件触发辅助技术感知变化：
在变更aria-pressed状态后，手动触发元素的change事件，让旁白重新读取当前按钮状态：

function toggleButtonState() {
    const toggleButton = document.getElementById('toggleButton');
    const isPressed = toggleButton.getAttribute('aria-pressed') === 'true';
    const newState = !isPressed;

    toggleButton.setAttribute('aria-pressed', newState);
    // 触发change事件，通知辅助技术状态已更新
    toggleButton.dispatchEvent(new Event('change', { bubbles: true }));
}

最终完整代码 #

<button id="toggleButton" type="button" aria-pressed="false" aria-roledescription="toggle button" onclick="toggleButtonState()">
    Click Me
</button>

<script>
function toggleButtonState() {
    const toggleButton = document.getElementById('toggleButton');
    const isPressed = toggleButton.getAttribute('aria-pressed') === 'true';
    const newState = !isPressed;

    toggleButton.setAttribute('aria-pressed', newState);
    toggleButton.dispatchEvent(new Event('change', { bubbles: true }));
}
</script>

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