Marking Required Fields

Why It Matters

Users need to know which fields are mandatory before they try to submit.

The Pattern

1. Visual: Use text (e.g., "(required)") or an asterisk (*). If using an asterisk, include a legend key.
2. Programmatic: Use the HTML5 required attribute.

<label for="name">
  Full Name <span class="required-indicator" aria-hidden="true">*</span>
</label>
<input type="text" id="name" required />

Most screen readers announce "required" automatically when the attribute is present. The aria-hidden="true" on the asterisk prevents redundant announcements like "Star" or "Asterisk".