移動裝置可訪問性

現代移動裝置的無障礙性狀況——以及對Web標準的一般支援——都很好。移動裝置完全使用與桌面瀏覽器不同的Web技術的日子早已過去，迫使開發人員使用瀏覽器嗅探併為它們提供完全不同的網站（儘管相當多的公司仍然檢測移動裝置的使用情況併為它們提供單獨的移動域名）。

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

要使網站在移動裝置上可訪問且可用，您只需遵循一般的良好網頁設計和無障礙最佳實踐即可。

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

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

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

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

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. 選擇所需的選項後，雙擊以選擇該選項。

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

瀏覽網頁

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

例如，啟用TalkBack後

1. 開啟您的Web瀏覽器。
2. 啟用URL欄。
3. 輸入一個網頁，該網頁上有很多標題，例如bbc.co.uk的主頁。要輸入URL的文字
   • 向左/向右滑動直到到達它，然後雙擊以選擇URL欄。
   • 將手指按在虛擬鍵盤上，直到得到所需的字元，然後鬆開手指進行輸入。對每個字元重複此操作。
   • 完成後，找到Enter鍵並按它。
4. 向左和向右滑動以在頁面上的不同專案之間移動。
5. 向上和向右平滑滑動以進入本地內容選單。
6. 向右滑動，直到找到“標題和地標”選項。
7. 雙擊以選擇它。現在，您可以向左和向右滑動以在標題和ARIA地標之間移動。
8. 要返回預設模式，請再次透過向上和向右滑動進入本地上下文選單，選擇“預設”，然後雙擊以啟用。

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

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

啟用VoiceOver後，iOS的基本控制手勢將略有不同

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

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

解鎖手機

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

使用轉子

啟用VoiceOver後，您可以使用一個名為“轉子”的導航功能，它允許您快速從許多常用的有用選項中進行選擇。要使用它

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

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

瀏覽網頁

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

1. 開啟您的Web瀏覽器。
2. 啟用URL欄。
3. 輸入一個網頁，該網頁上有很多標題，例如bbc.co.uk的主頁。要輸入URL的文字
   • 向左/向右滑動直到到達它，然後雙擊以選擇URL欄。
   • 對於每個字元，將手指按在虛擬鍵盤上，直到得到所需的字元，然後鬆開手指以選擇它。雙擊以輸入它。
   • 完成後，找到Enter鍵並按它。
4. 向左和向右滑動以在頁面上的專案之間移動。您可以雙擊一個專案以選擇它（例如，遵循連結）。
5. 預設情況下，所選轉子選項將是朗讀速度；您目前可以向上和向下滑動以增加或減少朗讀速度。
6. 現在像撥動一個撥盤一樣在螢幕上旋轉兩個手指以顯示轉子並在其選項之間移動。以下是一些可用選項的示例
   • 朗讀速度：更改朗讀速度。
   • 容器：在頁面上的不同語義容器之間移動。
   • 標題：在頁面上的標題之間移動。
   • 連結：在頁面上的連結之間移動。
   • 表單控制元件：在頁面上的表單控制元件之間移動。
   • 語言：在不同的翻譯之間移動（如果可用）。
7. 選擇“標題”。現在，您可以向上和向下滑動以在頁面上的標題之間移動。

在我們的CSS和JavaScript無障礙性文章中，我們研究了特定於某種型別的控制機制的事件的概念（請參閱滑鼠特定事件）。概括地說，這些會導致無障礙性問題，因為其他控制機制無法啟用關聯的功能。

例如，click事件在無障礙性方面很好——關聯的事件處理程式可以透過單擊設定處理程式的元素、切換到它並按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（也請 檢視示例）。

響應式設計 是一種實踐，它使您的佈局和其他應用程式功能能夠根據螢幕尺寸和解析度等因素動態更改，從而使不同裝置型別的使用者都能使用和訪問它們。

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

• 佈局對移動裝置的適用性。例如，多列布局在窄螢幕上效果不佳，並且可能需要增大文字大小以使其可讀。可以透過使用 媒體查詢、視口 和 Flexbox 等技術建立響應式佈局來解決此類問題。
• 節省下載的影像大小。通常，小螢幕裝置不需要與桌面裝置一樣大的影像，並且更有可能處於緩慢的網路連線中。因此，明智的做法是根據需要為窄螢幕裝置提供較小的影像。您可以使用 響應式影像技術 來處理此問題。
• 考慮高解析度。許多移動裝置具有高解析度螢幕，因此需要更高解析度的影像，以便顯示屏能夠保持清晰銳利。同樣，您可以使用響應式影像技術根據需要提供影像。此外，許多影像需求可以使用 SVG 向量影像格式來滿足，該格式如今已得到廣泛的瀏覽器支援。SVG 檔案大小較小，無論顯示尺寸如何，都能保持清晰（有關更多詳細資訊，請參閱 將向量圖形新增到 Web）。

在使網站在移動裝置上更易訪問時，還需要考慮其他重要問題。我們在這裡列出了幾個，但我們會想到更多時再新增。

不停用縮放

使用 視口，可以停用縮放。始終確保啟用調整大小，並在 <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 設計的不同技術。
• 使您的網站在觸控式螢幕裝置上正常工作——一篇關於使用觸控事件使互動在移動裝置上正常工作的有用文章。

• 上一個
• 概述：可訪問性
• 下一個