React聊天应用NVDA屏幕阅读器无法读取特定文本问题求助

你的代码里用动态切换aria-live属性的方式没生效，主要有两个原因：

1. NVDA对动态修改aria-live属性的支持不稳定，切换状态可能不会被识别。
2. 当组件首次渲染时就传入目标文本，live region不会触发朗读——因为live region的触发条件是内容发生更新，而非初始渲染时的静态内容。

下面是具体的修复方案：

方案一：类组件版本 #

固定live region的aria-live状态，通过控制内容更新触发朗读：

import React, { Component } from 'react';

class SomeComponent extends Component {
  componentDidUpdate(prevProps) {
    // 仅当文本切换为目标内容时，强制更新组件确保live region捕捉到变化
    if (this.props.text !== prevProps.text && this.props.text === 'some text') {
      this.forceUpdate();
    }
  }

  render() {
    const { text } = this.props;

    return (
      <div>
        {/* 固定aria-live为polite，添加aria-atomic确保读取完整内容 */}
        <div aria-live="polite" aria-atomic="true">
          {text === 'some text' ? text : ''}
        </div>
      </div>
    );
  }
}

export default SomeComponent;

方案二：函数组件版本 #

用useEffect监听文本变化，延迟更新live region内容：

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

const SomeComponent = ({ text }) => {
  const [liveText, setLiveText] = useState('');

  useEffect(() => {
    if (text === 'some text') {
      // 延迟100ms设置内容，给DOM和NVDA足够的响应时间
      const timer = setTimeout(() => {
        setLiveText(text);
      }, 100);
      return () => clearTimeout(timer);
    } else {
      setLiveText('');
    }
  }, [text]);

  return (
    <div>
      <div aria-live="polite" aria-atomic="true">
        {liveText}
      </div>
    </div>
  );
};

export default SomeComponent;

额外注意事项 #

• 确保live region元素在页面初始化时就存在于DOM中，不要动态创建或销毁，NVDA需要初始存在的区域才能监听变化。
• 不要用display: none隐藏live region，可改用visibility: hidden或position: absolute; left: -9999px这类不影响布局但能被屏幕阅读器识别的隐藏方式。
• 测试时确认NVDA处于朗读模式，且页面焦点没有被其他元素抢占。

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