Link component renders standard anchor tag
The <Link> component renders a standard HTML anchor tag, which provides accessibility behaviors from the browser automatically without additional configuration.
React Router · Guides · all subjects
accessibility
6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
NavLink provides context for assistive technology on current page
The <NavLink> component behaves the same as <Link> but also provides context for assistive technology when the link points to the current page. This is useful for building navigation menus or breadcrumbs.
Focus management critical for client-side routing accessibility
When routes change in React Router client-side routing, focus management is important for keyboard users and can be helpful for screen-reader users. Developers must consider what element receives focus when the route changes.
Live-region announcements for screen-reader users on route changes
Screen-reader users benefit from live-region announcements when a route has changed. Developers may want to notify them during certain transition states depending on the nature of the change and how long loading is expected to take.
React Router apps should work without JavaScript by default
React Router apps should work with links rendered as standard anchor tags even if users disable JavaScript. When client scripts load, React Router takes control of routing and prevents the browser's default behavior, but the app should gracefully degrade.
Accessibility in React Router follows WCAG and semantic markup
Accessibility in a React Router app follows general web accessibility practices. Using proper semantic markup and following the Web Content Accessibility Guidelines (WCAG) gets you most of the way there. React Router makes certain accessibility practices the default where possible and provides APIs to help where it's not.