html - 创建现代形式、可访问等的最佳实践是什么？特别是，标签与占位符之争

Question

我正在寻求建议和反馈，因为我无法决定要走的路。

我正在构建 HTML5 表单，我希望它们尽可能易于使用。 这就是为什么我总是使用标签来解释在字段中输入的内容，并使用占位符作为具有良好格式的值的示例。

所以，我的代码总是这样的:

<form>
    <fieldset>
        <p>
            <label for="origin-field">Please enter your origin address</label>
            <input type="text" name="origin" id="origin-field" placeholder="23th Street, New York City" required />
        </p>
        <p>
            <label for="destination-field">Please enter you destination address</label>
            <input type="text" name="destination" id="destination-field" placeholder="Ashbury Street, San Francisco" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

此代码可访问，标签使用 for 属性链接到输入，简而言之，它尊重最佳实践。它还有其他 UX 优势:如果用户点击输入然后分心，标签总是显示在它旁边，可以很容易地提醒他们输入正在等待什么信息。

但是，我的产品负责人和我的设计师非常希望我删除标签并改用占位符，所以代码将是

<form>
    <fieldset>
        <p>
            <input type="text" name="origin" id="origin-field" placeholder="Origin address" required />
        </p>
        <p>
            <input type="text" name="destination" id="destination-field" placeholder="Destination address" required />
        </p>
    </fieldset>
    <p>
        <input type="submit" />
    </p>
</form>

这两个论点是，它在屏幕上占用的空间更少/更美观，而且，用户将示例值误认为是他们本可以输入的内容，并且不明白为什么该字段不为空(这当然是对比问题，占位符是浅灰色的，不应该被误认为是真正的值(value)，深黑色，但是嗯，根据 PO，他们确实如此)。

我该怎么办？我应该努力在设计中保留标签吗？如果我在标签上放一个 display: none ，屏幕阅读器还能读取它吗？我应该放一个 position: absolute;左:-9999px； top: -9999px; 而不是？

当前的最佳做法是什么？

Answer 1

official spec对于 placeholder 属性，特别指出要不将占位符用作标签。

Warning! Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control

占位符文本存在很多问题:

• 文本可能会被误认为是已经输入的内容
• 文字不足color contrast
• 当输入框获得焦点时文本消失

其中很多是认知问题，这是一个huge area在可访问性方面。 即使所有这些原因看起来都很“愚蠢”，因为您永远不会遇到任何这些问题，您也不是每个人的代表性样本。

一些替代方案是让“ float ”标 checkout 现在输入字段“内部”，但当该字段获得焦点时，标签会漂浮在字段外。 Brad Frost有一个非常好的例子。 CSS-Tricks有一个，但我不喜欢美学(但你当然可以调整它)。要查看实例，Discover Card在他们的登录区域使用它们。

如果您希望说明文本与输入字段相关联，例如显示日期格式(mm/dd/yy vs ddmmmyy vs 其他格式)或电子邮件格式或电话号码格式等，文本应该在屏幕并与字段分开，但通过 aria-describedby 属性与字段相关联。例如:

<label for="phone">Phone number</label>
<input id="phone" aria-describedby="info">
<span id="info">(xxx)-xxx-xxxx</span>

当然，从一般的用户体验角度来看，您不应该有用户可以键入无效文本的输入字段。您应该尝试找出他们输入的内容并为他们格式化。有很多电话号码算法可以让用户输入他们想要的任何格式，或者让他们以任何格式输入日期(虽然像 1/2/18 这样的东西很难决定是 1 月 2 日还是 2 月 1 日，但是使用地点可以提供帮助)，或使用“选择器”小部件来选择日期或国家或其他任何内容。