CODEWITHSUNDEEP
htmlformsaccessibilitysemantic-markupwai-aria
ryanve
ryanve

Reputation: 52551

Semantic input error message inside label

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?

Upvotes: 10

Views: 4648

Answers (5)

KimboSlice
KimboSlice

Reputation: 37

I'd suggest to keep it strong tag and also make use of CSS red color to display it as an error.

Upvotes: 1

ChriChri
ChriChri

Reputation: 157

Strong is good because "Username is already taken" is a serious notice rather than a casual one.

Upvotes: 2

RockiRider
RockiRider

Reputation: 109

Technically both elements can be used to create the appropriate looking error message that you are looking for (with the proper css). The most semantic, in my opinion would be to use the Strong tag, purely because I would want to stress the importance of a password being incorrect, without needing to use the font-weight:bold;in css.

Also since the question of accessibility is involved, the Strong tag is better for screen readers and in turn makes it more accessible.

Overall, I think its quicker, easier and better to use <strong>over <span> in this scenario.

Upvotes: 2

Adam
Adam

Reputation: 18855

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.

Upvotes: 10

jeffkmeng
jeffkmeng

Reputation: 879

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.

Upvotes: 2

Related Questions