Accessibility Improvement: Required Field Indication in Forms

Release: v1.0.470
Control: A11Y-21
WCAG Criterion: 3.3.2 — Labels or Instructions
Affected component: ManualTransactionForm

Background

The ManualTransactionForm allows users to manually record transactions against their property or self-employment income. Required fields in this form were marked with a red asterisk (*) for sighted users, but the asterisk had no programmatic meaning attached to it. This created a gap for users relying on screen readers or other assistive technologies (AT).

Depending on AT configuration, the asterisk character was either announced verbatim (e.g. "Date asterisk") or silently ignored — in neither case was the field's required status communicated in a meaningful way.

What Changed

Form-level instruction (hidden from visual display)

A screen-reader-only paragraph has been added at the top of the form. This gives AT users upfront context before they begin navigating fields:

<p className='sr-only'>Fields marked with an asterisk (*) are required.</p>

This text is visually hidden using Tailwind's sr-only utility class and has no effect on the visual layout.

Per-label required annotation

Each required field label now carries two additions:

aria-hidden='true' on the visual asterisk — prevents the * character from being read aloud by screen readers.
A sr-only span reading (required) — provides an explicit, unambiguous required indicator to AT users.

<label className='block text-xs font-medium text-muted-foreground uppercase tracking-wide'>
  Date <span className='text-destructive' aria-hidden='true'>*</span>
  <span className='sr-only'>(required)</span>
</label>

Why This Matters

Scenario	Before	After
Screen reader reads label	"Date asterisk" or "Date"	"Date (required)"
Form entry point	No instruction about asterisk meaning	"Fields marked with an asterisk () are required."* announced
Visual appearance	Red asterisk shown	Red asterisk shown (unchanged)
WCAG 3.3.2 compliance	❌ Partial	✅ Compliant

Alternative Approach

As an alternative to the visual asterisk + sr-only pattern, fields can use the native HTML required attribute combined with aria-required='true' on the input element. This relies on the browser and AT to communicate the required state without any custom labelling:

<input
  type='date'
  required
  aria-required='true'
  ...
/>

Both approaches satisfy WCAG 3.3.2. The sr-only label pattern was chosen for this release to preserve the existing visual design and form structure.

Affected File

src/app/dashboard/transactions/manual-transaction-form.tsx