标签内的语义输入错误消息

Question

我使用<label>元素来包装一个输入框，以便它的成功和错误信息可以出现在标签内以进行关联。在这种情况下，您认为最语义化的标记是什么？

<label>
  <b>Username</b>
  <input>
  <strong>Username already taken :(</strong>
</label>

对于错误信息，使用 strong 标签合适吗？还是 span 更好？使用 role=status 是否合适？

- ryanve

---

您可以对标签的文本使用span标签（因为它已经在标签中），而strong/span/em/i/b不会改变当前屏幕阅读器的任何内容：它将被读取（尽管其中一个元素可能比其他元素具有更好的语义，但SR必须应对目前远非语义化的HTML标记状态）。 - FelipeAls

Answer 1

WCAG提供了一个示例，演示如何使用aria-invalid和aria-describedby属性显示错误。

在您的示例中，代码将是：

<label>
  <b>Username</b>
  <input aria-invalid="true" aria-describedby="error">
  <strong id="error">Username already taken :(</strong>
</label>

强调标签看起来非常重要，适当使用。根据W3C的规定，应该将alert角色（而不是status）应用于#error元素。请注意保留HTML标记。

- Adam

---

使用[aria-describedby]在<label>内部是否会破坏正常的标签语义？根据阅读，我想知道是否将[aria-invalid]与位于label内部的strong结合使用就足够了。 - ryanve

@ryanve aria-describedby 不会影响正常的标签语义，它与使用 aria-labelledby 有所不同。但是，如果 strong 标签在 label 内部，则其内容可能会被添加到标签文本中。当使用 aria-describedby 时，将 strong 标签放在 label 标签外可能是相关的，因为它将区分标签（label 或 aria-labelledby）和描述（aria-describedby）。 - Adam

经过深入挖掘，我发现还有一个更具体的 aria-errormessage 属性，详情请见 https://www.w3.org/TR/wai-aria/states_and_properties#aria-errormessage - ryanve

@ryanve 没有辅助技术的支持 - Adam

谢谢！除了 https://w3c.github.io/using-aria/ 之外，是否有任何类似于 http://node.green 或 caniuse 的格式来获取 ARIA 的兼容性覆盖范围？目前只有 https://caniuse.com/#search=aria。 - ryanve

Answer 2

使用 strong 标签是恰当的。

Strong 标签表示某些内容非常重要，而密码错误是一个重要的问题，因为它会阻止用户继续操作。

- jeffkmeng

Answer 3

从技术上讲，这两个元素都可以用来创建所需的错误消息（使用适当的CSS）。在我看来，最语义化的是使用Strong标签，纯粹是因为我想强调密码不正确的重要性，而无需使用CSS中的font-weight：bold。同时，由于涉及到可访问性的问题，Strong标签对于屏幕阅读器更好，从而使其更易访问。总的来说，在这种情况下，使用比更快、更容易、更好。

- RockiRider

Answer 4

强密码很好，因为“用户名已被使用”是一条严肃的通知而不是随意的提示。

- ChriChri

Answer 5

我建议保留强调标签，并使用CSS红色来显示它作为错误。

- KimboSlice