Why is colour alone not enough to mark a required field?

WCAG 1.3.3 Sensory Characteristics forbids conveying meaning through colour, shape or location alone. A red label is invisible to a colour-blind user and to a screen reader, so the requirement must also appear as text such as an asterisk or the word required.

Is an asterisk on its own acceptable?

An asterisk works as a text indicator, but you should also include a legend near the top of the form explaining that an asterisk means required. The asterisk character is announced by some screen readers as star, so the legend gives it meaning.

What is the difference between the required attribute and aria-required?

The native required attribute both triggers browser validation and exposes the required state to assistive technology. aria-required equals true only exposes the state without native validation. This tool treats either as marking the field required.

Does this tool check that the required state is announced?

It reports whether each field has the required attribute or aria-required equals true, which is what exposes the state to screen readers. It separately checks the label text for a visible indicator, because both the programmatic state and the visible text matter.

Does my form data get uploaded?

No. The HTML you paste is parsed entirely in your browser using the built-in DOM parser. Nothing is sent to a server, so it is safe to paste markup from internal or pre-release pages.

Required Field Indicator Checker

Required fields must be obvious to everyone, not just to sighted users who can see a red label or a coloured star. WCAG 1.3.3 and 3.3.2 require that the “this field is required” message reach users through text, so it survives colour blindness, high-contrast modes and screen readers. This tool scans a pasted form and reports, field by field, whether the required state is communicated in text.

How it works

The tool parses your HTML with the browser’s own DOM parser and collects every input, select and textarea that is marked required — either with the native required attribute or with aria-required="true". Hidden fields and buttons are skipped.

For each required field it locates the associated label by for/id association, by a wrapping label, or by an aria-label. It then checks the label text for a recognised indicator:

An asterisk character.
The word required (any case).
The word mandatory (any case).

A field passes only when it is exposed as required programmatically and its label carries one of these text indicators. A field with a coloured label but no text token fails, which is the exact colour-only failure WCAG 1.3.3 targets.

Example

<label for="email" style="color:red">Email</label>
<input id="email" type="email" required>

This fails: the field is required and the label is styled red, but a colour-blind or screen-reader user gets no text signal. Changing the label to Email * (plus a legend explaining the asterisk) passes.

Tips and notes

Add a single explanatory legend such as “Fields marked with an asterisk are required” once per form, then reuse the asterisk on each field.
Keep the asterisk inside the label element so it is part of the accessible name, not a separate decorative span hidden from assistive technology.
Pair the visible indicator with the native required attribute wherever possible so browser validation and assistive technology stay in sync.
All parsing is local to your browser; nothing you paste leaves the page.