aria-placeholder

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 与标签一起使用,而不是代替标签。它们具有不同的用途和不同的功能。标签解释了期望哪种信息。占位符文本提供了有关预期值的提示。

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

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

<string>

在控件没有值时显示的单词或短语。

关联接口

Element.ariaPlaceholder

ariaPlaceholder 属性(Element 接口的一部分)反映了 aria-placeholder 属性的值。

ElementInternals.ariaPlaceholder

ariaPlaceholder 属性(ElementInternals 接口的一部分)反映了 aria-placeholder 属性的值。

关联角色

用于角色

继承到角色

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-placeholder

另请参阅