不要使用占位符属性

作为 HTML5 规范的一部分引入，占位符属性“表示一个简短的提示（单词或短语），旨在帮助用户在控件没有值时输入数据。 提示可以是样本值或预期格式的简要描述。”

这个看似简单的属性包含大量问题，使其无法兑现其承诺。 希望我能说服你停止使用它。

技术上正确

输入是几乎所有电子商务都必须通过的大门。 不管你对设计中的同理心的感受如何，无用的投入会让钱留在桌面上。

自动可访问性检查软件不会标记占位符属性的存在。 但是，这并不一定意味着它是可用的。 归根结底，可访问性是关于人的，而不是标准的，因此除了通过检查表之外，考虑你的界面是很重要的。

称之为补救、包容性设计、普遍访问等等。 所有这些哲学的精神归结为制造人们——所有人——都可以使用的东西。 从这个镜头来看， placeholder根本站不住脚。

问题

翻译

启动翻译当前页面的请求时，具有自动翻译功能的浏览器（例如 Chrome）会跳过属性。 对于许多属性，这是期望的行为，因为更新的值可能会破坏底层的页面逻辑或结构。

浏览器跳过的属性之一是placeholder 。 因此， placeholder内容将不会被翻译，并将保留为最初创作的语言。

如果有人请求翻译页面，则期望所有可见的页面内容都将更新。 占位符经常用于提供重要的输入格式说明或用于代替更合适的label元素（稍后会详细介绍）。 如果此内容没有与翻译页面的其余部分一起更新，则不熟悉该语言的人很可能无法成功理解和操作输入。

这应该是不使用该属性的足够理由。

虽然我们讨论的是翻译，但同样值得指出的是，位置与语言偏好不同。 许多人将他们的设备设置为使用不是他们浏览器 IP 地址报告的国家官方语言的语言（更不用说 VPN），我们应该尊重这一点。 确保对您的内容进行语义描述——您的邻居会感谢您的！

互操作性

互操作性是使不同系统交换和理解信息的实践。 它是互联网和辅助技术的基础部分。

从语义上描述您的内容使其具有互操作性。 通过以编程方式将label元素与其关联来创建可互操作的input 。 标签描述了输入字段的用途，为填写表单的人提供了他们可以采取行动的提示。 将label与input相关联的一种方法是使用for属性，其值与输入的id匹配。

如果没有这个for / id配对，辅助技术将无法确定输入的用途。 编程关联提供了一个 API 挂钩，可供屏幕阅读器或语音识别等软件使用。 没有它，依赖这个专业软件的人将无法读取或操作输入。

我提到这一点的原因是placeholder经常用于代替label元素。 虽然我个人对这种做法感到困惑，但它似乎已经在设计界获得了关注。 我对其受欢迎程度的最佳猜测是它在放置在其他无标签输入字段旁边时产生的几何精确网格效果，就像设计师猫薄荷一样。

浮动标签效应是这种现象的近亲，通常也使用占位符属性来代替label 。

值得指出的是，如果标签以编程方式与输入相关联，则单击或点击标签文本会将焦点放在输入上。 这个小技巧为与输入交互提供了一个额外的区域，这对有运动控制问题的人来说是有益的。 充当标签的占位符以及浮动标签无法做到这一点。

认识

2016 年美国人口普查列出了近 1500 万报告有认知困难的人——这仅包括选择自我报告的个人。 由此推断，我们可以假设认知可及性问题影响了世界上相当数量的人口。

自我报告值得一提，因为一个人可能不知道，或者不愿意分享他们有认知可及性条件。 不幸的是，披露此类信息仍然存在很多污名，因为它经常影响工作和住房前景等事情。

认知可以在情境中受到抑制，这意味着它很可能发生在你身上。 它可能受到多任务处理、睡眠剥夺、压力、药物滥用和抑郁等因素的影响。 我在这里可能有点厌倦，但这听起来很像你在大多数办公室工作中都能找到的条件。

记起

认知问题的总括包括短期记忆丧失、创伤性脑损伤和注意力缺陷多动障碍等疾病。 它们都会影响一个人回忆信息的能力。

当一个人在输入中输入信息时，其占位符内容将消失。 恢复它的唯一方法是删除输入的信息。 这创造了一种体验，一旦尝试填写输入的人与之交互，指导语言就会被删除。 不是很好！

