🛠️ Lecture 13: 無障礙網頁實戰：用 Vibe Coding 打造視障專屬「節拍器」Web App

🎧 錄音室開場：為視障者量身打造的專屬工具

• Ray：「歡迎來到【AGY 深夜科技沙龍】！在進入 NVDA 外掛開發之前，今天我們要來點不一樣的。很多視障音樂人或有復健需求的朋友，常常找不到一個完全符合螢幕閱讀器操作的『節拍器（Metronome）』。」
• 小咪：「對耶！市面上的節拍器 App，不是有很多無障礙焦點亂跳的問題，就是按鈕根本沒標籤，完全不知道現在設幾拍！」
• Ray：「沒錯！所以今天，我們不求人。我們要教大家如何使用 Vibe Coding 提示詞（Prompt），直接指揮 AI 幫我們寫出一個百分之百無障礙、不卡焦點的網頁版節拍器。順便讓大家了解，一個完美的無障礙網頁（Web ARIA），在代碼底層應該長什麼樣子！」

🎯 實戰專案：無障礙網頁節拍器 (Metronome Web App)

• 專案類型：純網頁開發 (HTML + JavaScript + CSS)
• 功能需求：
  1. 能夠調整 BPM (每分鐘節拍數)。
  2. 能夠設定每小節有幾拍 (例如 4/4 拍、3/4 拍)，第一拍要有重音提示。
  3. 點擊「播放/暫停」按鈕控制。
  4. 無障礙核心：操作不能干擾 NVDA 語音！數值調整必須用語音即時回饋，按鈕必須有明確的 ARIA 標籤。

📝 大導演的 Vibe Coding 派工單 (Prompt)

我們不需要去背誦 JavaScript 的 setInterval 或 AudioContext 怎麼寫。我們只要給 AI 嚴格的「無障礙規範」！

請將以下 Prompt 貼給 AI：

「你現在是頂級的 Web 無障礙工程師。請幫我寫一個單一檔案的 HTML 網頁版節拍器 (包含 CSS 與 JS)。

功能需求： 1. 提供一個滑桿 (<input type="range">) 調整 BPM (範圍 40-208)，並有一個文字框可手動輸入。 2. 提供一個下拉選單選擇節拍 (2/4, 3/4, 4/4)。 3. 一個播放/暫停按鈕。使用 Web Audio API 發出準確的滴答聲（第一拍頻率高一點）。

無障礙 (A11y) 嚴格規範（請嚴格遵守）： 1. ARIA 標籤：所有按鈕、輸入框必須有 aria-label。 2. 焦點管理：點擊播放後，按鈕的文字要變成『暫停』，且焦點不能丟失。 3. Live Region 即時回饋：請建立一個 aria-live="polite" 的隱藏 div。當使用者用鍵盤左右鍵調整 BPM 滑桿時，請把目前的 BPM 數值寫入這個 div，讓 NVDA 能即時朗讀出來，而不會被節拍器的聲音蓋過！ 4. 鍵盤支援：所有元素必須能透過 Tab 鍵導航。

請直接給我完整的 index.html 程式碼。」

💡 解密代碼：AI 幫我們寫了什麼無障礙黑科技？

當 AI 產出 index.html 後，你只要用瀏覽器（Chrome 或 Edge）雙擊打開，就能開始使用了。但身為大導演，我們要「看懂」AI 寫的核心架構：

1. 無障礙靈魂：aria-live 即時播報區

在代碼中，你會看到這段：

<div id="announcer" class="sr-only" aria-live="polite"></div>

這是一個視覺上隱藏 (sr-only) 的區塊。它的核心是 aria-live="polite"。這個屬性會告訴 NVDA：「只要這裡面的文字改變了，請在你不忙的時候，把文字唸出來。」 當你拉動滑桿時，AI 的 JavaScript 會自動執行 announcer.innerText = "目前速度 " + bpm + " 拍";。這樣一來，NVDA 就能順暢地讀出數字！

2. 語意化元件：<input type="range">

早期的網頁可能用好幾個 div 去畫一個假滑桿，導致 NVDA 只會唸「圖形」。AI 在這裡使用了 HTML5 原生的 type="range"，NVDA 看到這個，就會自動把它翻譯成 NVDAObject 裡的「滑桿 (Slider)」，並且支援方向鍵操作。這印證了我們在前面章節學到的「Web ARIA 映射」原理！

🎓 結語

透過這個網頁節拍器專案，我們學會了如何把無障礙規範（如 ARIA 標籤、Live Region）寫進 Prompt 裡。只要掌握這些術語，AI 就能幫你把任何普通的網頁工具，變成視障者專屬的無障礙神器！

👉 下一堂課：Lecture 13.5 拆解 NVDA 核心大腦黑盒子
👉 回課程大綱：學習地圖