又到了我們介紹如何運用 NVDA 來自我檢測軟體無障礙的系列文章了,在上一篇我們詳述了如何運用鍵盤來操作電腦,並針對 Windows 快速鍵與 NVDA 指令鍵做了介紹。接續上篇的討論,這次我們要更進一步來看看使用鍵盤搭配 NVDA 在更多不同類型的 UI 元素的操作方法以及在網頁瀏覽中常用的技巧。那麼我們就趕緊看下去吧!
在上一篇文章中,我們透過瀏覽檔案和查看時間的例子,向大家展示了使用鍵盤的方向鍵、常見的 Windows 快捷鍵以及 NVDA 指令鍵的相關操作。
這些範例主要是以瀏覽資訊為主的任務。然而,在日常電腦操作中,我們除了查看及瀏覽外,也經常需要與各種 UI 元素 (Element) 作互動,例如調整核取方塊、下拉選單和滑桿等的狀態、數值或選項。對於這些 UI 的操作,可以大致分為兩種操作方式:
- 對於需要調整數值或選項的 UI 元素,如下拉選單和滑桿,我們可以使用方向鍵進行調整。
- 於需要切換或點擊的 UI 元素,如核取方塊、按鈕等等,我們可以使用空白鍵進行操作。
我們利用以下的範例,來實際認識不同類型的元素是如何透過鍵盤進行互動的。這邊我們使用了 NVDA 的語音設定對話框來做為示範,它是一個典型的 Windows 視窗,具有各種不同類型的 UI 元素。在這個設定視窗中,你可以針對 NVDA 的語音速度、音調、音量,以及相關報讀的設定作調整。現在,我們就開啟 NVDA 一起跟著試試看吧!
- 確認 NVDA 已開啟,並按
NVDA+N開啟 NVDA「功能表」 - 利用上下方向鍵來選擇「偏好」
- 此時你會聽到 NVDA 提示「子功能表」,表示該項目可以展開下一層功能表,按向右鍵來展開它
- 接著使用上下方向鍵找到「設定」,並按下
Enter鍵來開啟,此時畫面上就會出現 NVDA 設定對話框了 - 此時焦點會停在「類別」清單上,我們可以使用上下方向鍵來選擇類別,找到「語音」這個類別
- 接著,要瀏覽各個項目,我們需要按
Tab,NVDA 會依序唸出每個項目的名稱及它的元素類型、狀態等。若要移回前一個項目則是按Shift+Tab - 我們找到「速度滑桿」這個項目,這是一個能夠讓我們調整數值的地方,我們可以使用方向鍵來增加、或減小數值,此外,我們也可以按
Home/End鍵來直接調整到最大值或最小值;Page Up及Page Down則可以比方向鍵更大的幅度來調整數值。 - 繼續按
Tab找到「自動語言切換核取方塊」,這是一個可以讓我們勾選的項目,要打勾或取消可以按空白鍵來切換,NVDA 也會讀出狀態。 - 繼續按
Tab找到「標點及符號等級下拉式方塊」,此處我們可以直接使用上下方向鍵來選擇項目,也可以按下Alt+向下鍵來展開再選擇。 - 最後,若你想保留此次設定,按
Tab找到「確認」按鈕後按下Enter;若不想保存則找到「取消」按鈕。
恭喜你成功利用鍵盤完成 NVDA 的語音設定了!
除了傳統的應用程式外,現在有許多軟體服務是運行在基於瀏覽器的網頁上。因此,讓螢幕閱讀器在網頁上流暢的閱讀與互動也是很重要的。
瞭解 NVDA 在網頁中的瀏覽方式及其特色功能,並巧妙運用,結合 NVDA 的檢測操作,我們可以更深入地感受到哪些地方可能對螢幕閱讀器使用者造成困擾,並進行優化。那麼,接著就一起來看看 NVDA 在網頁瀏覽時的操作方法和特色吧。
瀏覽器的快速鍵 — 讓頁面切換隨心所欲
目前市面上的主流瀏覽器,如 Google Chrome、Firefox 等,都對螢幕閱讀器提供了良好的支援,使用者可以根據自己的喜好來選擇。而在上網瀏覽頁面的過程中,螢幕閱讀器使用者會需要一些瀏覽器的快捷鍵來輔助。和上篇提到的 windows 快速鍵相同,這些瀏覽器快速鍵並非由 NVDA 所提供,因此在 NVDA 關閉的情況下也能夠使用,以下舉幾個常用的快速鍵,想了解更多可以查看瀏覽器的按鍵說明:
- F6 / Shift+F6:移到瀏覽器中的不同區塊,如網址列、下載列、書籤列等
- Tab / Shift+Tab:移到上/下一個元素或控制項
- Ctrl+T:開啟一個新分頁
- Ctrl+(Shift)+Tab:移到上/下一個分頁
- Ctrl+W:關閉分頁
- Alt+D (或 Ctrl+L):移到網址列- Alt+向左/右方向鍵:移到上/下一頁
NVDA 瀏覽文件 — 從整頁掃視到字元細讀
了解了瀏覽器的常用快速鍵,接著我們來看如何瀏覽網頁內容。使用 NVDA 閱讀網頁,最基礎的方式就是透過方向鍵來閱讀,我們可以利用上下方向鍵來一次讀取一行、左右方向鍵來一次讀取一個字元、PageUp 或 PageDown 來一次移動較長的距離等。值得注意的是,你可能會發現在使用上下方向鍵閱讀文件時,NVDA 所移動的並非畫面上的一行,這是由於 NVDA 一次處理整個網頁內容,並按照所自訂的每行最多字元數來分段,因此使用時與實際版面會有差異,但只要能夠逐段讀出,這樣的差異是可以接受的。
此外,我們也可以利用 Tab 來跳到不同的元素上,例如按鈕、連結或編輯區等。然而,無論是方向鍵、Tab 等,利用這樣的方式瀏覽網頁並不是很有效率,除了無法快速找到想瀏覽的內容之外,也很難理解網頁內容的布局與架構,因此螢幕閱讀器的使用者通常會學習另一種導覽方式「單鍵導覽」。
NVDA 單鍵導覽 — 快速移動瀏覽元素
我們都知道網頁內容是由不同的元素類型所組成的,包括標題、連結、按鈕、圖片、表格等等,而現今的螢幕閱讀器能夠解析這些網頁上的元素,並將這些元素的類型、狀態等資訊讀出來,同時使用者也可以利用鍵盤上的字母來跳到對應的元素上。此種瀏覽方式就稱為「單鍵導覽 (Single Key Navigation)」,這樣的方式不僅幫助使用者了解網頁的組成內容、更快找到要瀏覽的位置,更能夠讓視障者在無法看清網頁畫面的情況下,儘可能了解網頁內容的架構。
小提醒:如果在網頁上按下方向鍵或字母無法移動時,請先按一次 NVDA + space 切換模式
以下我們先列出一些常見的元素及其對應按鍵,接著我們再用一個實際的案例來操作看看:
- H:標題 (Heading)
- 主鍵盤 1 至 6:跳到 1 至 6 級標題
- D:地標 (Landmark)
- K:連結 (Link)
- B:按鈕 (Button)
- G:圖片 (Graph)
- L:清單 (List)
- T:表格 (Table)
- E:編輯區 (Edit Field)
- C:下拉式方塊 (Combo Box)
- X:核取方塊 (Checkbox)
- R:選擇鈕 (Radio Button)
以上的按鍵,按一下會移到下一個該類型的元素,加上 Shift 則會移到上一個該類型的元素。
- 開啟瀏覽器,通常你可以按下 Windows 開啟「開始」視窗,直接輸入瀏覽器名稱來找到它
- 開啟後若焦點不在網址列,按下 Alt+D 來移至網址或搜尋列
- 輸入「A11y 新手村」後按下 Enter 來開始搜尋
- 按 H 移到標題,查看每一則搜尋結果,找到「A11y 新手村 — Medium」
- 此時我們可以按向下鍵來讀取網頁預覽內容
- 按 Shift+H 往上移回標題,接著按 Enter 鍵進入
- 按 K 來移到不同連結上,並聆聽 NVDA 所讀出的名稱及類型
- 在此網頁中,也可以按標題來瀏覽不同文章的標題,你也可以嘗試移到按鈕、編輯區、圖片等不同的元素上
我們前面介紹的單鍵導覽功能,雖然可以迅速在特定類型的項目間移動,但它實際上會改變當前的焦點。當我們只是想瀏覽整體結構而不需要實際移動焦點時,這樣的特性可能會造成一些不便。
此外,因單鍵導覽是以迅速移動焦點為目標而設計,它的核心概念是基於「上一個」和「下一個」元素發展的功能,它並未能呈現例如子元素位於父元素內部這種層次結構的概念。因此,NVDA 另外具備了「項目清單 (Item list)」功能,這個功能可以將具有層次結構的元素,例如地標或標題,以樹狀結構來呈現,這樣可以讓使用者更了解元素間的層級關系。
詳細的操作功能如下:
- 在網頁上按下 NVDA+F7 打開「項目清單」對話框。
- 按下 Tab 鍵,移動到「類型群組」選項後,再利用方向鍵選擇欲瀏覽的類型。
- 接著按 Tab 鍵移至樹狀檢視,利用上下方向鍵瀏覽項目。若該項目含有子層級,將會聽到展開或摺疊子項目的提示。
- 利用向右方向鍵可以展開子層級。若該子層級已展開,則其效果等同於向下方向鍵,即移到下一項目。
- 按向左方向鍵可回到上一個層級,再按一下向左方向鍵則會將該項目的子層級摺疊。
- 選擇到某個項目後,按下 Tab 會找到一個「移到」的按鈕,點選後,便可將焦點移至網頁上的該元素。
- 若選擇的元素類型是連結或按鈕等可點擊的項目,除透過「移到」按鈕將焦點移過去之外,也可以透過「啟動」按鈕來直接點選該元素。
- 與前述步驟相同,在瀏覽器中搜尋「A11y 新手村」,並進入 Google 搜尋結果頁。
- 按下 NVDA+F7 開啟項目清單對話框。
- 按下 Shift+Tab 移到「類型」群組。
- 按向右鍵找到「標題」,並接著按 Tab 回到樹狀檢視區域。
- 按向下鍵聽到「搜尋結果」,NVDA 會提示已展開,表示該項目內包含其他子項目。按向右鍵或向下鍵可進入子層級。
- 若要將子層級收合,可以先按向左鍵回到上一層級,再按一次向左鍵來將它摺疊,此時使用上下方向鍵只會讀到較大層級的標題
- 若要展開項目則是按向右鍵,我們再一次將「搜尋結果」標題展開,並找到 Mediam 的標題。
- 按 Tab 跳到「移到」按鈕,點擊此按鈕就可以將焦點移到網頁上的該位置。
透過今天所介紹的內容及三個操作實例,相信你對 NVDA 鍵盤操作的原理及網頁瀏覽的方式有一定的認識了。今天我們只嘗試了簡單的網頁瀏覽,下篇文章將延續這個主題,帶領各位了解更多 NVDA 在網頁瀏覽中遇到不同元素時的操作方式,敬啟期待!