当你回忆信息的能力受到抑制时，遵循这些消失的规则就会很烦人。 对于需要满足复杂要求的输入（例如创建新密码），它超越了烦恼，成为难以克服的障碍。

虽然技术更成熟的人可能已经学会了一些聪明的技巧，例如剪切输入的信息，查看占位符内容以刷新他们的记忆，然后将其重新粘贴回去进行编辑，但技术知识较少的人可能不明白为什么帮助内容消失或如何将其带回来。

数字素养

考虑到越来越多的世界人口正在上网，我们作为负责任的设计师和开发人员有责任让这些人感到受欢迎。 您的 Internet（或 Intranet！）的小角落很可能是他们第一次在线体验 - 假设最终用户“只会知道”是简单的傲慢。

对于美国读者来说，这是一个温和的提醒，新的可能并不意味着外国。 美国老年人的访问量正在增加。 随着时间的推移，数字素养在老年人中将变得越来越普遍，但可访问性问题也将如此。

对于以前从未遇到过的人来说，占位符文本可能看起来像输入的内容，导致他们跳过输入。 如果它是必填字段，表单提交将造成令人沮丧的体验，他们可能不明白错误是什么，或者如何修复它。 如果它不是必填字段，则您的表单仍然存在无法收集潜在有价值的辅助信息的不必要风险。

效用

占位符帮助内容仅限于一串静态文本，这可能并不总是足以传达消息。 它可能需要应用额外的样式，或包含描述性标记、属性、图像和图标。

这在成熟的设计系统中特别方便。 通过将文本字符串移出输入元素创建的附加样式选项意味着它可以利用系统的设计标记以及使用它们带来的所有好处。

占位符文本的长度也受限于它所包含的输入的宽度。在我们的响应式、移动优先的世界中，很可能会截断重要信息：

想象

颜色对比

占位符内容的主要浏览器默认样式使用浅灰色来直观地传达这是一个建议。 许多自定义输入设计通过采用输入内容的颜色并使其变亮来遵循此约定。

不幸的是，这种技术可能会遇到颜色对比问题。 颜色对比度是通过比较文本的亮度和背景颜色值确定的比率； 在这种情况下，它是输入背景上占位符文本的颜色。

请参阅 Eric Bailey (@ericwbailey) 在 CodePen 上的 Pen Default browser placeholder contrast ratios。

如果占位符内容的对比度太低而无法被感知，这意味着对于成功填写表格至关重要的信息可能无法被视力低下的人看到。 对于最常见的输入字体大小，比例为 4.5:1。

与所有可访问性问题一样，低视力状况可能是永久性的或暂时的、生物性的或环境性的，或两者兼而有之。 生物残疾包括远视、色盲、瞳孔散大和白内障等疾病。 环境条件包括诸如中午太阳的眩光、省电的低亮度设置、隐私屏幕、上次通话时屏幕上留下的油脂和化妆品等情况。

这个比例不是我想任意强加给别人的个人审美偏好。 这是一套精心制定的规则的一部分，有助于确保尽可能多的人能够操作数字技术，无论他们的能力或环境如何。 有意识地忽视这些规则就是同谋实行排斥。

这就是问题所在：在尝试使占位符属性具有包容性时，更新后的高对比度占位符内容颜色可能会变得足够暗以被解释为输入的输入，即使是具有数字素养的人也是如此。 这将问题转回认知问题领域。

高对比度模式

Windows 操作系统包含一项称为高对比度模式的功能。 激活后，它会从一个特殊的高对比度调色板中为界面元素分配新颜色，该调色板使用有限数量的颜色选项。 以下是它的外观示例：

在高对比度模式下， placeholder内容被分配了一种高对比度颜色，使其看起来像预先填充的信息。 如前所述，这可能会阻止人们理解输入可能需要输入信息。

您可能想知道是否可以在高对比度模式下更新样式以使占位符更易于理解。 虽然可以在媒体查询中定位高对比度模式，但我恳请您不要这样做。 前端开发者 Kitty Giraudel 说得最好：

“高对比度模式不再是关于设计，而是严格的可用性。 你应该以最高的可读性为目标，而不是色彩美学。”

