无障碍功能
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
来帮助及早发现无障碍问题,包括对以下内容的警告:
- aria-props
- aria-proptypes
- aria-unsupported-elements
- role-has-required-aria-props
- role-supports-aria-props
例如,此插件有助于确保你为 img
标签添加 alt 文本,使用正确的 aria-*
属性,使用正确的 role
属性等。
无障碍资源
- WebAIM WCAG 检查清单
- WCAG 2.2 指南
- The A11y Project
- 检查前景和背景元素之间的颜色对比度
- 在处理动画时使用
prefers-reduced-motion