FOUNDATIONS > Accessibility
Accessibility
SyncAI 的設計核心在於確保每一位使用者，無論其身體能力或環境限制，都能流暢地與我們的數位介面互動，我們遵循 WCAG 2.1 標準，將無障礙視為設計卓越的必要條件。
色彩對比度
WCAG 2.1AA/AAA
Primary Color#5347A8
7.41:1
PASS AAA
確保品牌主色在白色背景上具備足夠的辨識度，適用於標題與強調元素。
Anchor Grey#515353
7.74 : 1
PASS AAA
灰階色調經過精確校準，確保內文段落即便在長篇閱讀下也能保持高度舒適感。
文字可讀性
一般內文 (NORMAL TEXT)
14px 以上文字必須達到至少 4.5:1 的對比比率。
大型文字 (LARGE TEXT)
24px 或 18.5px 加粗文字需達到 3:1 比率。
互動元素 (ACTIVE COMPONENTS)
狀態提示與圖示應具備獨立可辨識性。
鍵盤導覽規則與路徑
邏輯導覽順序
Tab 鍵導覽必須遵循視覺佈局（左至右、上至下），任何模態視窗開啟時，導覽焦點必須鎖定在該組件內。
顯著聚焦狀態
所有互動元素在獲得焦點時必須具備高對比度的外框，建議使用 2px 以上寬度並保持與背景的間距。
快速跳過連結
頁面起始處應包含隱藏的跳至主內容連結，讓鍵盤使用者能避開重複的導航選單。
系統導覽路徑圖解
1. Header
2. Sidebar
Ads/Side
3. Main Content
4. Footer
:focus-visible {
outline: 3px solid #5C50B2;
outline-offset: 4px;
border-radius: 4px;
}觸控目標規範
為確保行動裝置與觸控螢幕的精確互動，減少誤觸，系統內所有可點擊元件（按鈕、選單、切換開關）必須符合下列最小尺寸規範。
4444
最小觸控區MIN 44 X 44 PX
5656
理想觸控區OPTIMAL 56 X 56 PX
目標間距8PX MINIMUM GAP
螢幕閱讀器支持
ARIA語意化標籤
對於純圖示或複雜互動組件，必須使用 aria-label 提供精確的內容描述，確保輔助技術能正確解讀。
LIVE動態內容通知
動態更新的訊息（如表單驗證錯誤）需設置為 polite 或 assertive 級別通知使用者。
開發者實作
使用語義化 HTML5
優先使用 <main>, <nav>, <section> 等標籤。
表單標籤明確綁定
確保每個輸入項都有對應的 label 或 aria-labelledby。
避免純色彩傳達資訊
錯誤狀態不可僅依賴紅色，需搭配圖示或文字說明。
替代文字檢核
所有非裝飾性圖片皆須具備描述性的 alt 屬性。