Skip to main content

无障碍

Next.js 团队致力于让所有开发者（及其终端用户）都可以访问 Next.js。通过默认向 Next.js 添加辅助功能，我们的目标是让 Web 对每个人都更具包容性。

¥The Next.js team is committed to making Next.js accessible to all developers (and their end-users). By adding accessibility features to Next.js by default, we aim to make the Web more inclusive for everyone.

路由公告​

¥Route Announcements

当在服务器上渲染的页面之间进行转换时（例如使用 <a href> 标签），屏幕阅读器和其他辅助技术会在页面加载时宣布页面标题，以便用户了解页面已更改。

¥When transitioning between pages rendered on the server (e.g. using the <a href> tag) screen readers and other assistive technology announce the page title when the page loads so that users understand that the page has changed.

除了传统的页面导航之外，Next.js 还支持客户端转换以提高性能（使用 next/link）。为了确保客户端转换也被宣布为辅助技术，Next.js 默认包含一个路由播音员。

¥In addition to traditional page navigations, Next.js also supports client-side transitions for improved performance (using next/link). To ensure that client-side transitions are also announced to assistive technology, Next.js includes a route announcer by default.

Next.js 路由播音器通过首先检查 document.title、然后检查 <h1> 元素、最后检查 URL 路径名来查找要播报的页面名称。为了获得最易于访问的用户体验，请确保应用中的每个页面都有唯一的描述性标题。

¥The Next.js route announcer looks for the page name to announce by first inspecting document.title, then the <h1> element, and finally the URL pathname. For the most accessible user experience, ensure that each page in your application has a unique and descriptive title.

代码检查​

¥Linting

Next.js 提供了开箱即用的 集成 ESLint 体验，包括 Next.js 的自定义规则。默认情况下，Next.js 包含 eslint-plugin-jsx-a11y 以帮助及早发现可访问性问题，包括警告：

¥Next.js provides an integrated ESLint experience out of the box, including custom rules for Next.js. By default, Next.js includes eslint-plugin-jsx-a11y to help catch accessibility issues early, including warning on:

例如，此插件可帮助确保你将替代文本添加到 img 标签、使用正确的 aria-* 属性、使用正确的 role 属性等等。

¥For example, this plugin helps ensure you add alt text to img tags, use correct aria-* attributes, use correct role attributes, and more.

无障碍资源​

¥Accessibility Resources