An error message is user-facing text that explains a validation failure or another problem with a form action or input. It should be recognizable, associated with the field it describes, and hidden until the user has interacted with that control. section 10.8
A practical error-message treatment combines clarity, accessibility, and responsive visual styling:
- Use red text together with an icon, bold weight, or other non-color cue so meaning does not depend on color alone. section 10.8
- Add a consistent icon with the CSS ::before pseudo-element, sizing it with ch and ex units that follow the typeface. section 10.8
- Connect the input to its error container with aria-describedby, and use role="alert" for the message span. section 10.8
- Hide messages by default, then reveal them when a dirty field is invalid; mark the invalid field with the error border color. section 10.8
Name-field validation message
A name input can reference a following error container with aria-describedby="nameError". The container holds a span with role="alert" and text such as “Please let us know who you are.” CSS can hide that span initially and reveal it when the field is both dirty and invalid. section 10.8
Listing 10.19 Error styles
.error {
color: var(--error); #1
margin: .25rem 0 2rem;
}
.error span::before {
content: url('./img/error.svg');
display: inline-block;
width: 1.25ex; #2
height: 1.25ex; #2
vertical-align: baseline; #3
margin-right: .5ch;
}
View the compact CSS pattern for error color, spacing, icon insertion, and typography-relative sizing. section 10.8
Listing 10.21 Error-handling CSS
.error span { display: none; } #1
.dirty:invalid + .error span { #2
display: inline; #2
} #2
:is(input, textarea).dirty:invalid { #3
border-color: var(--error); #3
border-image: none;
} #3
View the CSS that hides messages by default, reveals them for dirty invalid controls, and styles the invalid field. section 10.8
