How should a UI be designed to ensure keyboard accessibility and visible focus state?

• A. Mouse interactions are sufficient; focus indicators are optional.
• B. All interactive elements must be reachable via keyboard, and a visible focus indicator (outline) must be provided for focus transitions.
• C. Only some elements need keyboard access.
• D. Focus indicators should be hidden to reduce distraction.

Answer: (B)

Keyboard accessibility comes from two core practices: making every interactive control reachable by keyboard, and visibly signaling which element has focus as you navigate. Users move through a UI with the Tab key (and Shift+Tab to go backward) and activate controls with Enter or Space, so if something can’t be reached via keyboard, it’s effectively hidden from many users. Likewise, a clear focus indicator lets the user see exactly where the next action will apply, which is essential for orientation and precision.

Implement this by using semantic HTML for real controls (buttons, links, inputs, selects, textareas) so the browser provides proper focus behavior. If you build custom controls, ensure they can receive focus (for example, with tabindex) and provide a visible focus style. The focus cue should be easy to see and have enough contrast against the surrounding content. Avoid removing or hiding the focus outline; it should appear during navigation. Also consider logical focus order and enhancements like skip links and proper focus management in modal dialogs.

In short, every interactive element must be navigable with the keyboard, and there must be a clear, visible indication of focus as you move through the UI.