Aria Errors.

Theory. An error must not be only a red color — people with color blindness and screen readers do not see it. You need text next to the field and a programmatic link to it:

- Your own message in an element, for example <p id="email-error">. - aria-invalid="true" on the field when it is invalid. - aria-describedby="email-error" on the field — a screen reader reads the message together with the label. - role="alert" on the message (optional) — announced when it appears.

Small example:

field.setAttribute("aria-invalid", "true");
field.setAttribute("aria-describedby", "email-error");
error.textContent = "Email is required";

When the field becomes valid, remove aria-invalid and clear the text.

Common mistake: a message with color only; aria-describedby pointing at a non-existent id; a message element with no text inside.