WCAG accessibility audit for React applications

React Router changes page content without browser reload. Screen readers do not detect this change and announce neither the new page title nor the new content. The blind user does not know the navigation worked. An announcement system via aria-live or focus management on the new content must be implemented, which is rarely done.

React UI components (dropdown, tabs, accordion, autocomplete) are built with divs and onClick instead of native HTML elements (select, button, details). They do not carry required ARIA roles (role=tablist, role=tab, aria-selected, aria-expanded). Screen reader users cannot identify the component type or its state (open/closed, selected/unselected).

React state changes cause re-renders that delete and recreate DOM elements. If the focused element is deleted, focus returns to the top of the document. The keyboard user loses their position on the page and must re-tab from the beginning. This problem is particularly frequent in dynamic lists, conditional forms, and components with async loading.

React applications update content dynamically (notifications, real-time search results, chat messages, counters). These updates are not wrapped in aria-live regions, so screen readers do not announce them. The blind user misses critical information that appears on screen.