無障礙輔助工具和輔助技術

接下來，我們將注意力轉向無障礙輔助工具，提供有關可用於幫助解決無障礙問題的工具型別的資訊，並幫助你瞭解殘障人士用於瀏覽網路的輔助技術。你將在後續文章中用到此處描述的工具。

預備知識	熟悉 HTML、CSS 以及對可訪問性概念的基本理解。
學習成果	熟悉可用於幫助解決無障礙問題的工具型別，例如審計工具。設定螢幕閱讀器並使用它們在桌面和移動裝置上測試網站。熟悉其他型別的輔助技術，例如大文字或盲文鍵盤、替代指向裝置和螢幕放大器。使用者測試與自動化測試同樣重要。

可訪問性工具

讓我們看看你可以用來測試網站無障礙性並修復所發現問題的工具和技術。

測試源順序

你的內容應該在源順序上具有邏輯意義——你總是可以在之後用 CSS 以不同的方式顯示它，但你首先應該確保底層結構是正確的。這是因為輔助技術根據源的順序讀取網站內容，殘障人士通常會修改或關閉部分 CSS 以使內容更易讀（常見示例是增加字型大小和應用高對比度配色方案）。

要測試源順序，你可以關閉網站的 CSS，看看沒有 CSS 的情況下它是否易於理解。你可以透過手動從程式碼中刪除 CSS 來做到這一點，但最簡單的方法是使用瀏覽器功能，例如：

Firefox：從主選單中選擇檢視 > 頁面樣式 > 無樣式。
Safari：開啟瀏覽器開發者工具，點選開發者工具面板左上角附近的裝置設定按鈕（看起來像電腦顯示器），然後勾選出現的面板中的“停用 CSS”複選框。
Chrome/Edge：安裝Web Developer Toolbar擴充套件，然後重啟瀏覽器。點選現在應該在你的擴充套件選單中可用的“Web Developer”齒輪圖示，然後選擇CSS > 停用所有樣式。

顏色對比度檢查器

為你的網站選擇配色方案時，應確保文字（前景色）與背景色對比良好。你的設計可能看起來很酷，但如果人們無法閱讀你的內容，那就毫無用處。使用像 WebAIM 的顏色對比度檢查器這樣的工具來檢查你的方案對比度是否足夠。

另一個建議是避免僅使用顏色來指示或突出顯示重要資訊，因為這可能會被有視覺障礙（如色盲）的人錯過。例如，不要只用紅色標記必填表單欄位，而是用星號和紅色標記它們。

注意：高對比度也能讓使用帶光澤螢幕的智慧手機或平板電腦的人在明亮環境（如陽光下）更好地閱讀頁面。

審計工具

有多種審計工具可供你輸入網頁。它們將檢查網頁並返回頁面上存在的無障礙問題列表。我們以Wave為例，這是一個線上無障礙測試工具，它接受一個網址並返回該頁面的註釋檢視，其中突出顯示了無障礙問題。

前往Wave 主頁。
在頁面頂部附近的文字輸入框中輸入我們的bad-form.html示例的 URL。然後按回車鍵或點選/輕觸輸入框最右側的箭頭。
網站應該突出顯示存在的無障礙問題。點選顯示的圖示，檢視 Wave 評估識別出的每個問題的更多資訊。

其他值得檢視的審計工具

注意：此類工具本身不足以解決所有無障礙問題。你需要結合使用這些工具、知識和經驗、使用者測試等，才能獲得全面瞭解。

Deque 的 aXe 工具比我們上面提到的審計工具更進一步。像其他工具一樣，它會檢查頁面並返回無障礙錯誤。它最直接有用的形式可能是瀏覽器擴充套件。

這些擴充套件在瀏覽器開發者工具中添加了一個無障礙選項卡。例如，我們安裝了 Firefox 版本，然後用它審計了我們的bad-table.html示例。我們得到了以下結果：

A screenshot of accessibility issues identified by the Axe tool.

aXe 也可以使用 npm 進行安裝，並可以與 Grunt 和 Gulp 等任務執行器、Selenium 和 Cucumber 等自動化框架、Jasmine 等單元測試框架以及其他更多工具整合（同樣，詳情請參閱 aXe 主頁）。

螢幕閱讀器

殘障人士使用最常見的輔助技術 (AT) 型別之一——也是你將用來測試網頁無障礙性最常見的型別之一——是螢幕閱讀器。這些軟體會朗讀網頁內容或安裝在使用者作業系統上的其他應用程式的內容。螢幕閱讀器使人們無需看到任何視覺內容即可使用計算機。

