Next.js 团队致力于让 Next.js 对所有开发者(及其最终用户)都可访问。通过默认添加无障碍功能到 Next.js 中,我们旨在让 Web 对每个人都更具包容性。

路由公告

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

除了传统的页面导航,Next.js 还支持客户端过渡以提高性能(使用 next/link)。为确保客户端过渡也能被辅助技术宣布,Next.js 默认包含一个路由公告器。

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

代码检查

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 标签添加替代文本,使用正确的 aria-* 属性,使用正确的 role 属性等。

无障碍资源

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