Accessibility Fix: Screen-Reader-Friendly Required Fields in the Manual Transaction Form

Release: v1.0.469 · Issue: A11Y-21 · WCAG criterion: 3.3.2 — Labels or Instructions

Background

The Manual Transaction Form lets you record income and expenses directly in the dashboard without importing from a bank feed or property management integration. Every required field — Date, Description, Amount, and HMRC Category — was marked with a red asterisk (*) for sighted users.

Before this release, that asterisk was a plain <span> element with no accessibility annotation. Depending on the assistive technology (AT) and its configuration, a screen reader would either:

• Announce the raw asterisk character — "Date star" — which is confusing and non-standard, or
• Skip it entirely, leaving the user with no indication that the field is mandatory.

There was also no form-level instruction explaining the asterisk convention, in violation of WCAG 2.1 Success Criterion 3.3.2.

What Was Fixed

1. RequiredAsterisk helper component

A new internal component replaces every bare asterisk span in the form. It renders two adjacent elements:

function RequiredAsterisk() {
  return (
    <>
      {/* Visible asterisk — hidden from screen readers */}
      <span className="text-destructive" aria-hidden="true">
        *
      </span>
      {/* Announced by AT in place of the asterisk */}
      <span className="sr-only">(required)</span>
    </>
  );
}

• The visual * carries aria-hidden="true" so AT ignores the raw character.
• The sr-only (required) sibling is invisible on screen but read aloud by screen readers, producing natural announcements such as "Date (required)".

2. Form-level instruction

A visually-hidden paragraph is inserted as the first child of <form>. Screen readers encounter it before tabbing into any field:

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

This satisfies the WCAG requirement to provide instructions about required fields before users begin completing the form.

3. aria-required="true" on inputs and selects

aria-required="true" was added alongside the existing HTML required attribute on the Date, Description, Amount, and HMRC Category controls. This provides a programmatic signal to AT independently of how (or whether) the label text is announced, and ensures compatibility with older or non-standard assistive technologies.

The HMRC Category <select> also received the HTML required attribute, which was previously missing.

Visual Impact

None. The red asterisk continues to appear next to every required field label. The only changes are in the DOM structure and ARIA attributes.

Fields Covered

Field	Label updated	aria-required="true" added
Type	✅	— (toggle button, no text input)
Date	✅	✅
Description	✅	✅
Amount (£)	✅	✅
HMRC Category	✅	✅

Testing

To verify the fix with a screen reader:

1. Open the Manual Transaction Form from the Transactions dashboard.
2. On form open, confirm your AT announces "Fields marked with an asterisk () are required."* (or similar, depending on AT focus behaviour).
3. Tab to the Date field. Confirm the announcement is "Date (required)" — not "Date star" and not simply "Date".
4. Repeat for Description, Amount (£), and HMRC Category.
5. Confirm the red * is still visible next to each label.