LESSON-12 · TOPIC 03
能在驗證失敗時同步 aria-invalid，並以 aria-describedby 指向真實存在的提示／錯誤 ids。
能在驗證失敗時同步 aria-invalid，並以 aria-describedby 指向真實存在的提示／錯誤 ids。
只有紅框不會把錯誤原因傳給非視覺使用者；ARIA 關聯必須對應可讀文字且與實際 validity 同步。
要修改的檔案：files/starter/index.html
定位：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。｜依 starter-3 定位，只修改「aria-invalid 與 aria-describedby」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
Email 欄位有紅色外框，但螢幕閱讀器只讀欄位名稱，沒有錯誤原因。
起始狀態：input 已指向 email-help email-error，aria-invalid=false；兩個描述節點存在。
runtime attribute 由false變true；required facts ariaInvalid=true、describedByExists=true。
驗收證據：before=false、after=true、ariaInvalid=true、describedByExists=true
客製表單驗證需要在錯誤出現後同步可存取狀態與說明時。
常見混淆：ARIA 不會執行 constraint validation；它只傳達狀態，程式仍需判定與更新。
這段程式是理解起點，不是要你直接跳過 Starter。
aria-invalid 告訴輔助技術『這格有錯』；aria-describedby 再告訴它錯在哪裡、怎麼修。
正式說法：aria-invalid communicates an invalid state；aria-describedby references one or more element IDs whose accessible text contributes to the control description。
<input aria-invalid="true" aria-describedby="email-help email-error"><p id="email-error">請輸入有效 Email</p>每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。。
檔案：files/starter/index.html 定位：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。
要做：執行實驗把 aria-invalid 由false改true；完整 probe 驗 describedby 每個 id 都存在。
預期：runtime attribute 由false變true；required facts ariaInvalid=true、describedByExists=true。
證據：before=false、after=true、ariaInvalid=true、describedByExists=true
卡住先查：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。
檔案：files/starter/index.html 定位：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime attribute 由false變true；required facts ariaInvalid=true、describedByExists=true。
證據：before=false、after=true、ariaInvalid=true、describedByExists=true
卡住先查：把 aria-describedby 以空白拆成 ids，逐一 document.getElementById。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
格式 name@example.com
請輸入有效 Email
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先確保錯誤文字是真實 DOM，不只 CSS pseudo content。
驗證失敗時設 aria-invalid=true，describedby 指向 help 與 error ids。
完整解答與原因：狀態 attribute 與兩個存在的描述節點共同形成可讀錯誤；修正後應同步改回 aria-invalid=false。