無障礙

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