无障碍访问

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

路由公告

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

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

Next.js 路由公告器通过首先检查 document.title，然后是 <h1> 元素，最后是 URL 路径名来查找要宣布的页面名称。为了获得最易访问的用户体验，请确保应用程序中的每个页面都有一个独特且描述性的标题。

Linting

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

• aria-props
• aria-proptypes
• aria-unsupported-elements
• role-has-required-aria-props
• role-supports-aria-props

例如，此插件有助于确保您向 img 标签添加 alt 文本，使用正确的 aria-* 属性，使用正确的 role 属性等等。

无障碍访问资源

• WebAIM WCAG 清单
• WCAG 2.2 指南
• The A11y Project
• 检查前景色和背景色元素之间的颜色对比度
• 使用 prefers-reduced-motion 处理动画时