تغيير المسارات دون إعادة تحميل الصفحات

In a SPA, clicking a link swaps content without a full reload. To a screen reader, nothing seems to happen, so it stays silent about the new page. 🤫

A real page load resets focus and makes the screen reader read the new title. Client-side routing skips all of that, so you must recreate those cues yourself.

On every route change, set document.title to match the new view. Many screen readers read the title when it changes, giving users their bearings.

After routing, send focus to the top of the new content, usually the main heading. This tells keyboard and screen reader users the page has changed.

Give the target a tabindex of -1 so it can receive focus by script without joining the tab order. Then call .focus() on it after the route updates.

An alternative is a visually hidden live region that you fill with text like Navigated to Settings. The screen reader speaks it without moving focus.

Moving focus and announcing in a live region both work. Doing both at once can cause double announcements, so choose one approach per app and stay consistent.

Run your focus or announcement after the new view renders. In React, an effect that depends on the route path fires once the DOM is updated.

Only move focus on a genuine route change, not on minor in-place updates. Stealing focus while someone is mid-action is jarring and confusing.

Some routers expose hooks for route changes. React Router gives you useLocation, so an effect can react every time the path actually changes.

Turn on a screen reader, click through your nav, and listen. If route changes are announced and focus lands sensibly, your SPA navigation is accessible.

A screen reader user clicks a SPA link but hears nothing change. What is the most likely cause?

SPA navigation is invisible until you make it heard. Update the title, then move focus or use a live region so everyone knows the page changed. ✅