A visitor completes a form, presses send and discovers that an apparently optional field was mandatory. The error may be fixable, but the page has created avoidable work.
The W3C design system’s form examples place a visible “Required” indication within a field’s label when required and optional fields are mixed. The underlying form also needs appropriate programmatic information; visual styling alone is not enough.
Use words people can interpret
If you use an asterisk, explain it before the fields and ensure it is associated with the relevant label. Do not rely only on red colour. A plain “Required” or “Optional” label is often easier to understand than an unexplained symbol.
Choose a consistent scheme. If nearly every field is required, marking the few optional ones can be clearer, provided the form explains that convention. The important point is that visitors can know the requirement before submitting.
Test the real interaction
- Read the form without colour and check whether requirements remain clear.
- Navigate with a keyboard and inspect the label and focus behaviour.
- Test with a supported screen reader to confirm that required status is conveyed.
- Submit an incomplete test and check that the error identifies the field and how to fix it.
Native HTML validation and server-side validation have different roles. Keep them consistent, and do not assume a client-side attribute is sufficient to validate incoming data securely.
Question the requirement itself
For an invented newsletter form, an email address may be necessary while a telephone number is not. Making the phone field mandatory because the database has a column for it is a design decision that needs justification.
If a field becomes required only after another choice, explain the change where it occurs and preserve the information already entered. Do not make users discover conditional rules through repeated failed submissions.
A required marker is a small promise: this information is necessary, and the form will explain how to provide it. Keep both parts true.