螢幕閱讀器檢測無障礙,自己來!(一)

在 Windows 上使用 NVDA 起手式

A11y新手村🏕
a11yvillage
8 min readMay 14, 2023

--

文章首圖

身為一位工程師或設計師,你有沒有曾經想過,自己設計的產品,應用程式或網站等是否也能夠讓障礙者方便地使用呢?怎樣的設計對於視障的使用者才是真正無障礙的呢?在之前新手村的文章中,我們提到視障者會使用螢幕閱讀器 (Screen reader) 來操作電腦,然而並非所有的程式設計方式都能夠很好地與螢幕閱讀器相容,最好的方式便是實際透過螢幕閱讀器來檢視看看各項設計與功能是否都能讓視障使用者順利閱讀與互動。

使用螢幕閱讀器測試的優勢

實際使用螢幕閱讀器來測試你的網站或系統有什麼優勢呢?

1. 螢幕閱讀器使用者所遇到的困難最多:

雖然無障礙不僅只要考量視障使用者,然而根據 Fable 的調查,使用螢幕閱讀器的使用者在操作過程中會遇到的困難與障礙最多,因此,即使只專注在這一方面,也能讓你發現許多無障礙相關的錯誤,有效提升整體無障礙的使用體驗。

2. 學習不同使用者的操作方式能夠更快發現問題:

模仿使用不同方式來與你的產品互動,能夠很快地查覺使用上的問題。例如使用鍵盤是否能夠點選到所有的物件和選項、想想自己產品的文字、圖像是否太小或對比不夠清晰等等。

3. 從程式碼了解使用者體驗相當困難:

要從程式碼本身發現這些使用者體驗上的問題相當困難,若是換個角度,使用螢幕閱讀器來親自驗證那就容易的多。而且對於任何的設計與開發人員,學習螢幕閱讀器的基本操作指令並不會花上太多時間,掌握常用且基本的十幾個指令,例如透過 Tab 及方向鍵來與各個元件互動,只要短短五分鐘就可能讓你發現使用上的困難或更好的設計方式,這比起程式碼更能有效且快速找到問題並加以解決。

NVDA 簡介

在台灣,目前最普遍使用的螢幕閱讀器是 NVDA,它的全名是 NonVisual Desktop Access,由澳洲工程師 Michael Curran 和 James Teh 於 2007 年合作所開發。它是一款免費且開源的螢幕閱讀器,支援超過五十種不同的語言,且更新頻率快速,能夠跟上 Windows 作業系統的更新。隨著十幾年的發展下來,NVDA 的功能日漸成熟與全面,如今以成為世界上最受視障使用者歡迎的螢幕閱讀器之一。

因此,這系列的文章中,我們將帶你認識 NVDA,包括下載安裝、常用設定與基本操作方式,讓你對 NVDA 有初步的認識,並能夠了解視障者如何透過它來獲取螢幕上的資訊,進而能夠利用它來檢測你所開發的網站或應用程式是否能夠讓視障使用者來操作,提高無障礙的支援。

NVDA 的特色

NVDA 具有許多特色,包括支援各種應用程式,例如網頁瀏覽器、郵件程式和 Office 辦公室軟體;提供多樣的語音合成選擇,以及支援廣泛的點字顯示器機型。

此外,NVDA 具有許多視覺提示功能,例如醒目提示系統焦點、語音檢視器與點字檢視器,能讓低視力或檢測使用者更輕鬆上手操作;而在瀏覽器中,NVDA 可以在特定類型例如標題、連結、按鈕、表格和地標物件間移動,能讓視障者更容易建立心理地圖。

NVDA 也能夠讀出純文字以外的資訊,例如文字格式(字體、大小、樣式)和文件版面(行距、對齊、縮排)。最後,值得一提的是,工程師可以依照需求,以 Python 開發附加元件來擴充NVDA 的功能。如果您想了解更多關於 NVDA 的特色,可以至 NV Access 官網進行查看。

📂如何下載 NVDA

連結至官網 nvaccess.org/,接著點選「Download」,就可以下載到最新版本的 NVDA 了 。

NVDA官網示意圖
官網 nvaccess.org/
下載鍵示意圖
點選「Download」,下載到最新版本的 NVDA

一般來說,NVDA 每年會有四個版次,2023.1 及表示 2023 年的第一個版本。此外,,也可以到此網站下載 NVDA 的 alpha 及 beta 版本,提前看看測試中或即將發佈的新功能。

🔧NVDA 執行與安裝

