移動可訪問性

移動裝置上的可訪問性

現代移動裝置上的可訪問性狀況以及對 Web 標準的總體支援都很好。移動裝置執行與桌面瀏覽器完全不同的 Web 技術，迫使開發人員使用瀏覽器嗅探併為它們提供完全獨立的站點（儘管仍有相當多的公司檢測移動裝置的使用併為它們提供單獨的移動域）的日子已經一去不復返了。

如今，移動裝置通常可以處理功能齊全的網站，主要平臺甚至內建了螢幕閱讀器，使視障使用者能夠成功使用它們。現代移動瀏覽器也傾向於很好地支援 WAI-ARIA。

要使網站在移動裝置上易於訪問和使用，您只需遵循一般的良好 Web 設計和可訪問性最佳實踐。

有些例外情況需要對移動裝置進行特殊考慮；主要有：

• 控制機制 — 確保按鈕等介面控制元件在移動裝置（即主要是觸控式螢幕）以及桌上型電腦/筆記型電腦（主要是滑鼠/鍵盤）上都可訪問。
• 使用者輸入 — 使移動裝置上的使用者輸入要求儘可能無痛（例如，在表單中，儘量減少打字）。
• 響應式設計 — 確保佈局在移動裝置上正常工作，控制影像下載大小，並考慮為高解析度螢幕提供影像。

Android 和 iOS 上的螢幕閱讀器測試總結

最常見的移動平臺都具有功能齊全的螢幕閱讀器。它們的功能與桌面螢幕閱讀器大致相同，只是它們主要透過觸控手勢而不是組合鍵進行操作。

讓我們看看主要的兩個：Android 上的 TalkBack 和 iOS 上的 VoiceOver。

Android TalkBack

TalkBack 螢幕閱讀器內置於 Android 作業系統中。

要開啟它，請查詢您的手機型號和 Android 版本，然後查詢 TalkBack 選單的位置。它在 Android 版本之間甚至不同手機型號之間差異很大。一些手機制造商（例如三星）甚至在較新的手機中沒有 TalkBack，而是選擇了自己的螢幕閱讀器。

找到 TalkBack 選單後，按下滑動開關以開啟 TalkBack。按照您看到的任何其他螢幕提示進行操作。

當 TalkBack 開啟時，您的 Android 裝置的基本控制元件會有些不同。例如：

1. 單擊應用程式將選中它，裝置將讀出該應用程式是什麼。
2. 左右滑動將在應用程式之間移動，或者如果您在控制欄中，則在按鈕/控制元件之間移動。裝置將讀出每個選項。
3. 雙擊任何位置將開啟應用程式/選擇選項。
4. 您還可以“透過觸控探索”——將手指按在螢幕上並拖動它，您的裝置將讀出您移動經過的不同應用程式/專案。

如果您想關閉 TalkBack

1. 使用當前啟用的不同手勢導航回 TalkBack 選單螢幕。
2. 導航到滑動開關並激活它以將其關閉。

有關 TalkBack 手勢的更完整列表，請參閱 使用 TalkBack 手勢。

解鎖手機

當 TalkBack 開啟時，解鎖手機會有些不同。

您可以從鎖定螢幕底部向上滑動兩根手指。如果您已為解鎖裝置設定了密碼或圖案，您將被帶到相關的輸入螢幕以輸入它。

您還可以透過觸控探索找到螢幕底部中間的“解鎖”按鈕，然後雙擊。

全域性和本地選單

無論您在裝置上導航到何處，TalkBack 都允許您訪問全域性和本地上下文選單。前者提供與整個裝置相關的全域性選項，後者提供僅與您當前所在的應用程式/螢幕相關的選項。

要訪問這些選單

1. 快速向下然後向右滑動以訪問全域性選單。
2. 快速向上然後向右滑動以訪問本地選單。
3. 左右滑動以迴圈瀏覽不同的選項。
4. 選擇所需的選項後，雙擊以選擇該選項。

有關全域性和本地上下文選單下所有可用選項的詳細資訊，請參閱 使用全域性和本地上下文選單。

瀏覽網頁

您可以在網路瀏覽器中使用本地上下文選單，以查詢僅使用標題、表單控制元件或連結來導航網頁的選項，或逐行導航等。

例如，在 TalkBack 開啟的情況下

1. 開啟您的網路瀏覽器。

2. 啟用 URL 欄。

3. 輸入一個包含大量標題的網頁，例如 bbc.co.uk 的首頁。要輸入 URL 的文字

   • 左右滑動直到到達 URL 欄，然後雙擊以選擇它。
   • 將手指按在虛擬鍵盤上直到獲得所需的字元，然後鬆開手指以鍵入它。對每個字元重複此操作。
   • 完成後，找到 Enter 鍵並按下它。

4. 左右滑動以在頁面上的不同專案之間移動。

5. 向上和向右平滑滑動以進入本地內容選單。

6. 向右滑動直到找到“標題和地標”選項。

