Why use semantic HTML in React for accessibility?
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.
Verify This Answer
Cross-check this information using these trusted sources:
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.
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.
So keyboard and screen reader users can use the modal. When it opens, move focus into it. When it closes, return focus to the trigger. Without focus management, keyboard users get stuck outside the modal.
Still have questions?
Browse all our FAQs or reach out to our support team