无障碍访问
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 指南
- The A11y Project
- 检查前景与背景元素的颜色对比度
- 处理动画时使用
prefers-reduced-motion