今天的主題是「讓網站會說話」，目標不是為網站加上更多動畫或效果，而是讓它在無聲的環境裡，也能被理解、被操作，這是一次關於「人性化互動」的練習，讓網站重新學會與人對話，我為每一個互動元件補上了角色（role）、說明（aria-label），讓瀏覽器能把它們清楚地介紹給使用者，以前那個沉默的垃圾桶圖示，現在成了「刪除任務：喝水」。一個按鈕不再只是按鈕，而是一句完整的話，能被聽見、能被理解。

我也讓網站開始「回應」，過去，當任務被新增或刪除，畫面只是靜靜地變化，對一般使用者來說沒問題，但對視覺受限或使用螢幕閱讀器的人來說，這些變化是「無聲的」，於是我加上了 aria-live="polite" 的區域，並使用 useAnnouncer() composable，每當有任務新增、刪除或完成時，就會自動發出一段訊息，例如：「已完成任務：散步 10 分鐘」，這樣溫柔的回饋。

為了讓鍵盤操作更流暢，也重新設計了焦點的樣式，當按下 Tab 鍵時，焦點會以柔和的藍光框起當前的按鈕或輸入框，就像舞台上的 spotlight，那一圈光告訴使用者：「現在輪到我了。」，這是極細微卻重要的變化，因為希望能讓使用者知道自己身在何處，不再迷失在畫面中，除此之外，我也確保所有操作都能只靠鍵盤完成，無論是新增、刪除、切換篩選、寄信提醒或改變主題，只要用 Tab、Enter、Space 都能完成整個流程。

有趣的是，這些修改完成後，網站外觀看起來幾乎沒有變，顏色沒變、排版沒變、功能沒變，但整個架構變得更有靈魂，App.vue 裡新增了 Skip Link，讓鍵盤使用者能直接跳到主要內容，不需要一格格地按 Tab，TaskList.vue 的輸入框和提示訊息多了 aria-describedby 與 aria-invalid，確保錯誤能被朗讀出來。

Toolbar.vue 的篩選區改成了 role="tablist"，能讓螢幕閱讀器理解那是一組可切換的選項。StatsBar.vue 的統計區則成了 role="status" 區塊，每當完成率變動時都能被即時朗讀，最關鍵的是，整個專案的焦點管理都改為使用 :focus-visible，這樣滑鼠使用者不會看到多餘的外框，而鍵盤使用者卻能清楚地知道當前焦點。

雖然乍看之下這些改動很「安靜」，但它們讓網站變得前所未有地有溫度。它不再只服務「看得見的人」，而是為所有人開了一扇門，這也是我今天最深的體會——所謂的「可及性」，並不只是技術規範，而是一種對人的理解，期待明天的文章吧！