Which practice best supports accessibility in React?

Which practice best supports accessibility in React?

• A. Rely exclusively on color to convey state.
• B. Use semantic HTML, ARIA attributes when needed, ensure keyboard accessibility, manage focus.
• C. Hide all interactive controls from screen readers.
• D. Place interactive elements inside divs without semantics.

Answer: (B)

Accessibility in React rests on using semantic HTML as the foundation, with ARIA attributes added thoughtfully when native semantics aren’t enough, and ensuring every interactive element works with the keyboard and manages focus properly. Native elements like button, input, and links come with built-in accessibility behavior, roles, and keyboard handling, so leveraging them lets assistive technologies understand the UI without extra code. When you need more than native semantics, ARIA can fill gaps, but it should augment rather than replace real HTML semantics and should be applied carefully to avoid confusing screen readers. Keyboard accessibility is essential: every interactive control must be operable using the keyboard, with clear focus order and predictable activation (Enter or Space for buttons, etc.). Focus management matters a lot when showing or hiding content—like modals or dynamic panels—so you move focus to the new element, trap it if needed, and return focus to the prior control after closure. Also, avoid relying on color alone to convey state; provide additional cues such as text, icons, or ARIA labels, and ensure good color contrast. Never hide interactive controls from screen readers, and avoid wrapping interactive elements in non-semantic divs, which remove essential accessibility information. Following these practices makes React apps usable by a wider audience.

Accessibility in React rests on using semantic HTML as the foundation, with ARIA attributes added thoughtfully when native semantics aren’t enough, and ensuring every interactive element works with the keyboard and manages focus properly. Native elements like button, input, and links come with built-in accessibility behavior, roles, and keyboard handling, so leveraging them lets assistive technologies understand the UI without extra code. When you need more than native semantics, ARIA can fill gaps, but it should augment rather than replace real HTML semantics and should be applied carefully to avoid confusing screen readers.

Keyboard accessibility is essential: every interactive control must be operable using the keyboard, with clear focus order and predictable activation (Enter or Space for buttons, etc.). Focus management matters a lot when showing or hiding content—like modals or dynamic panels—so you move focus to the new element, trap it if needed, and return focus to the prior control after closure. Also, avoid relying on color alone to convey state; provide additional cues such as text, icons, or ARIA labels, and ensure good color contrast. Never hide interactive controls from screen readers, and avoid wrapping interactive elements in non-semantic divs, which remove essential accessibility information. Following these practices makes React apps usable by a wider audience.