introduction
Next.js 团队提交了一份满意的答卷(能够让所有开发人员以及终端用户可以访问Next.js),默认Next.js 已经增加了访问能力的特性,主要是让Web能够包括在每个人之内 …
路由通知
当在服务器上在页面之间的渲染的过渡(例如<a href>
tag) 屏幕阅读器 以及其他辅助性技术通告这个页面的标题(当页面被加载),因此用户能够理解页面发生了改变 …
除了传统的页面导航之外,Next.js 也支持客户端过渡(为了提高性能,例如next/link
),为了确保客户端过渡也能够让辅助性技术进行通告,Next.js 包括了一个路由通告器(默认) ..
Next.js 的路由通告器通过首先检测 document.title
去查看页面的名称进行通告,然后<h1>
元素,最终发现URL 的路径名称 … 为了大多数访问用户的体验,确保应用中的每一个页面都有一个独一无二且描述性的标题 ….
Linting
Next.js 提供了一个集成的 ESLint 体验(开箱即用),包括针对Next.js 定制的规则 .. 默认来说Next.js 包括了eslint-plugin-jsx-ally
帮助更早的捕获访问性问题,包括警告在:
- aria-props
- aria-proptypes
- aria-unsupported-elements
- role-has-required-aria-props
- role-supports-aria-props
举个例子,这个插件帮助你增加额外的文本到 img
标签,使用正确的aria-*
属性,使用正确的role
属性以及更多 …
禁用js
默认情况,Next.js 预渲染页面为静态Html页面,这意味着js是不必须的(为了渲染来自服务器的HTML 标签),并且能够在客户端用来增强交互性 …
如果你的应用禁用了js,仅仅html可以使用,你可以从应用中移除所有的js,通过使用一个实验性的标志:
// next.config.js
export const config = {
unstable_runtimeJS: false,
}
访问性资源
- WebAIM WCAG checklist
- WCAG 2.1 Guidelines
- The A11y Project
- Check color contrast ratios between foreground and background elements
- Use prefers-reduced-motion when working with animations