本頁只練什麼
能說明 CSS order 只改變視覺排列，不改 DOM、閱讀或鍵盤焦點順序。
把主要操作視覺移到最前面卻留在 DOM 最後，會讓鍵盤與螢幕閱讀器使用者遇到與畫面不一致的流程。
要修改的檔案：files/starter/style.css
定位：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。｜依 module-4 定位，只修改「order 與鍵盤順序風險」的責任。
LESSON-07 · TOPIC 04
order 與鍵盤順序風險
能說明 CSS order 只改變視覺排列，不改 DOM、閱讀或鍵盤焦點順序。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
設計稿把第三個『立即預約』卡片視覺移到第一，但 HTML 仍把它放在服務介紹之後。
起始狀態：DOM 依 A、B、C；C 設 order:-1，因此視覺為 C、A、B。
完成後要看到
受控 runtime 聚焦後 activeId=order-link-a；人工 Tab 序列仍為 A→B→C，而視覺順序為 C→A→B。
驗收證據：runtime focused=true、activeId=order-link-a；人工證據保存視覺序列與三步 document.activeElement 序列
何時會用到
只做不影響理解的小型視覺調整；若順序代表任務流程，應直接修正 HTML DOM 順序。
常見混淆：tabindex 正值也不是安全修正；它會建立另一套難維護的焦點順序。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
order 與鍵盤順序風險 Flex order and keyboard focus order
order 像只把桌上的卡片挪位置，文件原本的閱讀與按 Tab 路線沒有跟著搬。
正式說法：The order property changes flex item ordinal groups in visual layout；it does not reorder DOM nodes and must not be used to repair logical reading or sequential focus order。
.card-c{order:-1} /* 視覺 C,A,B；Tab 仍依 DOM A,B,C */三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。要做：執行受控 focus 實驗聚焦 DOM 第一個連結 A；再只用 Tab 從頁首記錄 A、B、C，與 CSS order 的視覺 C、A、B 對照。
預期：受控 runtime 聚焦後 activeId=order-link-a；人工 Tab 序列仍為 A→B→C，而視覺順序為 C→A→B。
證據：runtime focused=true、activeId=order-link-a；人工證據保存視覺序列與三步 document.activeElement 序列
卡住先查：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：受控 runtime 聚焦後 activeId=order-link-a；人工 Tab 序列仍為 A→B→C，而視覺順序為 C→A→B。
證據：runtime focused=true、activeId=order-link-a；人工證據保存視覺序列與三步 document.activeElement 序列
卡住先查：先在 Elements 讀三個 a 的 DOM 順序，再看 Computed order，最後才按 Tab。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
order 與鍵盤順序風險runtime fixture · read-only demo
本主題示範畫面：
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先分開記錄 DOM 順序、畫面順序與焦點順序。
提示 2｜關鍵片段
不要加正 tabindex；從頁首連按 Tab 並記 document.activeElement.id。
提示 3｜完整解答與原因
完整解答與原因：order:-1 只讓 C 視覺提前；DOM 與 sequential focus navigation 仍是 A→B→C，因此有流程意義時應重排 HTML。