大家好，歡迎回到使用 NVDA 螢幕閱讀器檢測無障礙的系列文章，還記得在上一篇文章中，我們介紹了 NVDA 瀏覽網頁的方式嗎？我們會使用單鍵導覽的方式在網頁中的各種元素之間移動，便能夠透過 NVDA 來讀取網頁內容並與網頁元素作互動。
本篇我們延續上次的話題，首先來看看網頁上更多的元素與操作方式，接著我們會利用一個實際的範例讓大家練習，藉此更好地掌握 NVDA 是如何瀏覽網頁的，讓你更能掌握在設計及檢測網頁或應用程式時應該留意哪些部分。那我們就開始吧！
之前我們已經介紹過在網頁中最常見的幾種元素，標題、連結、圖片等等，先來複習一下各個元素及其對應的單鍵字母：
- H：標題 (Heading)
- 主鍵盤 1 至 6：跳到 1 至 6 級標題
- K：連結 (Link)
- L：清單 (List)
- T：表格 (Table)
- D：地標 (Landmark)
- G：圖片 (Graph)
除了上篇介紹屬於內容呈現的元素外，網頁中還有另一類型的元素「表單欄位 (form field)，像是編輯區、下拉式方塊、核取方塊、選擇鈕、按鈕等都屬於此類，簡單來說就是那些讓使用者填寫表單資料時會運用到的輸入元素。我們來看看它們所對應的單鍵字母：
- E：編輯區 (Edit Field)
- C：下拉式方塊 (Combo Box)
- X：核取方塊 (Checkbox)
- R：選擇鈕 (Radio Button)
- B：按鈕 (Button)
在實際介紹如何填寫表單欄位，或與這些元素互動前，我們需要先介紹 NVDA 的瀏覽模式與焦點模式。我們先來想一個問題，既然 NVDA 會利用不同的字母來跳至所對應的元素，那麼萬一遇到要輸入文字的狀況該怎麼辦呢？此時我們就必須區分瀏覽模式與焦點模式了。
瀏覽模式（Browse Mode）使我們能夠透過方向鍵、單鍵導覽等功能鍵在網頁中移動，且能移動到那些非互動元素上，通常用於頁面的閱讀。瀏覽模式的核心在於 NVDA 會預先載入並處理網頁內容，讓使用者能以更直觀的方式操作。最明顯的例子是，當我們使用 NVDA 一行一行讀取內容時，你可能會注意到 NVDA 所認知的「一行」，並不是畫面上看到的一行，兩者的長度可能會有所差異。
而當我們要輸入文字、與網頁上的元素直接互動時，此時我們就必須切換成焦點模式 (Focus Mode)，如此我們所輸入的文字、按下的按鍵，會直接交由網頁本身來處理。例如，我們在觀看 YouTube 影片時，想要播放或暫停、調整影片的播放位置及音量等，就會需要先切換成焦點模式，再利用播放器所提供的對應鍵盤按鍵來操作。另一個例子是，當網頁提供了自己設計的快速鍵，此時我們也必須切換成焦點模式才能使用，例如在 Google 日曆，我們可以按 C 來新增一個行程，此時就必須先切換成焦點模式再按 C，才能正常觸發動作。
預設情況下，要切換焦點模式有三種方式：
- 當使用 Tab 移動焦點進入編輯區、下拉式方塊等表單欄位時，NVDA 會自動進入焦點模式。
- 當我們使用單鍵或方向鍵移至編輯區等表單欄位上時，按下空白鍵也可以切換成焦點模式。
- 在任何位置按下 NVDA + 空白鍵來手動切換焦點模式及瀏覽模式。
如果你是透過前兩種自動切換的方式進入焦點模式的話，可以透過 esc 鍵返回瀏覽模式，但如果是第 3 種手動切換則必需在按 NVDA + 空白鍵來切換回瀏覽模式。
切換成焦點模式後，我們就可以直接輸入文字，或使用上下方向鍵在下拉式方塊中選取選項。
預設情況下，NVDA 在切換焦點模式和瀏覽模式會有音效提示，當聽到一個較高的聲音表示焦點模式；較低「嘟」的聲音則是瀏覽模式。建議不熟悉的讀者可以到 NVDA 功能表 > 偏好 > 設定 > 瀏覽模式類別，將「以音效表示焦點模式與瀏覽模式」取消勾選，這樣 NVDA 就會直接唸出當下的模式而不是音效提示了。
說了這麼多，現在我們就來實際舉一個填寫表單的範例，來看看實際使用上是如何操作的。我們所使用的是 Spotify 的註冊頁面，許多網站的註冊頁面會需要輸入一些基本資料，是很好測試對螢幕閱讀器使用者操作上是否無障礙的地方，一起來使用 NVDA 跟著操作吧！
- 點選進入 Spotify 註冊頁面。
- 首先我們可以利用方向鍵來大致瀏覽網頁內容。
- 當焦點移動到「電子郵件地址」時，表示要我們輸入電子郵件的地方，再- 按一下向下鍵可移至編輯區，此時 NVDA 會讀出編輯區相關的資訊和提示，有足夠的資訊能夠讓使用者更清楚應該填寫的內容。
- 按下空白鍵進入焦點模式，接著就可以輸入自己的 email 了，輸入好後按下 Esc 來回到瀏覽模式。
- 往下找到「下一步」按鈕後按下空白鍵來點選它。
- 接著我們會被引導至下一步「建立密碼」的步驟，在此頁面，大家可以練習一下用單鍵 E 來尋找編輯區。
- 輸入好密碼後，按「下一步」前往下一個步驟。
- 在這個步驟「介紹一下自己」頁面中，我們可以練習下拉式方塊及選擇鈕的操作。
- 用方向鍵找到選擇月份的下拉式方塊，或使用單鍵 C 跳到其上，按下空白鍵切換為焦點模式，接著就可以使用上下方向鍵來選取，選取好後按 Esc 回到瀏覽模式。
- 接著我們移到選擇性別的選擇鈕，或按單鍵 R 跳過去。一般來說我們只要移動至想要勾選的選項後按下空白鍵即可勾選，或者也可以按 NVDA+空白鍵手動切換焦點模式後，使用方向鍵來選擇項目。
- 其他欄位就請自己參考上述的說明來完成，並前往下一步。
- 在最後一個確認使用條款步驟的頁面我們可以練習核取方塊，找到後可按空白鍵來勾選它，或者使用單鍵 X 來跳到核取方塊。
從上述的範例中，我們可以特別留意，當使用 NVDA 填寫表單時，什麼樣的設計是有助於使用者理解和操作的。從使用者的角度來看：
- 表單元素是否使用正確的類型，且能順利將焦點移過去並順利填寫、互動。例如：使用一個編輯區，但卻無法在上面編輯文字。
- 表單元素是否有正確標示：例如，按單鍵 E 跳到編輯區，是否可以讀出編輯區要填寫的內容，而非只說「編輯區」。
- 是否有欄位填寫的提示，例如電子郵件範例、日期的格式、密碼設定規則等。
- 錯誤時是否清楚標示錯誤訊息並提供建議作法。例如上述的步驟 5，若輸入了一個已註冊的電子郵件，此頁面會清楚告訴我們「此地址已關聯至現有帳號。請登錄已繼續。」
透過上述簡單的範例，相信你已經對於 NVDA 操作表單欄位有清楚地認識了。不妨現在就開啟 NVDA 瀏覽一下你平常會造訪的網站，體驗一下使用 NVDA 的瀏覽模式與焦點模式吧。
此系列「螢幕閱讀器檢測無障礙，自己來！」介紹 NVDA 的文章到此先告一個段落，未來，我們有機會可以分享更多實際案例，看看怎樣的設計對於螢幕閱讀器使用者是友善的，什麼又是有障礙的；同時也可以從工程端，進一步介紹更多開發技術與設計技巧上的細節，讓大家更清楚在開發網頁或應用程式時應該注意什麼，才能使螢幕閱讀器使用者的體驗更加分！
