Accessibility

FormForge handles accessibility automatically — no extra configuration needed. Every field gets correct ARIA attributes, labels, and error announcements out of the box.

What's automatic

  • aria-required on required fields
  • aria-invalid + aria-errormessage when a field has an error
  • aria-describedby linking fields to their descriptions
  • Error messages announced via role="alert"
  • Focus moves to first error on failed submit
  • Unique stable id per field scoped to the form instance

Keyboard navigation

  • Tab / Shift+Tab — move between fields
  • Enter / Space — activate checkboxes, radio buttons
  • Arrow keys — navigate radio groups
  • Enter — submit form (outside textarea)

Screen reader support

Validation errors are announced via role="alert" so screen readers read them immediately when they appear.

Focus utilities

import { focusFirstError, getFocusableElements } from '@formforges/accessibility'

// Move focus to first invalid field
focusFirstError(formElement)

// Get all focusable elements in a container
const els = getFocusableElements(containerElement)

ARIA builder

import { buildAriaProps, fieldId } from '@formforges/accessibility'

const ariaProps = buildAriaProps('form-email', {
  label: 'Email',
  required: true,
  error: 'Invalid email address',
})
// Returns:
// {
//   id: 'form-email',
//   'aria-required': true,
//   'aria-invalid': true,
//   'aria-errormessage': 'form-email-error',
// }