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

Question

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

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

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

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>

这strong是合适的,因为它似乎是一个重要的通知.一个alert角色(而非status)会更合适将被施加到所述#error元件根据W3C.