如何让NVDA屏幕阅读器不读取input输入框的placeholder属性内容

问题现象 #

• 为input输入框同时设置title和placeholder属性时，NVDA屏幕阅读器会优先读取placeholder内容，之后才读取title属性内容，不符合placeholder仅作为视觉提示的设计预期。
• 已尝试aria-describedby、aria-placeholder属性相关方案均未解决，核心需求为实现placeholder对屏幕阅读器不可见。

问题复现代码 #

<div>
  <input type='text' placeholder='DD.MM.RRRR' title='请按照DD.MM.RRRR格式正确输入日期' />
</div>

可行解决方案 #

方案1：CSS模拟视觉placeholder，移除原生placeholder属性 #

原生placeholder的屏幕阅读器读取行为由浏览器和屏幕阅读器规则共同决定，完全屏蔽读取的最稳定方案是放弃原生placeholder，用CSS实现同等视觉效果：

1. 给input外层包裹定位容器，添加一个视觉悬浮在输入框内的提示元素
2. 给提示元素添加屏幕阅读器专用隐藏类，仅保留视觉展示效果
   示例代码：

<style>
.input-wrap {
  position: relative;
}
.visual-placeholder {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  display: none;
}
/* 输入框为空时显示模拟占位符 */
input:placeholder-shown ~ .visual-placeholder {
  display: block;
}
/* 输入框聚焦或有内容时隐藏模拟占位符 */
input:focus ~ .visual-placeholder,
input:not(:placeholder-shown) ~ .visual-placeholder {
  display: none;
}
/* 屏幕阅读器专用隐藏类 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
</style>
<div class="input-wrap">
  <!-- 原生placeholder留空，避免被屏幕阅读器读取 -->
  <input type='text' title='请按照DD.MM.RRRR格式正确输入日期' placeholder="" />
  <span class="visual-placeholder sr-only">DD.MM.RRRR</span>
</div>

方案2：调整属性优先级覆盖读取规则 #

如果必须保留原生placeholder属性，可通过aria-label强制设置屏幕阅读器读取内容：

<div>
  <input 
    type='text' 
    placeholder='DD.MM.RRRR' 
    aria-label='请按照DD.MM.RRRR格式正确输入日期'
    title='请按照DD.MM.RRRR格式正确输入日期'
  />
</div>

该方案下部分版本NVDA仍会读取placeholder内容，仅作为临时兼容方案使用。

方案3：本地NVDA配置修改（仅针对个人使用场景） #

如果是个人使用NVDA遇到该问题，可直接调整阅读器设置全局屏蔽placeholder读取：

• 打开NVDA设置 → 浏览模式 → 表单字段
• 取消勾选「读取占位符文本」选项即可生效

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