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

Question

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

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

错误strong是否合适？或span更好？ role=status是否合适？

Answer 1

使用aria-invalid和aria-describedby属性显示

The WCAG provides an example错误。

在您的示例中，代码为：

<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 2

使用强标签是合适的。

强标记表示某些内容更重要，密码错误很重要，因为它会阻止用户继续操作。

Answer 3

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

此外，由于涉及可访问性问题，强标记更适合屏幕阅读器，从而使其更易于访问。

总体而言，我认为在此方案中使用<strong>而不是<span>更快，更轻松，更好。

Answer 4

强是好的，因为＆＃34;用户名已被采取＆＃34;是一个严肃的通知，而不是一个随意的通知。

Answer 5

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