React中如何让NVDA屏幕阅读器朗读与显示不同文本

核心问题分析 #

你之前的实现无效，主要是两个原因：

1. Label与input未通过htmlFor和id关联，屏幕阅读器无法将两者绑定，导致ARIA属性未生效
2. Fluent UI的Label组件在关联input时，会优先让阅读器读取自身显示文本，直接设置的aria-label会被组件内部逻辑覆盖

可靠实现方案 #

方案1：视觉隐藏辅助文本 + aria-labelledby

该方案保持Label视觉显示"Username"，同时让屏幕阅读器读取隐藏的提示文本，适用于需要Label本身被阅读器识别时也朗读目标内容的场景。

import React from 'react';
import { Label } from '@fluentui/react';

// 自定义视觉隐藏样式（Fluent UI v8可直接用内置的srOnly类，v9用visuallyHidden类）
const srOnly = {
  position: 'absolute',
  width: '1px',
  height: '1px',
  padding: '0',
  margin: '-1px',
  overflow: 'hidden',
  clip: 'rect(0, 0, 0, 0)',
  whiteSpace: 'nowrap',
  border: '0'
};

const MyComponent = () => {
  return (
    <div>
      {/* 仅屏幕阅读器可见的提示文本 */}
      <span id="username-accessible-text" style={srOnly}>Enter your username</span>
      {/* Label关联input，通过aria-labelledby指定朗读文本 */}
      <Label htmlFor="username" aria-labelledby="username-accessible-text">
        Username
      </Label>
      <input type="text" id="username" />
    </div>
  );
};

export default MyComponent;

方案2：直接给input设置aria-label

如果仅需要聚焦输入框时朗读目标文本，Label仅作为视觉标识，可直接给input添加aria-label，同时保持Label与input的关联：

import React from 'react';
import { Label } from '@fluentui/react';

const MyComponent = () => {
  return (
    <div>
      <Label htmlFor="username">Username</Label>
      <input type="text" id="username" aria-label="Enter your username" />
    </div>
  );
};

export default MyComponent;

关键注意点 #

• 绝对不能用display: none或visibility: hidden隐藏辅助文本，这会让屏幕阅读器直接忽略该元素，必须使用仅视觉隐藏的样式
• 始终确保Label与input通过htmlFor和id关联，这是表单元素无障碍访问的基础

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