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

Question

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

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

Answer 1

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

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

例如，让我们将列表项用作自定义复选框（CSS 类“复选框”为元素提供了所需的视觉特性。

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

对于有视力的用户，这可以正常工作，但屏幕阅读器不会指示此元素是一个复选框，因此弱视用户可能会错过此元素。

使用ARIA 将为元素提供缺失的信息，以便屏幕阅读器正确解释它。

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

---

Aria-label 允许我们指定一个字符串作为可访问标签。这会覆盖任何其他原生标签机制，例如 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页面