An accessible [React](/courses/reactjs) interface should be usable without a mouse. Keyboard users should be able to reach interactive controls, understand where focus is, activate controls, and move through complex widgets predictably. ### Native Controls Already Support Keyboard Interaction This works automatically: ```jsx ``` A keyboard user can normally focus the button with `Tab` and activate it with the expected keys. This is another reason to prefer semantic [HTML](/courses/html). ### Avoid Clickable div Elements This is problematic: ```jsx

Open Dialog

``` Mouse users can activate it, but keyboard users may not even be able to focus it. Prefer: ```jsx ``` ### Understand tabIndex `tabIndex={0}` places a normally non-focusable element into the natural keyboard tab order: ```jsx

Focusable content

``` `tabIndex={-1}` allows programmatic focus without including the element in normal Tab navigation: ```jsx const headingRef = useRef(null); headingRef.current?.focus(); ``` with: ```jsx

Search Results

``` ### Avoid Positive tabIndex Values Values such as: ```jsx tabIndex={5} ``` create a custom focus order that can become difficult to understand and maintain. Prefer the natural DOM order whenever possible. ### Visible Focus Is Important Users need to know which control currently has keyboard focus. Avoid globally removing outlines: ```css *:focus { outline: none; } ``` unless an equally clear focus indicator is provided. A visible focus style helps users understand: ```text Where am I? What will activate if I press Enter? ``` ### Complex Widgets Need Keyboard Behavior A custom dropdown may need interaction such as: ```text Enter / Space → open or select Arrow Down / Arrow Up → move through options Escape → close Home / End → move to first/last item where appropriate ``` The exact keyboard behavior depends on the widget being implemented. ### Modal Focus Management When a modal opens, focus should normally move into it. ```jsx useEffect(() => { if (open) { closeButtonRef.current?.focus(); } }, [open]); ``` A robust modal may also need to: ```text Keep focus inside while open Close on Escape when appropriate Restore focus to the trigger after closing ``` ### Do Not Use Keyboard Event Handlers When Native HTML Already Solves It If a real button works: ```jsx ``` it is usually better than manually recreating button keyboard logic with: ```jsx

``` ### Test Without a Mouse A simple accessibility test is: ```text Put the mouse aside Press Tab through the page Try forms, menus, dialogs, and buttons ``` Check whether: ```text All controls are reachable Focus is visible Order is logical Controls can be activated Focus is not trapped unexpectedly ``` ### Interview-Ready Answer Accessible keyboard navigation means all important interactive UI can be reached and operated without a mouse. Native controls should be preferred because they already support keyboard behavior. Focus order should remain logical, visible focus indicators should be preserved, and complex widgets such as dialogs and menus should intentionally manage keyboard interaction and focus.