无障碍 | Next.js 中文文档

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