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创建一个类，它可以直观地隐藏文本（屏幕外），并将其弹出到您想要读出的范围内。

我在下面使用了出生日期的示例，因为输入日期的格式可能会有很大差异。信用卡号码和电子邮件地址等标准非常标准，可能并不需要提示。

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

占位符文本必须被视为纯粹的装饰元素。屏幕阅读器可能无法读取它。

在你的例子中，这是完全可以的。屏幕阅读器用户完全知道电子邮件地址的格式，并且不想以“除前例为例”前例，例如前例。而不是“输入您的信用卡号码”（请注意，当您的卡号为13位时，无法将4乘4分组。）

如果你真的需要提示，你必须将它插入标签：

有关W3C网页的更多信息：

Answer 3

格式化提示适用于所有用户，无论是否视觉障碍。在字段下面有一个示例，并使用aria-describedby与字段相关联，这就是我通常的做法。

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="format"/>
<span id='format'>Format: foo@bar.baz</span>

可访问性的占位符文本最佳做法

3 个答案: