Accessibility in a Remix app looks a lot like accessibility on the web in general. Using proper semantic markup and following the Web Content Accessibility Guidelines (WCAG) will get you most of the way there.
Remix 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.
The <Link> component renders a standard anchor tag, meaning that you get its accessibility behaviors from the browser for free!
Remix also provides the <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.
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 Remix app should already work this way by default!
When the client scripts in Remix are loaded, React Router takes control of routing and prevents the browser's default behavior. Remix 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:
In 2019, 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.
