輔助功能 螢幕閱讀器
為什麼
螢幕閱讀器對盲人是必需的,對視力障礙者很重要,對有閱讀障礙的人很有幫助。
什麼
如果沒有談論螢幕閱讀器,就很難教授 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>
`。
現在您已經學習了螢幕閱讀器的基礎知識。隨時探索您的移動裝置上內建的其他可訪問性選項。嘗試使用面部識別,使用切換控制元件來操作您的手機。