在 React 中使用 Fluent UI 的 Label 组件时，可通过组合 aria-label 与 aria-hidden="true" 实现屏幕阅读器播报定制化提示（如“Enter your username”），同时保持界面上显示简洁文本（如“Username”）。关键在于隐藏视觉文本的可访问性暴露，避免语义冲突。
在 react 中使用 fluent ui 的 `label` 组件时，可通过组合 `aria-label` 与 `aria-hidden="true"` 实现屏幕阅读器播报定制化提示（如“enter your username”），同时保持界面上显示简洁文本（如“username”）。关键在于隐藏视觉文本的可访问性暴露，避免语义冲突。
在无障碍开发中，aria-label 是覆盖元素可访问名称（accessible name）最直接的方式，但其生效有明确前提：当元素自身无其他可计算的名称来源（如文本子节点、aria-labelledby 引用内容等）时，aria-label 才会被采用。而 Fluent UI 的 组件默认会将子文本内容（如 "Username"）纳入可访问名称计算，导致 aria-label 被忽略——这正是你遇到“aria-label 不生效”的根本原因。
✅ 正确做法是：保留 aria-label 提供语义化播报文本，同时用 aria-hidden="true" 隐藏视觉文本的可访问性暴露，从而让 aria-label 成为唯一的可访问名称来源。
以下是推荐实现方式（适配 Fluent UI v8+）：
import React from 'react';
import { Label } from '@fluentui/react';
const MyComponent = () => {
return (
<div>
<label aria-label="Enter your username">
<span aria-hidden="true">Username</span>
</label>
<input type="text" id="username">
</div>
);
};
export default MyComponent;
? 补充说明与注意事项：
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
- ✅
aria-hidden="true"仅影响辅助技术（如 NVDA、JAWS），不影响视觉渲染，用户仍能正常看到 “Username”； - ✅
aria-label优先级高于aria-hidden内容，确保 NVDA 播报的是"Enter your username"； - ⚠️ 不要对整个
添加aria-hidden="true"—— 这会使整个标签不可访问，破坏表单关联； - ⚠️ 避免仅用 CSS 隐藏文本（如
display: none或visibility: hidden），因为它们会同时移除视觉和可访问性内容； - ✅ 更健壮的替代方案（尤其需支持多语言或动态文案时）：使用
aria-labelledby关联一个隐藏的，例如：
<div> <label id="username-label" aria-labelledby="username-aria-label"></label> <span id="username-aria-label" classname="sr-only">Enter your username</span> <input type="text" id="username" aria-labelledby="username-label username-aria-label"> </div>
配合 .sr-only 样式（视觉隐藏但保留可访问性）：
.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;
}
? 总结：NVDA 等主流屏幕阅读器严格遵循 ARIA 规范的可访问名称计算逻辑。要精准控制播报内容，核心不是“覆盖”，而是“隔离”——通过 aria-hidden="true" 移除干扰源，再用 aria-label 明确定义唯一可访问名称。这一模式同样适用于按钮、图标、自定义控件等场景，是构建高质量无障碍 React 应用的关键实践。
