如何让屏幕阅读器先读Live-region文本，后读按钮aria-label

问题描述 #

我添加了一个设置了aria-label属性并绑定点击事件的按钮，代码如下：

<button onClick: toggleFavourite(),
        aria-label = "favourite button label">
</button>

在JavaScript中，我编写了toggleFavourite方法，点击按钮时该方法会创建一个div并添加到页面中，为其设置aria-live="assertive"属性，代码如下：

toggleFavourite(): void {
        var el = document.createElement("div");
        var id = "speak-" + Date.now();
        el.setAttribute("id", id);
        el.setAttribute("aria-live", "assertive");
        el.classList.add("visually-hidden");
        document.body.appendChild(el);
        var newelem = document.getElementById(id);
        setTimeout(() => {
            if (newelem != null) {
                newelem.innerHTML = "this label should be read first";
            }
        }, 100);

        setTimeout(() => {
            if (newelem != null) {
                document.body.removeChild(newelem);
            }
        }, 1000);
    }

尝试上述方案后，屏幕阅读器仍先读取按钮的aria-label，再读取toggleFavourite方法中设置的文本。请问如何调整读取顺序，让方法中的文本被优先读取？

解决办法 #

1. 移除按钮点击后的焦点 #

点击按钮后，屏幕阅读器默认会聚焦按钮并读取其aria-label，可以通过移除焦点打断这个行为：

<button onClick="toggleFavourite(event); event.target.blur();"
        aria-label="favourite button label">
</button>

或者在方法内处理：

toggleFavourite(event): void {
    event.target.blur(); // 移除按钮焦点
    // 原有的live区域创建代码...
}

2. 取消live区域内容的延迟设置 #

当前代码用setTimeout延迟100ms更新内容，这会让屏幕阅读器先处理按钮的焦点读取。直接设置内容即可：

toggleFavourite(): void {
    var el = document.createElement("div");
    var id = "speak-" + Date.now();
    el.setAttribute("id", id);
    el.setAttribute("aria-live", "assertive");
    el.classList.add("visually-hidden");
    // 添加到DOM前就设置内容
    el.innerHTML = "this label should be read first";
    document.body.appendChild(el);

    setTimeout(() => {
        if (el != null) {
            document.body.removeChild(el);
        }
    }, 1000);
}

3. 为live区域添加aria-atomic="true" #

这个属性会让屏幕阅读器优先读取live区域的完整内容，忽略局部变化，提升其读取优先级：

el.setAttribute("aria-atomic", "true");

4. 临时清空按钮的aria-label（可选） #

如果上述方法无效，可以临时清空按钮的标签，读取完成后恢复：

toggleFavourite(event): void {
    const btn = event.target;
    const originalLabel = btn.getAttribute("aria-label");
    btn.setAttribute("aria-label", ""); // 清空标签

    // 创建并设置live区域代码...

    setTimeout(() => {
        btn.setAttribute("aria-label", originalLabel); // 恢复原标签
    }, 1000);
}

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