Accessible Form Component & UX Requirements Generator

Status: Working beta

Last verified:

Description: Configure a form pattern, preview it, and generate aligned UX, accessibility, development, testing, and semantic HTML guidance.

Instructions: Choose a form component, configure its content and behavior, then generate and review the live pattern, semantic code, requirements, and test guidance.

Connected MyKMHub content

Step 1

Choose a component

Form component

Context: Short, single-line information

  • Use a clear noun.
  • Keep labels short.
  • Give one useful example.

Step 2

Configure the pattern

Accessibility

Accessibility notes

  • Spectrum 2 controls are used for generator configuration.
  • Every preview provides a visible, programmatically associated label.
  • Required state, hints, field groups, and live counters use semantic markup.
  • Generated guidance includes keyboard, focus, zoom, reflow, and error checks.
Version notes

0.2 MyKMHub beta

  • Ported the supplied prototype into React and Spectrum 2.
  • Added 17 configurable form-component patterns.
  • Added live semantic previews and HTML generation.
  • Added matching component-specific JavaScript for interactive preview behavior.
  • Added normalized UX, accessibility, development, and test guidance.

0.1 original prototype

  • Established the USWDS and Section 508-aligned generator concept.
  • Included live previews and HTML, CSS, JavaScript, and instruction exports.