Skip to content

Commit 3150fc1

Browse files
author
hlimas
committed
docs: add accessibility documentation from Remix docs
1 parent 85daf2f commit 3150fc1

File tree

2 files changed

+35
-0
lines changed

2 files changed

+35
-0
lines changed

Diff for: contributors.yml

+1
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
- haivuw
125125
- hampelm
126126
- harshmangalam
127+
- HenriqueLimas
127128
- hernanif1
128129
- HK-SHAO
129130
- holynewbie

Diff for: docs/how-to/accessibility.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Accessibility
3+
---
4+
5+
# Accessibility
6+
7+
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.
8+
9+
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.
10+
11+
## Links
12+
13+
The [`<Link>` component][link] renders a standard anchor tag, meaning that you get its accessibility behaviors from the browser for free!
14+
15+
React Router also provides the [`<NavLink/>`][navlink] which behaves the same as `<Link>`, 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.
16+
17+
## Routing
18+
19+
If you are rendering [`<Scripts>`][scripts] in your app, there are some important things to consider to make client-side routing more accessible for your users.
20+
21+
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!
22+
23+
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:
24+
25+
- **Focus management:** What element receives focus when the route changes? This is important for keyboard users and can be helpful for screen-reader users.
26+
- **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.
27+
28+
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.
29+
30+
[link]: ../api/components/Link
31+
[navlink]: ../api/components/NavLink
32+
[scripts]: ../api/components/Scripts
33+
[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/
34+
[marcy-sutton-led-and-published-findings-from-user-research]: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing

0 commit comments

Comments
 (0)