如何保留输入框placeholder可见文本的同时屏蔽屏幕阅读器的占位提示朗读

解决方案 #

方案1：使用aria-labelledby显式指定朗读内容（改动最小） #

ARIA 规范中，aria-labelledby 指向的标签内容朗读优先级高于原生 placeholder，你只需要给每个输入框添加该属性关联对应的 label 即可，屏幕阅读器会直接读取关联标签的内容，跳过 placeholder 的冗余提示，同时保留 placeholder 的视觉显示效果。
修改后的代码如下：

<fieldset class="about">
          <legend>About you</legend>
          <label id="name-label" for="name">Enter your name</label>
          <input id="name" name="name" type="text" placeholder="enter your name" aria-labelledby="name-label">
          <label id="email-label" for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="Enter your email" aria-labelledby="email-label">
          <label id="age-label" for="number">Age</label>
          <input id="number" name="number" type="number" min="10" max="100" placeholder="Age" aria-labelledby="age-label">
</fieldset>

注意：你原来的年龄输入框代码里type="number少了闭合引号，上面的代码已经修正。

方案2：CSS模拟视觉占位符（兼容性最佳） #

如果需要兼容老旧版本的屏幕阅读器，可以直接移除原生 placeholder 属性，用普通元素模拟视觉占位效果，屏幕阅读器无法识别到模拟的占位符文本，自然不会产生冗余朗读。
实现代码如下：
HTML结构：

<fieldset class="about">
  <legend>About you</legend>
  <div class="input-group">
    <label id="name-label" for="name">Enter your name</label>
    <div class="input-wrap">
      <input id="name" name="name" type="text">
      <span class="placeholder-text">enter your name</span>
    </div>
  </div>
  <!-- 其他输入框结构同理 -->
</fieldset>

CSS代码：

.input-wrap {
  position: relative;
  margin-top: 4px;
}
.input-wrap input {
  padding: 6px 8px;
  width: 240px;
}
.placeholder-text {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s opacity;
}
/* 输入框聚焦或已有输入内容时隐藏占位符 */
.input-wrap input:focus + .placeholder-text,
.input-wrap input:not(:placeholder-shown) + .placeholder-text {
  opacity: 0;
}

避坑说明 #

你之前的尝试存在两个问题：

• 给输入框加aria-hidden="true"会让整个输入框被屏幕阅读器忽略，无法正常识别表单控件
• 同一个字段做两个输入框会导致表单提交重复值，同时干扰键盘聚焦逻辑，不建议使用

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