Which statement best describes accessibility considerations in React?

Which statement best describes accessibility considerations in React?

• A. Rely exclusively on color to convey state.
• B. Use semantic HTML elements, ARIA attributes when needed, ensure keyboard accessibility, manage focus, and avoid color-only cues.
• C. Hide all interactive controls from screen readers to reduce noise.
• D. Use divs for all interactivity without keyboard support.

Answer: (B)

Accessibility in React means building components that can be used by people with a range of abilities, including those who rely on screen readers or keyboard navigation. The statement that best describes this practice emphasizes using semantic HTML to convey meaning, adding ARIA attributes only when needed to fill gaps, ensuring keyboard accessibility so everything can be operated with the keyboard, managing focus especially with dynamic content or dialogs, and avoiding cues that rely solely on color to convey state. Together, these practices ensure that information and interactions are perceivable, operable, and understandable for all users. Using semantic HTML helps assistive technologies understand the page structure without extra work. ARIA attributes can improve accessibility when native semantics aren’t enough, but they should be used judiciously. Keyboard accessibility guarantees that users who don’t use a mouse can navigate and activate controls. Focus management keeps users oriented when content changes or new dialogs appear. Avoiding color-only cues ensures that those with color vision deficiencies or who rely on screen readers still receive the necessary information. The other approaches fall short because relying exclusively on color to indicate state can leave color-blind users and screen-reader users without important information. Hiding interactive controls from screen readers makes them completely inaccessible. Using divs for all interactivity without keyboard support discards both semantics and the ability to operate via keyboard.

Accessibility in React means building components that can be used by people with a range of abilities, including those who rely on screen readers or keyboard navigation. The statement that best describes this practice emphasizes using semantic HTML to convey meaning, adding ARIA attributes only when needed to fill gaps, ensuring keyboard accessibility so everything can be operated with the keyboard, managing focus especially with dynamic content or dialogs, and avoiding cues that rely solely on color to convey state. Together, these practices ensure that information and interactions are perceivable, operable, and understandable for all users.

Using semantic HTML helps assistive technologies understand the page structure without extra work. ARIA attributes can improve accessibility when native semantics aren’t enough, but they should be used judiciously. Keyboard accessibility guarantees that users who don’t use a mouse can navigate and activate controls. Focus management keeps users oriented when content changes or new dialogs appear. Avoiding color-only cues ensures that those with color vision deficiencies or who rely on screen readers still receive the necessary information.

The other approaches fall short because relying exclusively on color to indicate state can leave color-blind users and screen-reader users without important information. Hiding interactive controls from screen readers makes them completely inaccessible. Using divs for all interactivity without keyboard support discards both semantics and the ability to operate via keyboard.