09 • Patterns · Form

Incident report form

Field pattern: label + required indicator + hint + inline error + aria-invalid + aria-describedby. Submits, validates, shows confirmation.

Accessibility

  • Label↔input association: Field wraps the input, so the label click focuses the control.
  • Required indicator: red asterisk in label + native required + aria-required (native).
  • Error announcement: aria-invalid="true" on invalid input + visible inline error message.
  • Hint wiring: aria-describedby points to hint or error id (error takes precedence).
  • noValidate: custom validation controls messaging (native browser popups bypassed).
  • Focus ring: 3px red outline on keyboard focus (global RHDS spec).