依赖高对比度模式的人使用它是因为它的可预测性。 过度改变其呈现内容的方式可能会干扰他们可靠地使用计算机的唯一方式。 在减轻占位符内容的颜色以使其看起来像其非高对比度模式处理的情况下，您冒着使他们无法感知的非常真实的风险。

一个解法

回顾一下，占位符属性：

• 不能自动翻译；
• 经常用于代替标签，锁定辅助技术；
• 输入内容时可以隐藏重要信息；
• 可能颜色太浅而难以辨认；
• 样式选择有限；
• 可能看起来像预先填写的信息并被跳过。

哎呀。 那不是很好。 那么我们能做些什么呢？

设计

将占位符内容移动到输入上方，但在标签下方：

这种方法：

• 传达视觉和结构层次结构：
  • 这个输入是做什么用的，
  • 成功使用输入需要知道的事情，以及
  • 输入本身。
• 可以翻译。
• 看起来不像预先填写的信息。
• 可以在低视力情况下看到。
• 输入内容时不会消失。
• 可以包含语义标记并通过 CSS 设置样式。

此外，当在具有软件键盘的设备上激活输入时，帮助内容将保持可见。 如果放置在输入下方，当屏幕键盘出现在设备视口底部时，内容可能会被遮挡：

发展

以下是将我们设计的示例转换为代码的方法：

 <div class="input-wrapper"> <label for="employee-id"> Your employee ID number </label> <p class="input-hint"> Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>. </p> <input name="id-number" type="text" /> </div>

这与传统的可访问for / id属性配对并没有太大的不同： label元素通过其“employee-id”的id声明以编程方式与input相关联。 放置在label和input元素之间的p元素充当placeholder属性的替代品。

“所以，”你可能想知道。 “为什么我们不把所有占位符替换内容放在label元素中呢？ 看来工作量会少很多！” 答案是开发人员的便利性不应优先于用户体验。

通过使用aria-describedby以编程方式将input与p元素相关联，我们正在为屏幕阅读器创建一个信息优先级，该优先级与没有屏幕阅读器的人浏览的体验相同。 aria-describedby确保p内容将在最后描述，在label的内容和与之关联的输入类型之后。

换句话说，它是输入要求的内容、输入的类型，以及如果您需要的额外帮助——这正是人们在查看表单输入时会体验到的。

用户体验涵盖所有用户，包括那些借助屏幕阅读器进行导航的用户。 如果使用屏幕阅读器的人需要重新引用帮助内容，则帮助内容是独立的并且易于导航。 由于它是一个独立的节点，因此也可以将其静音（通常使用 Control 键），而不会冒使其他重要信息静音的风险。

将帮助内容作为label的一部分包含在内会导致不必要的冗长。 label应该是有意义的，但也要简洁。 向标签添加太多信息可能会产生与预期效果相反的效果，使其太长无法回忆，或者太令人沮丧而无法从头到尾听完。 事实上，Web 内容可访问性指南有专门解决此问题的规则：成功标准 2.4.6 和 3.3.2。

例子

这是在实时代码中实现的解决方案：

请参阅 Eric Bailey (@ericwbailey) 在 CodePen 上的 Pen Don't use the placeholder 属性。

这是一段视频，展示了流行的屏幕阅读器如何处理它：

更好的解决方案

“界面对用户的要求越低，它就越容易访问。”

— 爱丽丝·博克斯霍尔

最后的想法：你甚至需要额外的占位符信息吗？

好的前端解决方案利用特殊的输入属性和适应验证实践，以防止将额外的工作分担给只想以尽可能少的复杂性使用您的网站或应用程序的人。

好的文案会创建清晰简洁地描述输入目的的标签。 在这里做得足够好，标签就会消除歧义，特别是如果您事先对其进行测试。

良好的用户体验就是创建智能流程，通过利用现有信息消除尽可能多的不必要问题，抢占人们的需求、愿望和愿望。

容纳使用您的网站或 Web 应用程序的人意味着对您在浏览 Internet 时认为理所当然的事情持批判态度。 通过不对其他人的情况（包括他们使用的技术）做出假设，您可以尽自己的一份力量来帮助防止被排斥。

花一些时间检查您的设计和代码，看看哪些内容经不起审查——检查您是否使用占位符属性可能是一个不错的起点。

站在巨人的肩膀上。 感谢 Roger Johansson、Adam Silver、Scott O'Hara 和 Katie Sherwin 就该主题撰写的文章。