frontend-a11y

Connect every input to a label using htmlFor and matching id, link error messages with aria-describedby and role="alert", and mark required fields with aria-required. This lets screen readers announce the label, state, and errors for each field.

Use role="combobox" with aria-expanded and aria-haspopup, track the active option index in state, and handle ArrowDown, ArrowUp, Enter, Space, and Escape in onKeyDown. Render options with role="option" and aria-selected.

Use aria-label with an inline string when no visible label text exists, such as icon-only buttons. Use aria-labelledby to reference another element's id when a visible label already exists on the page, avoiding duplicated text.

Yes, all patterns use standard React APIs like useState, useEffect, useRef, and useId, which work in both React and Next.js components. The examples are written in TSX and apply directly to Next.js app or pages router projects.

A div with onClick has no role, no keyboard focusability, and no accessible name, so keyboard and screen reader users cannot interact with it. Use a native button element, or add role, tabIndex, and onKeyDown handlers as a fallback.

Store document.activeElement in a ref before opening, move focus into the modal container with tabIndex={-1}, and restore focus to the saved element on close. For full Tab cycling traps, use a library like focus-trap-react.