React项目中如何让NVDA屏幕阅读器读取span和p标签内文本？

一、静态文本（span/p）的Tab聚焦与朗读问题 #

核心问题分析 #

• tabIndex="-1"仅支持JS触发聚焦，无法通过Tab键导航；tabIndex="0"虽能进入Tab流，但非交互元素使用会违背WCAG最佳实践（用户易误认为可操作）。

解决方案 #

1. 优先推荐：避免让静态文本进入Tab流

屏幕阅读器用户可通过自身导航快捷键（如NVDA的上下方向键）浏览静态文本，无需强制加入Tab流，这是更符合无障碍规范的做法。

2. 若必须Tab聚焦静态文本

使用tabIndex="0"配合ARIA属性明确元素角色，避免用户误解：

• 添加role="status"告知屏幕阅读器这是静态状态文本；
• 配置aria-label补充朗读内容（或直接依赖元素文本）；
• 增加焦点样式，为视觉用户提供清晰的焦点反馈。

示例代码片段：

<span
  tabIndex="0"
  role="status"
  className="focusable-text"
>
  这是需要Tab聚焦的文本内容
</span>

// 焦点样式
.focusable-text:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

二、输入值纳入屏幕阅读器标签 #

方案1：动态更新aria-label #

实时将输入值整合到输入框的aria-label中，让屏幕阅读器在聚焦输入框时直接读取当前值：

const [inputValue, setInputValue] = useState('');

<input
  type="text"
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
  aria-label={`请输入内容，当前已输入：${inputValue || '无'}`}
/>

方案2：使用aria-live实时播报 #

通过隐藏的实时区域，在输入值变化时自动向屏幕阅读器播报更新内容，适合需要实时反馈的场景：

const [inputValue, setInputValue] = useState('');

<input
  type="text"
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
  aria-label="请输入内容"
/>

{/* 仅屏幕阅读器可见的实时区域 */}
<div aria-live="polite" className="sr-only">
  {inputValue ? `输入已更新：${inputValue}` : ''}
</div>

// 隐藏样式
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

完整React组件示例 #

import { useState } from 'react';

const AccessibleDemo = () => {
  const [inputValue, setInputValue] = useState('');
  const [statusMsg, setStatusMsg] = useState('未提交任何内容');

  const handleSubmit = () => {
    setStatusMsg(`已提交内容：${inputValue || '空'}`);
  };

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        aria-label={`设置提交内容，当前输入：${inputValue || '无'}`}
        style={{ marginRight: '10px' }}
      />

      <button onClick={handleSubmit}>提交</button>

      <div style={{ marginTop: '15px' }}>
        <span
          tabIndex="0"
          role="status"
          className="focusable-text"
          style={{ display: 'block', marginBottom: '10px' }}
        >
          {statusMsg}
        </span>

        <p
          tabIndex="0"
          role="status"
          className="focusable-text"
        >
          这是一段辅助说明文本，支持Tab聚焦朗读
        </p>
      </div>

      <div aria-live="polite" className="sr-only">
        {inputValue ? `输入内容更新为：${inputValue}` : ''}
      </div>
    </div>
  );
};

// 注入样式
const styleSheet = document.createElement('style');
styleSheet.textContent = `
.focusable-text:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
`;
document.head.appendChild(styleSheet);

export default AccessibleDemo;

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