When should I use ARIA in React?
Only when semantic HTML is not enough. ARIA is a last resort, not a first choice. The wrong ARIA is worse than none, so use it carefully, and prefer semantic HTML whenever it can do the job.
Explore This Question
Search for additional explanations using these tools:
More FAQs in Accessibility Basics for a React UI
Use semantic HTML, give interactive elements accessible names (aria-label for icon buttons, alt for images), ensure keyboard accessibility, manage focus for modals and menus, ensure sufficient color contrast, use ARIA carefully, and test with a screen reader.
Because it gives screen readers the structure for free, without any extra attributes. A button is a button, a nav is a nav, and a main is a main. Semantic HTML is the foundation of accessibility, before ARIA.
Give them an aria-label. An icon-only button has no visible text, so screen readers have nothing to announce. An aria-label provides the accessible name that describes the button's action.
Still have questions?
Browse all our FAQs or reach out to our support team