How do you ensure a UI supports both keyboard and screen reader users?

• A. Semantic markup, proper ARIA roles, logical tab order, and accessible labeling.
• B. Use color alone to convey status for screen readers.
• C. Hide content from keyboard users.
• D. Avoid using ARIA roles to maintain simplicity.

Answer: (A)

Making a UI accessible to both keyboard users and screen readers starts with giving elements meaningful, native semantics and predictable navigation. Semantic markup means using the correct HTML elements (like button, input, nav, header, etc.) so assistive technologies understand what each control is and how it behaves without extra instructions. A logical tab order ensures that when someone tabs through the page, focus moves through controls in a sequence that matches how the content appears, making interaction feel natural and easy to follow. Accessible labeling guarantees that screen readers can announce the purpose of each control and its current state, so users know what to do next. ARIA roles are useful as supplements when you’re implementing custom widgets that don’t have native HTML equivalents, but they must be applied correctly to add meaning where native semantics fall short rather than as a shortcut to accessibility. Relying on color alone to convey status excludes screen readers and many users with color vision differences, and hiding content from keyboard users makes the interface unusable for a large portion of users. By combining semantic markup, appropriate ARIA roles where needed, a sensible tab order, and clear labeling, the UI becomes operable and understandable for both keyboard and screen reader users.