Web 瀏覽器透過一種稱為無障礙樹的表示形式，向螢幕閱讀器（和其他輔助技術）公開頁面內容資訊，以便與使用者進行通訊。這提供了語義資訊，例如元素的名稱和描述，它們的用途或角色（是按鈕還是輸入欄位？），以及它們是否處於特定狀態（例如，對話方塊是開啟還是關閉？）。

對於一段文字來說，這些資訊可能微不足道，因為它的發音與書寫方式幾乎相同，但對於下拉選單或影片播放器等使用者介面功能來說，它可能會變得複雜。這就是為什麼正確使用語義 HTML 非常重要，你將在本模組的下一篇文章中詳細瞭解。如果你使用錯誤的元素標記內容，可能會混淆螢幕閱讀器使用者。

確保你的開發機器上安裝了一兩個螢幕閱讀器，並嘗試透過螢幕閱讀器使用你喜歡的網站，如下所述。瞭解視障人士如何使用網路是設計對每個人都更好的產品的關鍵。

有哪些螢幕閱讀器可用？

有幾種螢幕閱讀器可用：

有些是付費商業產品，例如JAWS (Windows)。
有些是免費產品，例如NVDA (Windows)、ChromeVox (Chrome、Windows 和 macOS) 以及Orca (Linux)。
有些是內建在作業系統中的，例如VoiceOver (macOS 和 iOS)、ChromeVox (在 Chromebooks 上) 以及TalkBack (Android)。

通常，螢幕閱讀器是執行在主作業系統上的獨立應用程式，可以讀取網頁和其他應用程式中的內容（並非總是如此；例如 ChromeVox 是一個瀏覽器擴充套件）。螢幕閱讀器在精確行為和控制方面往往存在一些差異，因此你需要查閱所選螢幕閱讀器的文件以獲取所有詳細資訊。儘管如此，它們基本都以相同的方式工作。

在接下來的幾節中，我們將通過幾個不同的螢幕閱讀器進行一些測試，讓你大致瞭解它們的工作原理以及如何使用它們進行測試。

注意：WebAIM 的為螢幕閱讀器相容性進行設計提供了一些關於螢幕閱讀器使用和什麼最適合螢幕閱讀器的有用資訊。另請參閱螢幕閱讀器使用者調查 #10 結果以瞭解一些有趣的螢幕閱讀器使用統計資料。

旁白 (VoiceOver)

VoiceOver (VO) 隨 Apple mac/iPhone/iPad 免費提供，因此如果你使用 Apple 產品，它對桌面/移動裝置上的測試很有用。我們在 MacBook Pro 上的 macOS 上測試了它。

要將其開啟，請按 Cmd + F5。如果您以前沒有使用過 VO，將顯示歡迎螢幕，您可以在其中選擇是否啟動 VO，並執行一個非常有用的教程來學習如何使用它。要將其關閉，請再次按 Cmd + F5。

注意：您至少應該完整地學習一遍教程——這是學習 VO 的一種非常有用的方法。

當 VO 開啟時，顯示屏看起來大致相同，但螢幕左下角會出現一個黑色框，其中包含 VO 當前選定的資訊。當前選擇也將用黑色邊框突出顯示——這種突出顯示稱為 VO 游標。

A sample screenshot demonstrating accessibility testing using VoiceOver on the MDN homepage. The bottom left of the image is a highlight of the information selected on the webpage.

要使用 VO，你需要大量使用“VO 修飾符”——這是一個或一組按鍵，你需要除了實際的 VO 鍵盤快捷鍵之外按下它們才能使其工作。像這樣使用修飾符在螢幕閱讀器中很常見，以使它們的命令不會與其他命令衝突。對於 VO，修飾符可以是 CapsLock，也可以是 Ctrl + Option。

VO 有許多鍵盤命令，我們不會在此處列出所有命令。網頁測試所需的基本命令在下表中。在鍵盤快捷鍵中，“VO”表示“VoiceOver 修飾符”。

常見的 VoiceOver 鍵盤快捷鍵
鍵盤快捷鍵	描述
VO + 游標鍵	向上、向右、向下、向左移動 VO 游標。
VO + 空格鍵	選擇/啟用 VO 游標突出顯示的專案。這包括轉子中選擇的專案（見下文）。
VO + `Shift` + 向下游標	進入一組專案，例如 HTML 表格或表單。進入組後，你可以使用上述命令正常移動和選擇該組內的專案。
VO + `Shift` + 向上游標	移出組。
VO + `C`	（在表格內時）朗讀當前列的標題。
VO + `R`	（在表格內時）朗讀當前行的標題。
VO + `C` + `C`（連續兩個 C）	（在表格內時）朗讀整個當前列，包括標題。
VO + `R` + `R`（連續兩個 R）	（在表格內時）朗讀整個當前行，包括與每個單元格對應的標題。
VO + 向左游標，VO + 向右游標	（在某些水平選項內，例如日期選擇器）在選項之間移動。
VO + 向上游標，VO + 向下游標	（在某些水平選項內，例如日期選擇器）更改當前選項。
VO + `U`	開啟轉子，顯示標題、連結、表單控制元件等列表，以便於導航。
VO + 向左游標，VO + 向右游標	（在轉子內時）在轉子中可用的不同列表之間移動。
VO + 向上游標，VO + 向下游標	（在轉子內時）在當前轉子列表中的不同專案之間移動。
`Esc`	（在轉子內時）退出轉子。
`Ctrl`	（當 VO 正在朗讀時）暫停/恢復朗讀。
VO + `Z`	重新開始上次朗讀。
VO + `D`	進入 Mac 的 Dock，以便你可以選擇在其中執行的應用程式。

這看起來命令很多，但習慣了就好，而且 VO 會經常提醒你在某些地方使用哪些命令。現在就試著使用 VO；然後你就可以在螢幕閱讀器測試部分玩轉我們的一些示例。

NVDA

NVDA 僅適用於 Windows，你需要安裝它。

從nvaccess.org下載 NVDA，然後安裝。你可以選擇捐款或免費下載；下載前你還需要提供你的電子郵件地址。
安裝後啟動 NVDA，雙擊程式檔案/快捷方式，或使用鍵盤快捷鍵 Ctrl + Alt + N。啟動時會看到 NVDA 歡迎對話方塊。在這裡你可以選擇幾個選項，然後按下確定按鈕開始。

NVDA 將在您的計算機上啟用。

要使用 NVDA，你需要大量使用“NVDA 修飾符”——這是除了實際的 NVDA 鍵盤快捷鍵之外，你需要按下才能使其工作的按鍵。NVDA 修飾符可以是 Insert（預設），也可以是 CapsLock（可以在按下確定之前，在 NVDA 歡迎對話方塊中勾選第一個複選框來選擇）。

注意：NVDA 在突出顯示其位置和正在做什麼方面比 VoiceOver 更微妙。當您滾動瀏覽標題、列表等時，您選擇的專案通常會用微妙的輪廓突出顯示，但並非所有情況都如此。如果您完全迷失，可以按 Ctrl + F5 重新整理當前頁面並從頭開始。

NVDA 有許多鍵盤命令，我們不會在此處列出所有命令。網頁測試所需的基本命令在下表中。在鍵盤快捷鍵中，“NVDA”表示“NVDA 修飾符”。

最常見的 NVDA 鍵盤快捷鍵
鍵盤快捷鍵	描述
NVDA + `Q`	啟動後再次關閉 NVDA。
NVDA + 向上游標	朗讀當前行。
NVDA + 向下游標	從當前位置開始朗讀。
向上游標和向下游標，或 `Shift` + `Tab` 和 `Tab`	移動到頁面上上一個/下一個專案並朗讀它。
向左游標和向右游標	移動到當前專案中的上一個/下一個字元並朗讀它。
`Shift` + `H` 和 `H`	移動到上一個/下一個標題並朗讀它。
`Shift` + `K` 和 `K`	移動到上一個/下一個連結並朗讀它。
`Shift` + `D` 和 `D`	移動到上一個/下一個文件地標（例如，`<nav>`）並朗讀它。
`Shift` + `1`–`6` 和 `1`–`6`	移動到上一個/下一個標題（級別 1-6）並朗讀它。
`Shift` + `F` 和 `F`	移動到上一個/下一個表單輸入並聚焦它。
`Shift` + `T` 和 `T`	移動到上一個/下一個資料表並聚焦它。
`Shift` + `B` 和 `B`	移動到上一個/下一個按鈕並朗讀其標籤。
`Shift` + `L` 和 `L`	移動到上一個/下一個列表並朗讀其第一個列表項。
`Shift` + `I` 和 `I`	移動到上一個/下一個列表項並朗讀它。
`Enter`/`Return`	（當連結/按鈕或其他可啟用專案被選中時）啟用專案。
NVDA + `空格鍵`	（當表單被選中時）進入表單以選擇單個專案，如果已經在表單中則離開表單。
`Shift` + `Tab` 和 `Tab`	（在表單內時）在表單輸入之間移動。
向上游標和向下游標	（在表單內時）更改表單輸入值（對於選擇框等控制元件）。
`空格鍵`	（在表單內時）選擇所選值。
`Ctrl` + `Alt` + 游標鍵	（當表格被選中時）在表格單元格之間移動。

