跳到内容
介绍架构无障碍访问

无障碍访问

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 以帮助尽早发现无障碍访问问题,包括以下警告:

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

无障碍访问资源