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

Question

我正在使用 <label> 包装输入，以便其成功和错误消息可以显示在其标签内以进行关联。您认为这种情况下最语义化的标记是什么？

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

对于错误 strong 合适吗？还是 span 更好？ role=status合适吗？

Answer 1

使用强标签是合适的。

强标签表示更重要的事情，密码不正确很重要，因为它会阻止用户继续操作。

Answer 2

从技术上讲，这两个元素都可用于创建您正在寻找的适当外观的错误消息（使用适当的 css）。在我看来，最语义化的是使用 Strong 标签，纯粹是因为我想强调密码不正确的重要性，而不需要使用 font-weight:bold;in css。

另外由于涉及到无障碍的问题，Strong标签对屏幕阅读器来说更好，进而更易于阅读。

总的来说，我认为在这种情况下 <strong> 比 <span> 使用起来更快、更容易、更好。

Answer 3

The WCAG provides an example 使用 aria-invalid 和 aria-describedby 属性显示错误。

在您的示例中，代码为：

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

strong 是合适的，因为它看起来是一个重要的通知。 alert 角色（而不是 status）更适合应用于 #error 元素 according to the W3C.

Answer 4

强是好的，因为"Username is already taken"是一个严肃的通知，而不是一个随意的通知。

Answer 5

我建议保留强标签并使用 CSS 红色将其显示为错误。

Semantic input error message inside label