Semantic input error message inside label

Question

I'm using <label> to wrap an input such that its success and error messages can appear inside its label for association. What do you think is the most semantic markup for this scenario?

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

For errors is strong appropriate? Or is span better? Is role=status appropriate?

Answer 1

The WCAG provides an example of error displaying using both aria-invalid and aria-describedby properties.

In your example, the code would be:

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

The strong is appropriate as it appears to be an important notice. An alert role (rather than status) would be more appropriate to be applied to the #error element according to the W3C.

Answer 2

Using a strong tag is appropriate.

Strong tags signify something is of bigger importance, and the password being incorrect is important, as it blocks the user from proceeding.