ARIA：aria-placeholder 属性

描述

占位符是当表单控件没有设置值时显示的文本。HTML 的 placeholder 属性允许为几种 HTML <input> 类型和 <textarea> 提供示例值或对预期格式的简要说明。

如果您使用除语义化标签外的其他元素创建 textbox，则 placeholder 不受支持。这时 aria-placeholder 就派上用场了。aria-placeholder 属性可以用来定义一个简短的提示，帮助用户理解在非语义化表单控件没有值时，预期输入什么类型的数据。

html

<span id="date-of-birth">Birthday</span>
<div
  contenteditable
  role="textbox"
  aria-labelledby="date-of-birth"
  aria-placeholder="MM-DD-YYYY">
  MM-DD-YYYY
</div>

占位符提示应在控件的值为空时显示给用户，包括当值被删除时。

注意： ARIA 仅修改元素的辅助功能树，从而影响辅助技术如何向用户呈现内容。ARIA 不会改变元素的任何功能或行为。当不将语义化 HTML 元素用于其预期目的和默认功能时，您必须使用 JavaScript 来管理行为。

aria-placeholder 应与标签一起使用，而不是替代标签。它们有不同的目的和不同的功能。标签解释了期望什么样的信息。占位符文本提供对预期值的提示。

警告： 使用占位符代替可见标签会损害许多用户的可访问性和可用性，包括老年用户以及有认知、行动、精细运动技能和视力障碍的用户。标签更好：它们始终可见，并且提供了更大的可聚焦区域来聚焦控件。占位符有几个缺点：当控件有任何值（包括仅仅是空格）时它们会消失；它们可能让用户误以为值已预先填充；并且默认颜色对比度不足。

注意： 占位符仅应用于显示应输入表单的数据类型示例；它们不能替代正确的标签。