frontend-accessibility-best-practices

此技能提供了一套為現代 React 開發量身定制的全面無障礙 (a11y) 指南，協助開發人員實作符合網路內容無障礙指南 (WCAG) 標準的包容性介面。該技能涵蓋範圍廣泛，從基本的語意化 HTML 架構到複雜的鍵盤互動模式，以及如減少動態效果 (reduced motion) 等特定使用者偏好。透過整合這些模式，團隊能確保其應用程式可供使用螢幕閱讀器、純鍵盤操作或具有不同運動與認知能力的使用者操作。對於前端工程師在元件設計、實作與程式碼審查階段，這是不可或缺的工具。

• 實作語意化 HTML 地標 (header, nav, main, footer)，以改善輔助科技的文件結構與導覽體驗。

• 提供螢幕閱讀器支援模式，包括使用 sr-only 類別隱藏文字標籤，以及運用 aria-live 區域處理動態內容更新。

• 提供強大的鍵盤導覽指引，專注於元件互動性、焦點管理 (focus management)、模態視窗 (modals) 的焦點捕捉，以及使用 focus-visible 的視覺指示。

• 包含針對 prefers-reduced-motion 的使用者偏好處理，透過停用或簡化裝飾性動畫來減輕前庭障礙使用者的負擔。

• 確保觸控目標符合性，強制執行最小尺寸需求 (如 44x44px)，以支援運動障礙使用者或行動裝置用戶。

• 專為 JavaScript 生態系中的 React 開發人員、無障礙審核員與 UI 設計師所設計。

• 最適合在元件架構階段或重構既有 UI 互動元件時應用。

• 強調使用如 react-aria-components 等高階抽象工具，以簡化複雜的無障礙狀態管理。

• 預期使用方式是在程式碼審查期間參考特定規則文件，以驗證語意正確性與輔助科技相容性。

• 限制條件包含需與儲存庫的模組化規則結構保持一致，將每項無障礙原則獨立為聚焦且可操作的指引。