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

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

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

错误是strong合适的？或者是 span更好的？是role=status合适吗？

最佳答案

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 .

关于html - 标签内的语义输入错误消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46656151/