下載回來的執行檔我們就可以直接點選啟用了,執行可分為三種方式:

  • 直接執行:點選下載回來的執行檔後,在安裝步驟中選擇「繼續執行」,便可以立即開始使用 NVDA 了,但所有調整的設定並無法保存下來,適合單次快速檢測的情況。
  • 安裝在電腦中:選擇「安裝在此電腦」,NVDA 即會開始安裝,並預設在桌面建立一個 NVDA 捷徑。
  • 建立可攜式版 (Portable):可指定存放目錄,建立免安裝版本,將所有設定帶著走。只要點選可攜式版目錄中的 nvda.exe 執行檔即可開始使用 NVDA。與安裝版最大的差異在於無法在安全畫面或登入畫面中使用。此外,我們也可以在日後隨時從安裝版建立可攜式版,或是將可攜式版安裝至電腦中。
NVDA 執行與安裝示意圖

NVDA 功能表

NVDA 執行期間並不會出現一個應用程式視窗,但我們可以在畫面右下角的通知區域看到 NVDA 圖示。我們可以在此圖示上按下滑鼠右鍵來開啟 NVDA 功能表。此功能表包含所有 NVDA 設定、工具與說明,若要結束 NVDA 也可以從這裡點選「結束」。有興趣的讀者可以前往 NVDA 功能表中的說明 > 用戶指南查看 NVDA 的完整說明文件。

視覺相關設定

由於我們主要用 NVDA 來檢測無障礙功能,並不需要完全仰賴語音報讀來操作,因此這邊有幾個 NVDA 的視覺相關設定推薦大家使用:

  • 語音檢視器 (Speech viewer):在 NVDA 功能表> 工具中可找到,啟用後會在畫面上顯示 NVDA 語音所朗讀的文字內容,能夠以可視化的方式了解 NVDA 正在報讀的內容。
語音檢視器示意圖
語音檢視器設定
  • 點字檢視器 (Braille viewer):同樣在 NVDA 功能表 > 工具中,和「語音檢視器」的功能類似,此檢視器會顯示點字內容,若要檢測點字顯示功能手邊卻沒有點字顯示器便可以利用此檢視器來查看。
  • 視覺醒目提示 (Focus highlight):NVDA 功能表 偏好 > 設定 > 視覺,將「啟用醒目提示」勾選,便可在畫面上看見藍色線條框出目前 NVDA 所在的焦點位置。
視覺醒目提示的示意圖
視覺醒目提示的設定

常用建議設定

若你使用 NVDA 安裝版或可攜式版,並且可能需要經常使用它來做檢測,以下推薦一些常用的設定,並說明如此設定的原因。這些設定都在 NVDA 功能表 > 偏好 > 設定中:

常用建議設定的視窗

💡一般 > 「結束 NVDA 時儲存組態」 取消勾選:

如此我們在關閉 NVDA 時,並不會自動儲存設定,每次更改設定時需要手動按下 NVDA 功能表中的「儲存組態」才會保存。這樣有助於當我們不確定調整了哪些設定時可以直接重新啟動 NVDA 來還原之前的設定狀態。

💡語音 > 自動語言切換取消勾選:

此主要用於其他語言環境,若勾選可能導致某些情況誤判語言而無法報讀。

💡鍵盤 > 選擇 NVDA 鍵 > caps lock 勾選(同歡迎對話框設定):

此設定將大寫鎖定鍵設為 NVDA 鍵,若需要操作搭配 NVDA 鍵的指令時較為容易操作。若要切換大小寫則變為快按兩次此按鍵。

💡瀏覽模式 > 以音效表示焦點模式與瀏覽模式取消勾選:

這兩個模式適用於網頁瀏覽中,預設是以不同音效表示當下的模式,建議取消勾選改以語音/文字方式提示更加清楚。

另外也建議,

在 NVDA 功能表 > 說明 > 歡迎對話框 > NVDA 啟動時顯示此對話框 取消勾選:如此在每次啟動 NVDA 時就不會再跳出歡迎視窗。

到這裡你應該已經順利執行 NVDA 了,當你移動滑鼠,或使用鍵盤瀏覽時,NVDA 應該會隨著焦點的移動而有語音報讀的聲音。今天我們就先介紹到這裡,下一回我們來看看 NVDA 的基本操作原理與常用快速鍵,讓你開始了解視障者使用鍵盤如何操作電腦,完成各項任務!

參考資料:How do screen readers work? | Fable

--

--

A11y新手村🏕
a11yvillage

每週分享Accessibility相關原創文章,實用性內容包含原理,UX/UI設計到開發實作等,也會訪問障礙者與正在Accessibility實踐路上耕耘的人,邀請你入村跟我們一起創造包容友善的世界🏕