可访问性

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以帮助尽早发现可访问性问题，包括对以下内容发出警告

• 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