React状态更新后如何强制屏幕阅读器聚焦并重读可访问元素

首先先修正原示例代码的几个基础错误：

• Web端React不存在accessibilityLabel属性，这是React Native的专属API，Web环境下需要使用标准WAI-ARIA属性实现读屏识别
• 不要用无语义的<div>绑定点击事件做交互按钮，直接使用原生<button>元素，会自动获得键盘聚焦、回车/空格触发、读屏识别为按钮的能力，无需额外补全无障碍属性
• JSX里插值使用单大括号即可，原示例中<p>标签内的{{ counter }}写法有误，会直接渲染对象报错

方案1：ARIA实时区域（官方推荐，无操作打断） #

这是W3C WAI-ARIA规范定义的标准方案，不需要强制移动用户的读屏焦点，屏幕阅读器会自动监听标记了实时区域属性的元素内容变化，在不打断用户当前操作的前提下自动播报更新内容，适合90%以上的状态通知场景。

实现要点： #

• 给需要播报内容的元素添加aria-live属性，根据优先级选择取值：
  • polite：礼貌模式，等用户当前操作、当前读屏内容播报完成后再念更新内容，普通状态提示都用这个值
  • assertive：强制模式，立刻打断当前读屏内容播报更新，仅用于错误提示、高危操作提醒这类极高优先级场景
• 实时区域必须在页面初始加载时就存在于DOM中，不要动态挂载/卸载该元素，否则旧版NVDA、VoiceOver等读屏工具会无法识别内容变化

代码示例： #

import { useState } from 'react';

const Home = () => {
    const [counter, setCounter] = useState(0);

    return (
        <>
            <p aria-live="polite">{counter}</p>
            <button onClick={() => setCounter(prev => prev + 1)}>
                增加计数
            </button>
        </>
    )
}

这个写法下，每次counter值变化，<p>标签内容更新后，读屏会自动播报新的数值，用户的焦点仍然停留在刚才点击的按钮上，不会干扰正常操作流。

方案2：主动聚焦目标元素（仅用于强交互场景） #

如果业务确实要求状态更新后，将读屏焦点直接移动到计数元素位置（比如表单提交错误后直接定位到错误提示位），可以用JS主动触发元素聚焦，读屏会在元素获得焦点时自动朗读内容。

实现要点： #

• 给目标元素添加tabindex="-1"：让原本不属于焦点序列的<p>元素可以通过JS主动触发聚焦，但不会出现在Tab键的正常焦点遍历列表里，不会破坏键盘导航逻辑
• 用useRef绑定目标DOM元素
• 通过useEffect监听状态变化，状态更新后调用DOM元素的focus()方法触发聚焦

代码示例： #

import { useState, useRef, useEffect } from 'react';

const Home = () => {
    const [counter, setCounter] = useState(0);
    const counterRef = useRef<HTMLParagraphElement>(null);

    useEffect(() => {
        // counter更新后主动聚焦到元素
        counterRef.current?.focus();
    }, [counter]);

    return (
        <>
            <p 
                ref={counterRef} 
                tabIndex={-1}
                role="status"
            >
                {counter}
            </p>
            <button onClick={() => setCounter(prev => prev + 1)}>
                增加计数
            </button>
        </>
    )
}

注意：不要滥用主动聚焦方案。随意移动读屏焦点会让用户迷失当前操作位置，比如用户点击按钮后焦点突然跳走，会严重破坏读屏用户的使用体验。只有当更新内容需要用户立刻关注、且后续操作需要围绕该元素开展时，才适合用这个方案。

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