7. 雙擊以選擇它。現在您將能夠左右滑動以在標題和 ARIA 地標之間移動。

8. 要返回預設模式，請再次透過向上和向右滑動進入本地上下文選單，選擇“預設”，然後雙擊以啟用。

iOS VoiceOver

VoiceOver 的移動版本內置於 iOS 作業系統中。

要開啟它，請轉到您的“設定”應用程式並選擇“輔助功能”>“VoiceOver”。按下“VoiceOver”滑塊以啟用它（您還將在此頁面上看到與 VoiceOver 相關的其他幾個選項）。

一旦啟用 VoiceOver，iOS 的基本控制手勢會有些不同

1. 單次輕觸將導致您輕觸的專案被選中；您的裝置將讀出您輕觸的專案。
2. 您還可以透過左右滑動在螢幕上的專案之間導航，或者透過在螢幕上滑動手指在不同專案之間移動（當您找到所需專案時，您可以移開手指以選擇它）。
3. 要啟用選定的專案（例如，開啟選定的應用程式），請雙擊螢幕上的任意位置。
4. 用三根手指滑動以滾動頁面。
5. 用兩根手指輕觸以執行與上下文相關的操作——例如，在相機應用程式中拍照。

要再次關閉它，請使用上述手勢導航回“設定”>“通用”>“輔助功能”>“VoiceOver”，並將“VoiceOver”滑塊切換回關閉。

解鎖手機

要解鎖手機，您需要像往常一樣按下主頁按鈕（或滑動）。如果設定了密碼，您可以透過滑動/滑動（如上所述）選擇每個數字，然後在找到正確的數字後雙擊以輸入每個數字。

使用轉子

當 VoiceOver 開啟時，您可以使用一個稱為轉子的導航功能，它允許您快速從一些常用的有用選項中進行選擇。要使用它

1. 用兩根手指在螢幕上旋轉，就像您正在轉動撥盤一樣。當您進一步旋轉時，每個選項都會被朗讀出來。您可以來回切換以迴圈瀏覽選項。
2. 一旦找到所需的選項
   • 鬆開手指以選擇它。
   • 如果這是一個您可以迭代其值的選項（例如音量或語速），您可以向上或向下滑動以增加或減少所選專案的值。

轉子下的可用選項是上下文相關的——它們會根據您所在的應用程式或檢視而有所不同（請參閱下面的示例）。

瀏覽網頁

讓我們嘗試使用 VoiceOver 瀏覽網頁

1. 開啟您的網路瀏覽器。

2. 啟用 URL 欄。

3. 輸入一個包含大量標題的網頁，例如 bbc.co.uk 的首頁。要輸入 URL 的文字

   • 左右滑動直到到達 URL 欄，然後雙擊以選擇它。
   • 對於每個字元，將手指按在虛擬鍵盤上直到獲得所需的字元，然後鬆開手指以選擇它。雙擊以鍵入它。
   • 完成後，找到 Enter 鍵並按下它。

4. 左右滑動以在頁面上的專案之間移動。您可以雙擊一個專案以選擇它（例如，點選連結）。

5. 預設情況下，選定的轉子選項將是語速；您當前可以向上和向下滑動以增加或減少語速。

6. 現在用兩根手指在螢幕上像撥盤一樣旋轉以顯示轉子並在其選項之間移動。以下是一些可用選項的示例

   • 語速：更改語速。
   • 容器：在頁面上的不同語義容器之間移動。
   • 標題：在頁面上的標題之間移動。
   • 連結：在頁面上的連結之間移動。
   • 表單控制元件：在頁面上的表單控制元件之間移動。
   • 語言：在不同的翻譯之間移動，如果它們可用。

7. 選擇“標題”。現在您將能夠上下滑動以在頁面上的標題之間移動。

控制機制

在我們的 CSS 和 JavaScript 可訪問性文章中，我們探討了特定於某種控制機制的事件（請參閱 滑鼠特定事件）的概念。回顧一下，這些事件會導致可訪問性問題，因為其他控制機制無法啟用相關功能。

舉例來說，click 事件在可訪問性方面表現良好——相關的事件處理程式可以透過單擊設定了處理程式的元素、透過 Tab 鍵切換到它並按下 Enter/Return 鍵，或者在觸控式螢幕裝置上輕觸它來呼叫。嘗試我們的 simple-button-example.html 示例（檢視即時執行）以瞭解我們的意思。

或者，滑鼠特定事件（例如 mousedown 和 mouseup）會產生問題——它們的事件處理程式無法使用非滑鼠控制元件呼叫。

如果您嘗試使用鍵盤或觸控控制我們的 simple-box-drag.html（檢視即時示例）示例，您就會看到問題。這是因為我們使用了以下程式碼：

div.onmousedown = () => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
};

document.onmouseup = stopMove;

為了啟用其他形式的控制，您需要使用不同但等效的事件——例如，觸控事件在觸控式螢幕裝置上起作用：

div.ontouchstart = (e) => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  positionHandler(e);
  movePanel();
};

