無障礙功能

Next.js 團隊致力於讓所有開發人員（及其終端使用者）都能使用 Next.js。透過預設在 Next.js 中加入無障礙功能，我們的目標是讓網路對每個人更具包容性。

路由宣告

當在伺服器上渲染的頁面之間轉換時（例如使用 <a href> 標籤），螢幕閱讀器和其他輔助技術會在頁面載入時宣告頁面標題，以便使用者了解頁面已變更。

除了傳統的頁面導航之外，Next.js 也支援用戶端轉換以提高效能（使用 next/link）。為了確保用戶端轉換也能向輔助技術宣告，Next.js 預設包含路由宣告器。

Next.js 路由宣告器會尋找要宣告的頁面名稱，首先檢查 document.title，然後是 <h1> 元素，最後是 URL 路徑名稱。為了獲得最佳的無障礙使用者體驗，請確保您的應用程式中的每個頁面都有獨特且描述性的標題。

Linting

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 處理動畫時