Semantic input message inside label

Question

I use <label>to transfer input so that its success and error messages are displayed inside its label for merging. What do you think is the most meaningful markup for this scenario?

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

strongSuitable for mistakes ? Or is it better span? Does it fit role=status?

Answer 1

WCAG provides an example of error mapping using the aria-invalidand properties aria-describedby.

In your example, the code would look like this:

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

strong , . alert ( status) #error W3C.

Answer 2

.

, - , , .

Answer 3

, ( css). , , , , font-weight:bold; css.

, , Strong , , .

In general, I think that in this case it’s faster, easier and better to use <strong>over <span>.

Answer 4

Strongly good, because "Username is already accepted" is a serious notification, not an accidental one.

Answer 5

I would suggest keeping it a strong tag and also using a red CSS color to display it as an error.