前端互動元件無障礙驗收清單：按鈕、表單、選單與焦點狀態

網站的互動元件很容易在「看起來可以點」之後就被當成完成，但真正上線後，讀者可能會用鍵盤操作、螢幕閱讀器、手機縮放、瀏覽器自動填表或不同色彩模式進入頁面。若按鈕沒有明確標籤、表單錯誤只靠顏色提示、選單無法用鍵盤關閉，網站就會從品牌內容站變成難以使用的模板頁。

UCAMC 過去累積了許多 JavaScript、CSS 與前端互動筆記。現在進入長期內容維護階段，除了功能是否能跑，也要把互動元件整理成可驗收、可回歸測試的清單。這份文章可作為首頁 CTA、Blog 卡片、表單、導覽列與內容下載頁的上線前檢查表。

1. 先盤點所有互動入口

不要只檢查首頁最醒目的按鈕。前端互動元件通常散在導覽列、文章卡片、分類連結、表單、搜尋框、下載連結與外部連結中。建議先用一張表列出頁面中所有可操作元素。

元件	常見位置	需要確認
主要 CTA	Hero、活動區塊、文章結尾	文案是否具體、可鍵盤聚焦、狀態清楚。
次要連結	Blog 卡片、分類頁、Footer	連結文字是否能單獨理解目的地。
表單欄位	聯絡表單、訂閱、下載頁	label、錯誤提示與必填狀態是否明確。
選單 / 篩選器	Header、分類導覽、下拉選單	展開、收合、Esc 關閉與焦點順序是否正常。
外部連結	工具推薦、素材下載、引用來源	是否說明會離開網站或開新視窗。

先盤點，再驗收，才能避免只修到視覺上看得到的那一顆按鈕。

2. 按鈕文字要能說出下一步

按鈕文字不應只寫「更多」、「點我」、「送出」。讀者在掃描頁面時，需要知道按下去會得到什麼。對內容站來說，CTA 的任務通常是閱讀文章、下載模板、查看清單或進入分類。

較好的寫法：

閱讀完整清單
下載檢查模板
查看 WordPress 維護流程
繼續閱讀前端筆記

若畫面空間有限，可以讓視覺文字短一點，但用 aria-label 補足上下文。例如文章卡片的按鈕可以顯示「閱讀文章」，但輔助標籤應包含文章標題，避免螢幕閱讀器聽到一整排重複的「閱讀文章」。

3. 鍵盤操作要有完整路徑

無障礙驗收最基本的一步，是不要碰滑鼠，只用鍵盤走一次主要流程。

操作	驗收重點
Tab	焦點是否照視覺順序移動，沒有跳到看不見的元素。
Shift + Tab	能否反向回到上一個操作點。
Enter / Space	按鈕與連結是否能被啟動。
Esc	彈窗、選單、下拉層是否能關閉。
重新整理頁面	焦點與表單狀態不應造成不可理解的殘留畫面。

如果某個元件只能用滑鼠 hover 才能看到內容，就要補上 focus 狀態。若行動版才會出現漢堡選單，也要在窄版寬度重新測一次。

4. 焦點狀態不能被 reset 掉

許多 CSS reset 會把 outline 移除，讓鍵盤使用者不知道目前停在哪裡。品牌網站可以設計更漂亮的 focus 樣式，但不能讓焦點消失。

建議原則：

• 焦點外框與背景要有足夠對比。
• 不要只靠非常淡的陰影表示焦點。
• :hover、:focus-visible、:active 要有一致但可辨識的狀態。
• 主要 CTA 與文字連結都要看得出鍵盤焦點。

範例：

.interactive-link:focus-visible {
  outline: 3px solid rgba(255, 148, 70, 0.65);
  outline-offset: 3px;
}

UCAMC 的品牌色可以用橘色作為低噪音焦點提示，但要確認在白底、深藍灰文字與卡片背景上都清楚。

5. 表單錯誤提示不要只靠顏色

表單是最容易漏掉無障礙細節的地方。錯誤提示若只把框線變紅，讀者可能不知道錯在哪裡，也可能因色覺差異而看不出變化。

項目	建議做法
label	每個欄位都要有可讀 label，不只 placeholder。
必填	用文字說明「必填」，不要只放星號。
錯誤	在欄位旁顯示具體文字，例如「Email 格式不正確」。
說明	複雜欄位加上 help text，並與欄位建立關聯。
成功	送出後顯示成功訊息，避免只清空表單。

若表單會用 AJAX 送出，請確認錯誤訊息在送出後會被讀者看見，而不是只在 console 裡出現。

6. 手機版也要驗收觸控與閱讀距離

手機版不是只看有沒有水平捲動。互動元件還要確認手指是否容易點到、文字是否足夠大、相鄰按鈕是否太近。

建議至少檢查：

1. 390px 寬度下，主要 CTA 是否還在首屏附近。
2. 卡片中的連結是否不會被圖片或 overlay 擋住。
3. 連續的標籤、分類、按鈕是否有足夠間距。
4. 表單欄位在手機鍵盤彈出後仍能看見輸入位置。
5. 長標題不會把按鈕擠出容器。

這些問題通常不會讓 npm run build 失敗，但會讓網站在真實使用情境中顯得粗糙。

7. 上線前的 UCAMC 驗收流程

前端互動元件的日常維護，可以和內容站部署流程放在一起：

階段	驗收內容
開發中	檢查元件語意、按鈕文字、label、focus 樣式。
本機驗收	執行 lint、build，並用 local production server 開啟代表性路由。
視覺巡檢	桌機與 390px 手機寬度各看一次首頁、Blog、文章頁。
SEO 檢查	確認互動文案沒有變成裸露 URL 或 placeholder。
上線後	抽查正式網址、sitemap、主要 CTA 與文章連結。

這份清單的重點不是一次把所有元件改成完美，而是讓每次新增內容、調整 CTA 或整理舊文章時，都能快速確認「看得到、聽得到、按得到、回得來」。長期經營的內容品牌網站，可靠的互動細節會比一次性的視覺特效更能累積信任。