html5 中的占位符和 aria-placeholder 有什么区别？

Question

请问，我需要知道 area-placeholder 和 placeholder 之间的区别？区域占位符何时出现在输入字段中

<input  type="search" placeholder="Search"  aria-placeholder="Search2" />

Answer 1

编辑（添加了更深入的解释）

ARIA 标签用于表达 HTML 无法单独表达的语义，即桥接具有本机 HTML 无法管理的可访问性问题的区域。它的工作原理是允许您指定修改元素转换为可访问性树的方式的属性。

例如，让我们将列表项用作自定义复选框（CSS class 'checkbox' 为元素提供所需的 视觉效果 特征.

<li tabindex="0" class="checkbox" checked>
  Receive promotional offers
</li>

对于有视力的用户，这会很好地工作，但是屏幕 reader 不会指示此元素是一个复选框，因此视力不佳的用户可能会错过此元素。

使用 ARIA 将为元素提供屏幕缺少的信息 reader 以正确解释它。

有很多 ARIA 属性，如果你打算使用它们（你应该！）我建议阅读更多 here

Aria-label 允许我们指定一个字符串作为可访问标签。这会覆盖任何其他本机标签机制，例如标签元素——例如，如果按钮同时具有文本内容和 aria-label，则只会使用 aria-label 值。

占位符是未设置值时出现在表单控件中的文本。 HTML 占位符属性可以为几种 HTML 类型和 .

提供示例值或预期格式的简短描述

如果您使用任何其他元素创建文本框，则不支持占位符。这就是 aria-placeholder 发挥作用的地方。 aria-placeholder 属性可用于定义一个简短的提示，以帮助用户理解当非语义表单控件没有值时期望的数据类型。

    <p 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-placeholder 用于 ，此外， 用于而不是代替标签。它们有不同的用途和不同的功能。标签解释了预期的信息类型。占位符文本提供有关预期值的提示。

ARIA 仅修改元素的可访问性树 以及辅助技术如何向您的用户呈现内容。 ARIA 不会改变元素的功能或行为的任何内容。当未将语义 HTML 元素用于其预期目的和默认功能时，您必须使用 JavaScript 来管理行为。

如需更详细的解释，您可以访问 Mozilla 上的 aria-label 页面

html5 中的占位符和 aria-placeholder 有什么区别？

what is the difference between placeholder and aria-placeholder in html5?

html

placeholder

area