輔助功能 螢幕閱讀器
為什麼
螢幕閱讀器對盲人是必需的，對視力障礙者很重要，對有閱讀障礙的人很有幫助。
什麼
如果沒有談論螢幕閱讀器，就很難教授 Web 可訪問性。螢幕閱讀器已成為 Web 可訪問性的代名詞，就像輪椅成為可訪問性的代名詞一樣。儘管 可訪問性僅適用於盲人或視力障礙者是一種誤解，但螢幕閱讀器支援是一個強制性主題。
如果您已完成本課程中學到的所有內容，您的網站應該能在螢幕閱讀器中良好執行。這並不一定意味著所有盲人使用者都能使用它。
顧名思義，螢幕閱讀器是一種讀取螢幕的工具。對盲人是必需的，對視力障礙者很重要，對有閱讀障礙的人很有幫助。
最常見的螢幕閱讀器
您將學到四種不同螢幕閱讀器的名稱。
移動裝置
對於移動裝置，蘋果在螢幕閱讀器使用者中佔有最大的份額。螢幕閱讀器 VoiceOver 內置於 iOS 中。第二受歡迎的是適用於 Android 的 TalkBack，它也內置於所有 Android 裝置中。
確保您的網站在這兩者上都能良好執行是一個好的開始。在我們繼續之前，請閱讀這些文章：
桌面和筆記型電腦
對於桌面和筆記型電腦，您應該瞭解兩種螢幕閱讀器——NVDA 和 JAWS。如果您必須選擇一種進行測試，請選擇 NVDA。它是免費的，並且其受歡迎程度正在增長。兩者都僅適用於 Windows。
如何操作
您需要設定語言，我們將測試兩個網站——Toyota 和 Hyundai。
Language（語言）
為了讓螢幕閱讀器說出正確的語言，它需要知道您內容是什麼語言。這透過 `<html>` 元素中的 lang 屬性來完成。以下示例指定英語作為語言：
<!DOCTYPE html>
<html lang="en">
`lang` 屬性從 `lang="en"` 更改為 `lang="id"`。對螢幕閱讀器和搜尋引擎都有好處。
部分內容的語言
有時您的部分內容是另一種語言。為了讓螢幕閱讀器在頁面中間更改語言，我們使用相同的 lang 屬性。檢視關於 英文的閱讀障礙頁面 上到印度尼西亞語的連結的原始碼。
<a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>
現在螢幕閱讀器明白了“Bahasa Indonesia”這個詞應該用印度尼西亞語閱讀，而不是英語。它還理解目標頁面是印度尼西亞語，因為有了 hreflang 屬性。
螢幕閱讀器測試
讓我們粗略瞭解一下螢幕閱讀器測試。在本課程中，我們不會深入研究。螢幕閱讀器是一個龐大的主題。請使用您的手機來遵循以下兩個示例。您聽到的可能與此處寫的不完全相同，因為有很多因素會影響螢幕閱讀器的輸出。
豐田
- 在瀏覽器中開啟 toyota.com 並開啟 TalkBack 或 VoiceOver。在 Android 上，使用 Chrome。在 iOS 上，使用 Safari。
- 從左到右滑動，到達首頁的第一個元素。您將聽到類似“跳至主內容…”的聲音。很好，一個 跳過連結！
- 滑動到下一個元素。“Toyota 連結主導航欄…”。有點令人困惑？“Toyota”來自帶有 `
<title>Toyota</title>` 的 SVG。 - 滑動到下一個元素。“按鈕”。這個按鈕是做什麼的？我們不知道。
- 下一個。“按鈕”。什麼？
- 下一個。“按鈕”。我們放棄吧。
聽到標誌後，您可能迷失了方向。三個沒有可訪問名稱的按鈕。正如您在“角色、名稱和值”頁面中學到的，所有元素都必須有一個可訪問的名稱。
如何改進這種體驗
- 導航地標上的更好標籤。正如您在地標中學到的，如果您有多個相同型別的地標，必須使用 `
aria-label`。Toyota 有多個 `<nav>`，所以他們正確使用了 `aria-label`。然而，屬性的值應該是為人類編寫的，不帶連字元。 `<nav aria-label="main">` 會更好。 - 標誌上的更好連結名稱。正如您在連結文字中學到的，連結文字應清楚地解釋讀者點選該連結將獲得哪些資訊。可以透過在 `
<a>` 上使用 `aria-label="Toyota 首頁"` 來改進。 - 第一個“按鈕”是一個沒有可訪問名稱的 ``。它開啟一個彈出視窗，要求輸入郵政編碼以查詢附近的 Toyota 經銷商。這可以透過在 `
<input>` 上使用 `aria-label="輸入郵政編碼查詢附近的經銷商"` 來修復。 - 第二個“按鈕”與郵政編碼按鈕相關。它有一個地理位置圖示。從可訪問性的角度來看，這兩個元素應該合併成一個。
- 第三個“按鈕”是漢堡包圖示。一個 `
aria-label="開啟選單"` 將使其可訪問。
這些小改動將改善 Toyota 網站，但無法修復它。使用模態視窗和選單等元件還需要考慮其他因素。本課程不會詳細介紹自定義元件。如果您想了解更多關於這些模式的資訊，請訪問 WAI-ARIA Authoring Practices 1.1 閱讀關於 選單按鈕、模態 和 輪播 的內容。
Hyundai
- 在瀏覽器中開啟 Hyundai Worldwide 並開啟您的螢幕閱讀器。
- 從左到右滑動，到達首頁的第一個元素。“轉到選單”。很好，一個 跳過連結！
- 滑動到下一個元素。“Hyundai World Wide”。可能是我們正在訪問的頁面。
- 下一個。“Hyundai，連結影像”。可能是標誌。
- 下一個。“轉到全球分銷商頁面，按鈕”。我們明白這一點，但它是一個按鈕嗎？
- 下一個。“轉到 Channel Hyundai 頁面，連結”。可理解。
- 下一個。“搜尋，按鈕”。完美。
- 下一個。“選單，按鈕”。太棒了。
總的來說，頁面的頂部對螢幕閱讀器使用者是可訪問的。以下提示是一些小的改進。
如何改進這種體驗
- “Hyundai World Wide”是僅供螢幕閱讀器使用的 `<span>`。它在視覺上是隱藏的。目的是告訴使用者當前頁面的標題。這由於 `
<title>` 元素而顯得多餘，可以刪除。 - 標誌更好的 alt 文字。包含連結的意圖：`
alt="Hyundai World Wide 首頁"`。 - 精簡連結和按鈕的可訪問名稱。刪除“轉到”和“頁面”。*全球分銷商* 就足夠了。
- 根據我們在按鈕和連結中學到的，在“全球分銷商”連結上使用 `
<a>` 而不是 `<button>`。
現在您已經學習了螢幕閱讀器的基礎知識。隨時探索您的移動裝置上內建的其他可訪問性選項。嘗試使用面部識別，使用切換控制元件來操作您的手機。
