¥Accessibility
Remix 应用中的无障碍功能与 Web 上的无障碍功能非常相似。使用正确的语义标记并遵循 Web 内容无障碍指南 (WCAG) 可以帮你实现大部分目标。
¥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 尽可能将某些可访问性实践设为默认,并在并非默认时提供 API 提供帮助。我们正在积极探索和开发新的 API,以便将来简化此过程。
¥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.
¥Links
<Link>
组件 会渲染一个标准的锚标签,这意味着你可以免费从浏览器获得其可访问性行为!
¥The <Link>
component renders a standard anchor tag, meaning that you get its accessibility behaviors from the browser for free!
Remix 还提供了 <NavLink/>
,其行为与 <Link>
相同,但当链接指向当前页面时,它还为辅助技术提供了上下文。这对于构建导航菜单或面包屑导航很有用。
¥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.
¥Routing
如果你在应用中渲染 <Scripts>
,则需要考虑一些重要事项,以使客户端路由更易于用户访问。
¥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.
对于传统的多页网站,我们无需过多考虑路由变化。你的应用会渲染一个锚标记,其余部分由浏览器处理。如果你的用户禁用 JavaScript,你的 Remix 应用应该已经默认以这种方式工作!
¥With a traditional multipage 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!
当 Remix 中的客户端脚本加载完成后,React Router 将接管路由并阻止浏览器的默认行为。Remix 不会在路由发生变化时对你的 UI 做出任何假设。因此,你需要考虑一些重要功能,包括:
¥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:
焦点管理:当路由发生变化时,哪个元素会获得焦点?这对于键盘用户很重要,对屏幕阅读器用户也很有帮助。
¥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.
2019 年,Marcy Sutton 领导并发表了用户研究成果 将帮助开发者构建可访问的客户端路由体验。我们鼓励你详细阅读本文。我们正在积极研究和测试内部解决方案以及新的 API,以简化此过程。
¥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.