選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

輔助功能 螢幕閱讀器


為什麼

螢幕閱讀器對盲人是必需的,對視力障礙者很重要,對有閱讀障礙的人很有幫助。


什麼

如果沒有談論螢幕閱讀器,就很難教授 Web 可訪問性。螢幕閱讀器已成為 Web 可訪問性的代名詞,就像輪椅成為可訪問性的代名詞一樣。儘管 可訪問性僅適用於盲人或視力障礙者是一種誤解,但螢幕閱讀器支援是一個強制性主題。

如果您已完成本課程中學到的所有內容,您的網站應該能在螢幕閱讀器中良好執行。這並不一定意味著所有盲人使用者都能使用它。

顧名思義,螢幕閱讀器是一種讀取螢幕的工具。對盲人是必需的,對視力障礙者很重要,對有閱讀障礙的人很有幫助。


最常見的螢幕閱讀器

您將學到四種不同螢幕閱讀器的名稱。

移動裝置

對於移動裝置,蘋果在螢幕閱讀器使用者中佔有最大的份額。螢幕閱讀器 VoiceOver 內置於 iOS 中。第二受歡迎的是適用於 Android 的 TalkBack,它也內置於所有 Android 裝置中。

確保您的網站在這兩者上都能良好執行是一個好的開始。在我們繼續之前,請閱讀這些文章:

桌面和筆記型電腦

對於桌面和筆記型電腦,您應該瞭解兩種螢幕閱讀器——NVDAJAWS。如果您必須選擇一種進行測試,請選擇 NVDA。它是免費的,並且其受歡迎程度正在增長。兩者都僅適用於 Windows。



如何操作

您需要設定語言,我們將測試兩個網站——Toyota 和 Hyundai。


Language(語言)

為了讓螢幕閱讀器說出正確的語言,它需要知道您內容是什麼語言。這透過 `<html>` 元素中的 lang 屬性來完成。以下示例指定英語作為語言:

<!DOCTYPE html>
<html lang="en">

  1. 檢視關於閱讀障礙的 英文維基百科文章 的原始碼。
  2. 點選 印度尼西亞語 語言。
  3. 再次檢查原始碼。

`lang` 屬性從 `lang="en"` 更改為 `lang="id"`。對螢幕閱讀器和搜尋引擎都有好處。

部分內容的語言

有時您的部分內容是另一種語言。為了讓螢幕閱讀器在頁面中間更改語言,我們使用相同的 lang 屬性。檢視關於 英文的閱讀障礙頁面 上到印度尼西亞語的連結的原始碼。

<a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>

現在螢幕閱讀器明白了“Bahasa Indonesia”這個詞應該用印度尼西亞語閱讀,而不是英語。它還理解目標頁面是印度尼西亞語,因為有了 hreflang 屬性。


螢幕閱讀器測試

讓我們粗略瞭解一下螢幕閱讀器測試。在本課程中,我們不會深入研究。螢幕閱讀器是一個龐大的主題。請使用您的手機來遵循以下兩個示例。您聽到的可能與此處寫的不完全相同,因為有很多因素會影響螢幕閱讀器的輸出。

豐田

Screenshot from the Toyota web site on a mobile device. Showing a logo, one location icon, one hamburger icon and one carousel.
  1. 在瀏覽器中開啟 toyota.com 並開啟 TalkBack 或 VoiceOver。在 Android 上,使用 Chrome。在 iOS 上,使用 Safari。
  2. 從左到右滑動,到達首頁的第一個元素。您將聽到類似“跳至主內容…”的聲音。很好,一個 跳過連結
  3. 滑動到下一個元素。“Toyota 連結主導航欄…”。有點令人困惑?“Toyota”來自帶有 `<title>Toyota</title>` 的 SVG。 
  4. 滑動到下一個元素。“按鈕”。這個按鈕是做什麼的?我們不知道。
  5. 下一個。“按鈕”。什麼?
  6. 下一個。“按鈕”。我們放棄吧。

聽到標誌後,您可能迷失了方向。三個沒有可訪問名稱的按鈕。正如您在“角色、名稱和值”頁面中學到的,所有元素都必須有一個可訪問的名稱。

如何改進這種體驗

  1. 導航地標上的更好標籤。正如您在地標中學到的,如果您有多個相同型別的地標,必須使用 `aria-label`。Toyota 有多個 `<nav>`,所以他們正確使用了 `aria-label`。然而,屬性的值應該是為人類編寫的,不帶連字元。 `<nav aria-label="main">` 會更好。
  2. 標誌上的更好連結名稱。正如您在連結文字中學到的,連結文字應清楚地解釋讀者點選該連結將獲得哪些資訊。可以透過在 `<a>` 上使用 `aria-label="Toyota 首頁"` 來改進。
  3. 第一個“按鈕”是一個沒有可訪問名稱的 ``。它開啟一個彈出視窗,要求輸入郵政編碼以查詢附近的 Toyota 經銷商。這可以透過在 `<input>` 上使用 `aria-label="輸入郵政編碼查詢附近的經銷商"` 來修復。
  4. 第二個“按鈕”與郵政編碼按鈕相關。它有一個地理位置圖示。從可訪問性的角度來看,這兩個元素應該合併成一個。
  5. 第三個“按鈕”是漢堡包圖示。一個 `aria-label="開啟選單"` 將使其可訪問。

這些小改動將改善 Toyota 網站,但無法修復它。使用模態視窗和選單等元件還需要考慮其他因素。本課程不會詳細介紹自定義元件。如果您想了解更多關於這些模式的資訊,請訪問 WAI-ARIA Authoring Practices 1.1 閱讀關於 選單按鈕模態輪播 的內容。

Hyundai

Screenshot of the Hyundai website on a mobile device, showing the logo and four navigation icons.
  • 在瀏覽器中開啟 Hyundai Worldwide 並開啟您的螢幕閱讀器。
  • 從左到右滑動,到達首頁的第一個元素。“轉到選單”。很好,一個 跳過連結
  • 滑動到下一個元素。“Hyundai World Wide”。可能是我們正在訪問的頁面。
  • 下一個。“Hyundai,連結影像”。可能是標誌。
  • 下一個。“轉到全球分銷商頁面,按鈕”。我們明白這一點,但它是一個按鈕嗎?
  • 下一個。“轉到 Channel Hyundai 頁面,連結”。可理解。
  • 下一個。“搜尋,按鈕”。完美。
  • 下一個。“選單,按鈕”。太棒了。

總的來說,頁面的頂部對螢幕閱讀器使用者是可訪問的。以下提示是一些小的改進。

如何改進這種體驗

  1. “Hyundai World Wide”是僅供螢幕閱讀器使用的 `<span>`。它在視覺上是隱藏的。目的是告訴使用者當前頁面的標題。這由於 `<title>` 元素而顯得多餘,可以刪除。
  2. 標誌更好的 alt 文字。包含連結的意圖:`alt="Hyundai World Wide 首頁"`。
  3. 精簡連結和按鈕的可訪問名稱。刪除“轉到”和“頁面”。*全球分銷商* 就足夠了。
  4. 根據我們在按鈕和連結中學到的,在“全球分銷商”連結上使用 `<a>` 而不是 `<button>`。

現在您已經學習了螢幕閱讀器的基礎知識。隨時探索您的移動裝置上內建的其他可訪問性選項。嘗試使用面部識別,使用切換控制元件來操作您的手機。



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援