mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
fa8d558154
Prepare **Getting Started** Section for upcoming changes, and work on the first page: `Installation`. Closes: - https://linear.app/vercel/issue/DOC-3703/update-how-getting-started-is-handled-in-next-site - https://linear.app/vercel/issue/DOC-3694/page-how-to-set-up-a-new-nextjs-project-installation - https://linear.app/vercel/issue/DOC-3707/create-subsection-for-plugins - https://linear.app/vercel/issue/DOC-3709/eslint-plugin-api-reference - https://linear.app/vercel/issue/DOC-3710/typescript-reference-page ### Key Changes: - Duplicate Getting Started Section between App and Pages Router docs - Since getting started will vary between the routers, each docs needs to have their own Getting Started section - Reorganize folder numbers **Installation Page**: - Split app and pages router specific information - Rename "Installation" to "How to set up a Next.js application" for SEO - Add setup instructions for **TypeScript** - Add setup instructions for **ESLint** - Add setup instructions for **Absolute Imports and Module Path Aliases** **Side effects from moving content around**: - Create a subsection in API Reference called **Configuration**. - Add ESLint Plugin page, and update it to follow template - Add TypeScript page, and update it to follow template - Remove the **Absolute Imports and Module Path Aliases** page, it's small enough to live under the set up instructions. --------- Co-authored-by: Rich Haines <[email protected]>
35 lines
2.8 KiB
Plaintext
35 lines
2.8 KiB
Plaintext
---
|
|
title: Accessibility
|
|
description: The built-in accessibility features of Next.js.
|
|
---
|
|
|
|
The Next.js team is committed to making Next.js accessible to all developers (and their end-users). By adding accessibility features to Next.js by default, we aim to make the Web more inclusive for everyone.
|
|
|
|
## Route Announcements
|
|
|
|
When transitioning between pages rendered on the server (e.g. using the `<a href>` tag) screen readers and other assistive technology announce the page title when the page loads so that users understand that the page has changed.
|
|
|
|
In addition to traditional page navigations, Next.js also supports client-side transitions for improved performance (using `next/link`). To ensure that client-side transitions are also announced to assistive technology, Next.js includes a route announcer by default.
|
|
|
|
The Next.js route announcer looks for the page name to announce by first inspecting `document.title`, then the `<h1>` element, and finally the URL pathname. For the most accessible user experience, ensure that each page in your application has a unique and descriptive title.
|
|
|
|
## Linting
|
|
|
|
Next.js provides an [integrated ESLint experience](/docs/pages/api-reference/config/eslint) out of the box, including custom rules for Next.js. By default, Next.js includes `eslint-plugin-jsx-a11y` to help catch accessibility issues early, including warning on:
|
|
|
|
- [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
|
|
- [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-proptypes.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
|
|
- [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-unsupported-elements.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
|
|
- [role-has-required-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-has-required-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
|
|
- [role-supports-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-supports-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z)
|
|
|
|
For example, this plugin helps ensure you add alt text to `img` tags, use correct `aria-*` attributes, use correct `role` attributes, and more.
|
|
|
|
## Accessibility Resources
|
|
|
|
- [WebAIM WCAG checklist](https://webaim.org/standards/wcag/checklist)
|
|
- [WCAG 2.2 Guidelines](https://www.w3.org/TR/WCAG22/)
|
|
- [The A11y Project](https://www.a11yproject.com/)
|
|
- Check [color contrast ratios](https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) between foreground and background elements
|
|
- Use [`prefers-reduced-motion`](https://web.dev/prefers-reduced-motion/) when working with animations
|