Android Talkback重复读取输入框placeholder问题解决方案咨询

针对你遇到的Android Talkback先读输入框placeholder、再读输入文本导致重复播报的问题，以下是几种可行的前端解决方案：

方案1：利用原生Placeholder特性（推荐） #

如果输入框的内容与placeholder重复是因为设置了不必要的默认值，直接移除输入框的value属性，依赖原生placeholder的行为：

<label id="label-id" for="input-id">some description</label>
<input id="input-id" aria-labelledby="label-id" placeholder="hello">

原生输入框在有内容时会自动隐藏placeholder，Talkback只会播报标签和输入内容；无内容时播报标签和placeholder，从根源避免重复。

方案2：用Aria标签强制仅读Placeholder #

若需要保留输入框内容但让Talkback只播报placeholder，可移除aria-labelledby，改用aria-label直接设置placeholder文本，并视觉隐藏不需要播报的原标签：

<!-- 视觉隐藏标签，不干扰屏幕阅读器播报 -->
<label id="label-id" for="input-id" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;">some description</label>
<input id="input-id" aria-label="hello" placeholder="hello" value="hello">

此时Talkback会优先读取aria-label的内容，不会重复播报输入框的value。

方案3：Contenteditable元素配合Aria-hidden #

如果前两种方法无效，可改用contenteditable元素，将输入内容放在aria-hidden="true"的容器中，用aria-label指定播报的placeholder文本：

<div 
  contenteditable="true" 
  aria-label="hello"
  style="border:1px solid #ccc; padding:8px; min-height:20px;"
>
  <span aria-hidden="true">hello</span>
</div>

这种方式下，视觉上正常显示输入内容，屏幕阅读器仅读取aria-label设置的placeholder文本，完全忽略输入内容。

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