螢幕閱讀器測試

現在你已經習慣了使用螢幕閱讀器，我們希望你用它進行一些快速的無障礙測試，以瞭解螢幕閱讀器如何處理網頁中的好壞功能：

檢視good-semantics.html，並注意螢幕閱讀器如何找到標題並可用於導航。現在檢視bad-semantics.html，並注意螢幕閱讀器如何獲取不到任何此類資訊。想象一下，當嘗試瀏覽一個非常長的文字頁面時，這會多麼令人惱火。
檢視good-links.html，並注意當它們脫離上下文檢視時（例如在 VoiceOver 轉子中），它們如何有意義。而bad-links.html則不是這樣——它們都只是“點選這裡”。
檢視good-form.html，並注意表單輸入如何透過其標籤進行描述，因為我們添加了適當的<label>元素。在bad-form.html中，它們獲得了一個無用的標籤，大致意思是“空白”。
檢視我們的punk-bands-complete.html示例，看看螢幕閱讀器如何能夠關聯內容的列和行並將它們一起讀出，因為我們正確定義了表格標題。在bad-table.html中，所有單元格都無法關聯。請注意，當頁面上只有一個表格時，NVDA 的行為似乎有些奇怪；你可以嘗試WebAIM 的表格測試頁面。
請檢視WAI-ARIA 即時區域示例，並注意螢幕閱讀器將如何隨著不斷更新的部分而持續朗讀。

軌跡球：有點像倒置的滑鼠，軌跡球由一個安裝在桌面上保持靜止的球組成，你可以滾動它來移動指標。它們被認為比滑鼠更精確，更容易操作，特別是對於手部活動受限的人。
操縱桿：一個可以移動以移動指標的控制桿。操縱桿不如軌跡球精確，但可供各種身體障礙（甚至嚴重殘疾）的人使用。
觸控板：大多數現代筆記型電腦都有觸控板（有時稱為軌跡板）——一個扁平的觸覺感測器，讓你可以用手指移動指標，以及像移動裝置手勢一樣執行多指手勢。你可以為沒有內建觸控板的裝置購買外接觸控板。有些人發現它們比滑鼠更精確。

螢幕放大鏡

螢幕放大器為視力部分受損的使用者提供其裝置顯示屏的放大檢視，使他們更容易理解和與裝置內容互動，並提供其他功能，例如顏色調整以幫助色盲，以及調整滑鼠指標和文字游標的大小以使其更易於檢視。

軟體和硬體螢幕放大器均可使用：

大多數現代作業系統都有內建的應用程式來放大螢幕的全部或部分，例如 Mac 上的 Zoom 或 Windows 上的放大鏡。它們還傾向於提供普遍增加文字大小、滑鼠游標大小等選項。第三方選項也可用。
硬體螢幕放大器通常由一個單獨的螢幕組成，該螢幕位於裝置螢幕旁邊或前面，並投射其放大版本，或其部分的縮放版本。

語音識別軟體

語音（或口語）識別軟體允許你透過語音命令控制你的裝置，以及/或者說出電子郵件或文件的文字，讓計算機為你書寫文字。這對於無法使用鍵盤或其他控制機制的人來說非常有用。

現代作業系統內建了啟用此功能（例如 Mac 上的聽寫，或 Windows 上的語音訪問），並且還有第三方應用程式可用，從桌面應用程式到瀏覽器擴充套件。

開關控制

開關控制為行動能力非常有限或認知障礙的使用者提供了與裝置互動的機制。

開關控制設定通常包括兩個部分：

一個用於啟用裝置選項的物理開關或按鈕。你還可以將開關功能分配給常規裝置按鈕（如音量控制）或鍵盤上的按鍵。
一種裝置模式或第三方軟體附加元件，使裝置與開關或按鈕控制相容。例如，Android 上的 Switch Access 是一種模式，在這種模式下，各種情況下的不同選項（例如，主螢幕上的應用程式）會迴圈顯示，然後當達到你想要的選擇時，可以使用按鈕或開關進行選擇。