fixing-accessibility

Link error messages to fields using aria-describedby, set aria-invalid on invalid inputs, and announce required fields. Critical errors should use aria-live so screen readers announce them, and helper text must be programmatically associated with its input.

Add an aria-label or aria-labelledby attribute to the button so it has an accessible name, and mark the decorative SVG icon with aria-hidden="true". Every interactive control must expose a meaningful name to assistive technology.

Prefer native elements like button, a, and input over role-based hacks, since they provide keyboard support and semantics for free. Only add ARIA when native HTML cannot solve the problem, and include all required attributes when a role is used.

Modals must trap focus while open, set initial focus inside the dialog on open, and restore focus to the trigger element on close. Escape should close the dialog, and opening it should not unexpectedly scroll the page.

This approach favors minimal, targeted fixes and does not rewrite large UI sections or migrate component libraries. For complex widgets like menus and comboboxes, established accessible primitives are recommended over custom behavior.