Next.js 团队致力于使 Next.js 易于所有开发者(及其最终用户)访问。通过默认在 Next.js 中添加无障碍功能,我们旨在让网络对每个人都更具包容性。
当在服务器渲染的页面之间进行切换时(例如使用 <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 以帮助及早发现无障碍问题,包括针对以下方面的警告:
例如,此插件有助于确保您为 img 标签添加替代文本,使用正确的 aria-* 属性,使用正确的 role 属性等。
prefers-reduced-motion