如何隐藏MUI TextField标签同时支持无障碍访问与测试？

要同时满足MUI TextField的无障碍要求，又不让label悬浮占用布局空间，你可以通过视觉隐藏label元素但保留其在DOM中的存在来实现，具体有两种可靠方式：

• 方式一：自定义内联样式隐藏label
  给InputLabelProps设置绝对定位、透明度为0并禁用指针事件，这样label既不会显示，也不会占用布局空间，但无障碍工具依然能识别到：

  <TextField
    variant="standard"
    value="sample"
    label="thought title"
    InputLabelProps={{
      sx: {
        position: 'absolute',
        opacity: 0,
        pointerEvents: 'none',
      },
    }}
  />
  

• 方式二：使用MUI内置的视觉隐藏工具类
  MUI提供了visuallyHidden样式工具，可以直接复用这套经过验证的无障碍隐藏方案：

  import { visuallyHidden } from '@mui/system';
  
  <TextField
    variant="standard"
    value="sample"
    label="thought title"
    InputLabelProps={{
      sx: visuallyHidden,
    }}
  />
  

方案优势说明 #

• 规避display: none的缺陷：部分无障碍工具会忽略display: none的元素，而绝对定位+透明的方式不会被无障碍引擎排除；
• 比单独用aria-label更稳定：React Testing Library和VoiceOver对真实关联的label识别优先级更高，能确保无障碍名称被正确读取；
• 完全不干扰页面布局：label元素脱离文档流且视觉透明，不会占用任何实际布局空间。

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