Accessible Forms

For custom styled forms that don't use native form elements, use ARIA roles and properties. Use role="form" on the container, role="textbox", role="combobox", etc. for inputs. Always provide aria-label or aria-labelledby for each input. This approach is more complex and should only be used when semantic HTML forms are not feasible.

Use native HTML5 form elements with proper <label> associations. The for attribute on labels should match the id on inputs. Use fieldset and legend to group related fields. Required fields should be indicated with aria-required="true" and visual indicators (asterisk).

Multi-step forms (wizards) require careful focus management. When moving between steps, focus should move to the first field of the new step. Use aria-current="step" to indicate the current step. Provide a progress indicator and ensure users can navigate back to previous steps. All validation should occur before allowing progression to the next step.

Real-time validation provides immediate feedback. Use aria-live="polite" for validation messages so screen readers announce them without interrupting. Validate on blur (when user leaves field) rather than on every keystroke to avoid overwhelming users. Show success states as well as errors. Use aria-invalid to indicate error state and aria-describedby to associate error messages with fields.

Use <fieldset> and <legend> to group related form fields. This is especially important for radio buttons and checkboxes, but also useful for grouping any related inputs. The legend describes the group and is announced by screen readers when entering the fieldset. This provides crucial context for understanding the relationship between fields.