panel.ontouchend = stopMove;

我們提供了一個簡單的示例，展示瞭如何同時使用滑鼠和觸控事件——請參閱 multi-control-box-drag.html（也請參閱即時示例）。

響應式設計

響應式設計是一種根據螢幕尺寸和解析度等因素動態更改應用程式佈局和其他功能的做法，以便它們對不同裝置型別的使用者可用且易於訪問。

特別需要為移動裝置解決的最常見問題是：

• 佈局是否適合移動裝置。例如，多列布局在狹窄的螢幕上效果不佳，並且可能需要增加文字大小才能清晰可讀。這些問題可以透過使用 媒體查詢、視口 和 彈性盒 等技術建立響應式佈局來解決。
• 節省下載影像的大小。一般來說，小螢幕裝置不需要像桌面裝置那樣大的影像，而且它們更有可能處於較慢的網路連線中。因此，明智的做法是根據需要向窄螢幕裝置提供較小的影像。您可以使用 響應式影像技術 來處理這個問題。
• 考慮高解析度。許多移動裝置都具有高解析度螢幕，因此需要更高解析度的影像，以便顯示效果保持清晰銳利。同樣，您可以使用響應式影像技術根據需要提供影像。此外，許多影像需求可以使用 SVG 向量影像格式來滿足，該格式在當今的瀏覽器中得到了很好的支援。SVG 檔案大小小，無論顯示尺寸如何都能保持清晰（有關更多詳細資訊，請參閱 在 HTML 中包含向量圖形）。

移動裝置特定注意事項

在使網站在移動裝置上更易於訪問時，還有其他重要問題需要考慮。我們在這裡列舉了一些，但當我們想到更多時會新增。

不要停用縮放

使用 視口，可以停用縮放。始終確保啟用調整大小，並在 <head> 中將寬度設定為裝置的寬度。

<meta name="viewport" content="width=device-width; user-scalable=yes" />

如果可能的話，永遠不要設定 user-scalable=no——許多人依賴縮放才能看到您網站的內容，因此取消此功能是一個非常糟糕的主意。在某些情況下，縮放可能會破壞 UI；在這種情況下，如果您覺得需要停用縮放，則應提供其他等效功能，例如在不破壞 UI 的情況下增大文字大小的控制元件。

保持選單可訪問

由於移動裝置螢幕窄得多，因此當網站在移動裝置上檢視時，通常會使用媒體查詢和其他技術，使導航選單縮小為顯示屏頂部的一個小圖示——只有在需要時才能按下該圖示以顯示選單。這通常由一個“三條水平線”圖標表示，因此這種設計模式被稱為“漢堡包選單”。

實現此類選單時，您需要確保顯示它的控制元件可透過適當的控制機制訪問（通常是移動裝置的觸控），如上述控制機制中所述，並且在訪問選單時，頁面的其餘部分被移開或以某種方式隱藏，以避免導航時的混淆。

點選此處檢視一個好的漢堡包選單示例。

使用者輸入

在移動裝置上，輸入資料往往比在臺式計算機上更讓使用者感到煩惱。使用桌上型電腦或筆記型電腦鍵盤輸入表單文字比使用觸控式螢幕虛擬鍵盤或微型移動物理鍵盤更方便。

因此，儘量減少所需的打字量是值得的。例如，您可以不讓使用者每次都使用常規文字輸入填寫他們的職位，而是提供一個包含最常見選項的 <select> 選單（這也有助於資料輸入的一致性），並提供一個“其他”選項，顯示一個文字欄位以輸入任何異常值。您可以在 common-job-types.html 中看到此想法的簡單示例（檢視常見職位示例即時執行）。

還值得考慮在移動平臺上使用 HTML 表單輸入型別（例如日期），因為它們處理得很好——例如，Android 和 iOS 都顯示可用的小部件，這些小部件與裝置體驗非常契合。請參閱 html5-form-examples.html 以獲取一些示例（請參閱 HTML5 表單示例即時執行）——嘗試在移動裝置上載入和操作這些示例。例如：

• number、tel 和 email 型別顯示適合輸入數字/電話號碼的虛擬鍵盤。
• time 和 date 型別顯示適合選擇時間和日期的選擇器。

如果您想為桌面提供不同的解決方案，您總是可以使用功能檢測向移動裝置提供不同的標記。請檢視我們的功能檢測文章以獲取更多資訊。

總結

在本文中，我們向您提供了一些關於常見移動輔助功能特定問題的詳細資訊以及如何克服這些問題。我們還向您介紹了最常用螢幕閱讀器的使用方法，以幫助您進行輔助功能測試。

另見

• 移動 Web 開發指南 — 《Smashing Magazine》中涵蓋不同移動 Web 設計技術的文章列表。
• 讓您的網站在觸屏裝置上執行 — 關於使用觸控事件使互動在移動裝置上執行的有用文章。

• 上一頁
• 概述：Web 上的可訪問性
• 下一頁