網站製作
網站上的「按鈕」都一樣？用鍵盤驗收連結與動作
網站上的方框看起來都像按鈕，有的卻是前往另一頁，有的是展開視窗，有的是送出資料。只用滑鼠點得動，還不足以判斷做法正確。今天只練一件事：先分清楚「導覽」與「動作」，再用鍵盤留下可重做的驗收紀錄。
適合自己製作網站、使用 AI 產生頁面，或需要驗收外包成果的個人、工作室與中小企業。準備桌面瀏覽器、鍵盤與可編輯的本機練習頁或測試站；不需要付費工具，也不要直接拿正式付款、刪除或寄信功能練習。
【先寫行為，再選元件】
W3C 的連結模式用來參照資源，目標可以在同頁，也可以是其他頁面；按鈕模式則觸發動作，例如開啟對話框。連結通常以 Enter 啟動；按鈕取得焦點後，Enter 與空白鍵都應能啟動。外觀可以設計，行為仍要符合用途。
虛構教材有兩個控制項：「閱讀練習說明」前往另一份文件，「增加練習次數」只把目前頁面的數字加一。前者使用帶 href 的原生 a 元素，後者使用原生 button，並設定 type="button"。這不是客戶網站，也沒有真實表單送出。
【照四步做】
1. 寫兩列規格：「文字／用途／預期結果」。第一列是閱讀說明／導覽／打開目標文件；第二列是增加次數／動作／數字加一且留在目前頁。先別用顏色、圓角或是否有底線決定種類，也不要只寫「點了有反應」。
2. 在測試頁建立這兩個元件。可交給既有網站編輯器或 AI 工具處理，要求保留原生元素：連結必須有真正的目的網址，增加次數則綁定加一的動作。請不要把整個功能只做成有點擊事件的普通文字區塊，再以外觀冒充完整操作。
3. 重新載入練習頁，從頁面起點按 Tab，確認焦點能到「閱讀練習說明」，而且看得見焦點位置；按 Enter，記錄最後網址與目標頁標題。確認這是預定文件，而非空白頁、錯誤頁或只是滑鼠樣式改變。若測試站有額外導覽，Tab 次數可能不同，以實際焦點為準。
4. 回到練習頁並重新載入，把計數歸零。用 Tab 到「增加練習次數」，按一次 Enter，確認顯示 1；再按一次空白鍵，確認顯示 2。記錄是否仍在原頁、焦點是否可見、有沒有意外送出表單。每次按鍵只應觸發一次，不能跳成 2、4 後還寫通過。
【今天實際做了什麼】
2026/10/30，我建立兩份本機 HTML 文件，在本機伺服器與 Chrome 操作：Tab 能到連結，Enter 打開 target.html，頁面標題為「練習說明」；重新載入首頁後，Tab 能到按鈕，Enter 後計數為 1，空白鍵後為 2。練習檔與操作結果已保存。
這只證明這份本機範例的上述行為，沒有測正式網站、手機、不同瀏覽器、螢幕閱讀器或完整無障礙符合性，也沒有測表單收件。不要把本機通過寫成「全站已驗收」或「獲得認證」。
【交付與驗收】
交一張兩列紀錄表，填上測試日期、頁面、控制項文字、預期行為、按鍵、實際結果與待修問題。連結的成果是到達正確資源；按鈕的成果是預定動作完成。只看文字變色、游標變手指或一張成功截圖，都不能取代這兩個結果。
若你不會編輯 HTML，可以在自己的測試站找一個導覽連結與一個無破壞性的動作，照上述步驟記錄；找不到計數器就改寫成該動作的具體成果，不冒稱做過本機教材。沒有測試權限的欄位，填「未測」。
【常見錯誤與限制】
第一是用空連結假裝動作；有網址外觀，仍要檢查實際用途。第二是加 role="button" 就以為已完成：角色宣告不會自動補齊自製元件的焦點與鍵盤行為，能用原生元件時先用原生元件。第三是忘了按鈕位於表單時可能觸發提交；不負責提交的按鈕應明定 type="button"，再測實際行為。
也別把連結按空白鍵沒有開啟，直接判為故障；本題連結驗收用 Enter。鍵盤走查與滑鼠走查要分開記，任何一輪未完成都保留未測。
本機教材可零額外工具費完成；網站編輯器、主機與 AI 工具的方案及額度另計，碰到限制就記未完成，不需為這次練習購買額度。今天的作業是替自己的一頁選兩個控制項，先判用途再實際走一次，交出兩列可核對的紀錄。
來源（2026-10-30 查核）：
整理／配圖：客脈 AI。配圖為 AI 示意圖，非真實網站或認證。
0
0
61 0
拍手
留言
分享
Line
複製連結
收藏