Start with the interaction’s native element
React changes how an interface is composed, but the browser still receives HTML controls and links. A button should perform an action, a link should navigate, and a labeled input should collect a value. Choosing the correct native element preserves useful keyboard and accessibility behavior. Recreating that behavior on a generic container adds responsibilities that the original control already handles.
Follow a reusable field example
Imagine a ProjectNameField component containing a visible label, an input, a short hint and an optional error. Each instance needs a unique association between those elements. Generate a stable ID for the component instance when needed, and connect the label and descriptions to the input. Two fields on the same page should not accidentally share one hardcoded identifier.
Keep the visible name useful
A placeholder disappears during entry and should not be the only explanation of a field. A clear visible label also helps someone using voice input or revisiting a partially completed form. If an icon-only button needs an accessible name, describe the action rather than the picture: Download résumé communicates intent more clearly than Down arrow. Keep visible and programmatic naming compatible.
Model changing states accurately
A disclosure needs to expose whether its content is expanded. A disabled action should reflect whether it can actually be used. Error and status feedback should be associated with the right control or announced appropriately without repeating on every keystroke. Adding ARIA attributes does not replace the underlying state logic; the attributes must stay synchronized with the same state that controls the visible interface.
Design focus as part of the feature
Opening a dialog, closing a menu or deleting a focused row can change where keyboard interaction should continue. Plan those transitions instead of relying on whichever element happens to remain in the DOM. Keep a visible focus indicator and avoid animated transforms that make a control difficult to locate. Respect reduced-motion preferences where decorative motion is involved.
Verify beyond the component screenshot
Use Tab, Shift+Tab, Enter, Space and Escape where relevant to the control pattern. Render multiple instances and inspect their labels and IDs. Check long error text, high zoom and a screen-reader workflow when possible. A reusable component improves accessibility only if it consistently preserves semantics and behavior across its real usages, rather than looking correct in one isolated example.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.