2

以以下标记为例：

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

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

4

3 回答 3

3

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

于 2018-02-06T22:07:18.213 回答
1

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

在您的示例中，这完全可以。屏幕阅读器用户完全了解电子邮件地址的格式，并且不想听到“ex ex ex ex ex ex ex ex ex ex ex ex ex ex ex ex ex ex ex”。而不是“输入您的信用卡号” （请注意，当您的卡号为 13 位时，不可能将四乘四分组。）

如果你真的要给出提示，你必须在标签中插入它：

有关 W3C 网页的更多信息：

于 2018-02-07T10:57:01.567 回答
0

格式化提示对所有用户都有好处，无论是否有视力障碍。在该字段下方有一个示例并与该字段相关联 usingaria-describedby是我通常的做法。

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="format"/>
<span id='format'>Format: foo@bar.baz</span>
于 2018-02-12T18:53:45.060 回答