accessibility - 可访问性的占位符文本最佳实践

Question

以下面的标记为例:

<label for="email">Email</label>
<input type="email" placeholder="foo@bar.baz" id="email" />

<label for="cc">Credit card</label>
<input type="input" placeholder="XXXX XXXX XXXX XXXX" id="cc" />

屏幕阅读器会读到诸如“电子邮件字段，foo at bar dot com”、“信用卡 X X X X 空间 X X X X 空间 ...”之类的内容吗？如果是，我想那不是最好的用户体验，最好避免以这种方式使用占位符。是否有指南或示例说明如何向用户提供简短提示，以帮助用户以适用于所有用户的易于理解的格式输入数据？

Answer 1

JAWS 和 NVDA 等屏幕阅读器不会阅读占位符文本，它只是一种视觉添加。

但是，如果您以可视化方式提供重要信息(例如数据输入格式)，则没有理由不将此信息也传达给屏幕阅读器用户。做到这一点的一个好方法是使用屏幕阅读器只读一点文本。使用 CSS 创建一个在视觉上(屏幕外)隐藏文本的类，并将其弹出到您希望读出的范围内。

我在下面使用了出生日期的示例，因为输入日期的格式可能千差万别。信用卡号和电子邮件地址之类的东西是非常标准的，可能不需要提示。

.sr-only {
  position: absolute;
  left: -99999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

<label for="DOB">
  DOB <span class="sr-only">Enter date in the format DD/MM/YYYY</span>
</label>
<input type="text" placeholder="DD/MM/YYYY" id="DOB">