From 3150fc1c7ea5e6dd7eb6a158599885472f206844 Mon Sep 17 00:00:00 2001 From: hlimas Date: Sun, 16 Mar 2025 10:45:42 -0700 Subject: [PATCH] docs: add accessibility documentation from Remix docs --- contributors.yml | 1 + docs/how-to/accessibility.md | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 docs/how-to/accessibility.md diff --git a/contributors.yml b/contributors.yml index df521ac7f3..27450bc752 100644 --- a/contributors.yml +++ b/contributors.yml @@ -124,6 +124,7 @@ - haivuw - hampelm - harshmangalam +- HenriqueLimas - hernanif1 - HK-SHAO - holynewbie diff --git a/docs/how-to/accessibility.md b/docs/how-to/accessibility.md new file mode 100644 index 0000000000..f11921f5e0 --- /dev/null +++ b/docs/how-to/accessibility.md @@ -0,0 +1,34 @@ +--- +title: Accessibility +--- + +# Accessibility + +Accessibility in a React Router app looks a lot like accessibility on the web in general. Using proper semantic markup and following the [Web Content Accessibility Guidelines (WCAG)][wcag] will get 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. We are actively exploring and developing new APIs to make this even easier in the future. + +## Links + +The [`` component][link] renders a standard anchor tag, meaning that you get its accessibility behaviors from the browser for free! + +React Router also provides the [``][navlink] which behaves the same as ``, but it also provides context for assistive technology when the link points to the current page. This is useful for building navigation menus or breadcrumbs. + +## Routing + +If you are rendering [``][scripts] in your app, there are some important things to consider to make client-side routing more accessible for your users. + +With a traditional multi-page website we don't have to think about route changes too much. Your app renders an anchor tag, and the browser handles the rest. If your users disable JavaScript, your React Router app should already work this way by default! + +When the client scripts in React Router are loaded, React Router takes control of routing and prevents the browser's default behavior. React Router doesn't make any assumptions about your UI as the route changes. There are some important features you'll want to consider as a result, including: + +- **Focus management:** What element receives focus when the route changes? This is important for keyboard users and can be helpful for screen-reader users. +- **Live-region announcements:** Screen-reader users also benefit from announcements when a route has changed. You may want to also notify them during certain transition states depending on the nature of the change and how long loading is expected to take. + +In 2019, [Marcy Sutton led and published findings from user research][marcy-sutton-led-and-published-findings-from-user-research] to help developers build accessible client-side routing experiences. We encourage you to read the article in detail. We are actively investigating and testing internal solutions as well as new APIs to simplify this process. + +[link]: ../api/components/Link +[navlink]: ../api/components/NavLink +[scripts]: ../api/components/Scripts +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ +[marcy-sutton-led-and-published-findings-from-user-research]: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing