Skip to main content
All Docs
FeaturesMaking Tax DigitalUpdated March 25, 2026

Accessibility: Form Label Associations (A11Y-19)

Accessibility: Form Label Associations (A11Y-19)

Released in: v1.0.443

Overview

As of v1.0.443, all form inputs and select controls in the platform carry a programmatic label association via the HTML for/id attribute pair (rendered as htmlFor/id in React). This ensures that assistive technologies — screen readers in particular — can announce the correct label when a user focuses any interactive form field.

Previously, several forms used <label> elements that were visually adjacent to their controls but lacked a machine-readable relationship. Screen readers had no reliable way to determine the accessible name for those fields.

What changed

Profile Settings (profile-form.tsx)

  • The Name field now has a matched htmlFor="profile-name" / id="profile-name" pair.
  • The Email display is intentionally a <p> element, not a labelled input. Email is read-only text; no form association is needed or appropriate. Screen readers will read the text content directly.

Organisation Settings (org-settings-form.tsx)

  • Portfolio Name field: htmlFor="org-name" / id="org-name".
  • Slug field: htmlFor="org-slug" / id="org-slug".

MFA Verification Modal (mfa-verify-modal.tsx)

  • Authenticator code input: htmlFor="mfa-totp" / id="mfa-totp".
  • Backup recovery code input: htmlFor="mfa-backup-code" / id="mfa-backup-code".

These fields appear during two-factor authentication and are high-priority from an accessibility standpoint — users relying on assistive technology must be able to complete MFA without sighted assistance.

Transaction Ledger — Filter Drawer (transaction-ledger.tsx)

All six filter controls in the FilterDrawer now have explicit label associations:

idField
filter-typeType (select)
filter-hmrc-categoryHMRC Category (select)
filter-propertyProperty (select)
filter-sourceSource (select)
filter-date-fromDate from (date input)
filter-date-toDate to (date input)

The two toggle checkboxes (Uncategorised and Unreconciled bank) use the wrapping-<label> pattern — the checkbox element is a descendant of the <label> — which provides an implicit association that is already correct per the HTML specification. No changes were required for these controls.

WCAG compliance

This fix brings the affected forms into compliance with:

  • WCAG 2.1 — 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
  • WCAG 2.1 — 3.3.2 Labels or Instructions (Level A): Labels or instructions are provided when content requires user input.

Impact

  • No functional changes. Form behaviour, validation, and submission logic are unchanged.
  • No new APIs or configuration options were introduced.
  • Users of screen readers (NVDA, JAWS, VoiceOver, TalkBack) will now hear the correct field label announced on focus for all affected controls.
  • Click/tap targeting is also improved: clicking a <label> with a valid htmlFor moves focus to and activates its associated control, which benefits users with motor impairments and those on touch devices with small targets.