移動設(shè)備上的輔助功能

可訪問性的狀態(tài) - 和對一般的web標準的支持 - 在現(xiàn)代移動設(shè)備中是好的。 移動設(shè)備運行完全不同的網(wǎng)絡(luò)技術(shù)到桌面瀏覽器，迫使開發(fā)人員使用瀏覽器嗅探并為他們完全獨立的網(wǎng)站(盡管有不少公司仍然檢測到移動設(shè)備的使用并為他們提供單獨的移動域)的日子已經(jīng)過去了。

近來，移動設(shè)備一般可以處理"全胖"網(wǎng)站，而主平臺甚至還內(nèi)置了屏幕閱讀器，以使盲人用戶成功使用它們。 現(xiàn)代移動瀏覽器對 WAI-ARIA 也有很好的支持。

要使網(wǎng)站在移動設(shè)備上可訪問和可用，您主要只需要遵循一般的良好網(wǎng)絡(luò)設(shè)計和輔助功能的最佳做法。

有一些例外，需要特別考慮移動; 主要有:

• Control mechanisms — Make sure that interface controls such as buttons are accessible on mobiles (i.e. mainly touch screen), as well as desktop/laptop (mainly mouse/keyboard).
• User input — Make user input requirements as painless as possible on mobile (e.g. in forms, keep typing to a minimum).
• Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high resolution screens.

Android和iOS上的屏幕閱讀器測試摘要

最常見的移動平臺具有全功能的屏幕閱讀器。 這些功能與桌面屏幕閱讀器的功能大致相同，只是它們主要使用觸摸手勢而不是按鍵組合來操作。

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

Android TalkBack

TalkBack屏幕閱讀器內(nèi)置于Android操作系統(tǒng)中。

要開啟此功能，請選擇設(shè)置> 輔助功能> TalkBack ，然后按滑塊開關(guān)將其打開。 按照顯示的任何其他屏幕提示進行操作。

當TalkBack開啟時，您Android設(shè)備的基本控件會有所不同。 例如:

1. Single tapping an app will select it, and the device will read out what the app is.
2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
3. Double-tapping anywhere will open the app/select the option.
4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.

如果您想關(guān)閉TalkBack:

1. Navigate to your Settings app using the above gestures.
2. Navigate to Accessibility > TalkBack.
3. Navigate to the slider switch and activate it to turn it off.

Unlocking the phone

當"話語提示"打開時，解鎖手機有點不同。

您可以從鎖定屏幕底部向上滑動兩個手指。 如果您已設(shè)置解鎖設(shè)備的密碼或模式，則會進入相關(guān)輸入屏幕進行輸入。

您也可以觸摸瀏覽，找到屏幕底部中間的解鎖按鈕，然后點按兩次。

Global and local menus

TalkBack允許您訪問全局和本地上下文菜單，無論您在設(shè)備上導航到哪里。 前者提供與設(shè)備整體相關(guān)的全局選項，后者提供僅與當前應用/屏幕相關(guān)的選項。

要訪問這些菜單:

1. Access the global menu by quickly swiping down then right.
2. Access the local menu by quickly swiping up then right.
3. Swipe left and right to cycle between the different options.
4. Once you've selected the option you want, double click to choose that option.

有關(guān)全局和本地上下文菜單下的所有選項的詳細信息，請參見使用全局和本地上下文 菜單。

Browsing web pages

您可以在Web瀏覽器中使用本地上下文菜單來查找僅使用標題，表單控件或鏈接，逐行瀏覽等導航網(wǎng)頁的選項。

例如，啟用"話語提示"后:

1. Open your web browser
2. Activate the URL bar
3. Enter a web page that has a bunch of headings on it, like the front page of bbc.co.uk. To enter the text of the URL:
   1. Select the URL bar by swiping left/right till you get to it then double tapping.
   2. Hold your finger down on the virtual keyboard until you get the character you want, then release your finger to type it. Repeat for each character.
   3. Once you've finished, find the Enter key and press it.
4. Swipe left and right to move between different items on the page.
5. Swipe up and right with a smooth motion to enter the local content menu
6. Swipe right until you find the "Headings and Landmarks" option.
7. Double tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", then double tap to activate.

iOS VoiceOver

iOS操作系統(tǒng)中內(nèi)置了VoiceOver的移動版本。

要開啟此功能，請轉(zhuǎn)到您的設(shè)置應用，然后選擇常規(guī)> 輔助功能> VoiceOver 。 按 VoiceOver 滑塊即可啟用(此頁面上還會顯示與VoiceOver相關(guān)的其他選項)。

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

1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move around items (when you find the item you want, you can remove your finger to select it).
3. To activate the selected item (e.g. open a selected app), double tap anywhere on the screen.
4. Swipe with three fingers to scroll through a page.
5. Tap with two fingers to perform a context-relevant action, for example taking a photo while in the camera app.

要再次關(guān)閉它，您必須返回到設(shè)置> 一般> 輔助功能> VoiceOver 使用上述手勢，然后將 VoiceOver 滑塊切換回關(guān)閉。

Unlock phone

要解鎖手機，您需要按照主頁按鈕(或滑動)照常。 如果您設(shè)置了密碼，您可以通過滑動/滑動(如上所述)選擇每個號碼，然后在找到正確的號碼后雙擊輸入每個號碼。

Using the Rotor

當VoiceOver打開時，您有一個稱為Rotor的導航功能，您可以從中快速選擇一些常見的有用選項。 使用它:

1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
2. Once you've found the option you want:
   1. Release your fingers to select it.
   2. If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.

Rotor下可用的選項是上下文相關(guān)的 - 它們將根據(jù)您所在的應用程序或視圖而有所不同(參見下面的示例)。

Browsing web pages

讓我們使用VoiceOver進行網(wǎng)絡(luò)瀏覽:

1. Open your web browser
2. Activate the URL bar
3. Enter a web page that has a bunch of headings on it, like the front page of bbc.co.uk. To enter the text of the URL:
   1. Select the URL bar by swiping left/right till you get to it then double tapping.
   2. For each character, hold your finger down on the virtual keyboard until you get the character you want, then release your finger to select it. Double-tap to type it.
   3. Once you've finished, find the Enter key and press it.
4. Swipe left and right to move between items on the page. You can double tap an item to select it (e.g. follow a link).
5. By default, the selected rotor option will be Speaking Rate — you can currently swipe up and down to increase or decreate the speaking rate.
6. Now turn two fingers around the screen like a dial, to show the rotor and move between its options. Here are a few examples of the options available:
   1. Speaking Rate: change speaking rate.
   2. Containers: Move between different semantic container on the page.
   3. Headings: Move between headings on the page.
   4. Links: Move between links on the page.
   5. Form Controls: Move between form controls on the page.
   6. Language: Move between different translations, if they are available.
7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.

控制機制

在我們的CSS和JavaScript無障礙文章中，我們研究了特定類型的控件機制的事件的概念(請參見鼠標特定事件 )。 總而言之，這些引起輔助功能問題，因為其他控制機制無法激活關(guān)聯(lián)的功能。

例如，點擊事件在訪問方面很好 - 相關(guān)聯(lián)的 事件處理程序可以通過單擊處理程序設(shè)置的元素，標簽到它并按Enter / Return或在觸摸屏設(shè)備上點擊它來調(diào)用。 請嘗試我們的 simple-button-example.html 示例(查看它正在運行 >)看看我們的意思。

另一方面，特定于鼠標的事件(如 mousedown 和 "https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseup\"> mouseup 創(chuàng)建問題 - 無法使用非鼠標控件調(diào)用其事件處理程序。

如果您嘗試控制我們的簡單框 -drag.html ( see example live / a>)示例與鍵盤或觸摸，你會看到的問題。 這是因為我們使用的代碼如下:

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

document.onmouseup = stopMove;

要啟用其他形式的控制，您需要使用其他等效事件，例如觸摸事件在觸摸屏設(shè)備上工作:

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

panel.ontouchend = stopMove;

我們提供了一個簡單的示例，說明如何同時使用鼠標和觸摸事件 - 請參閱 -box-drag.html"class ="external"> multi-control-box-drag.html ( multi-control-box-drag.html"class ="external">查看示例live 也)。

響應設(shè)計

響應式設(shè)計是讓您的應用的布局和其他功能動態(tài) 根據(jù)諸如屏幕尺寸和分辨率的因素而改變，因此它們對于不同設(shè)備類型的用戶是可用的和可訪問的。

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

• Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies like media queries, viewport, and flexbox.
• Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they will be more likely to be on slow network connections. It is therefore wise to serve smaller images to narrow screen devices as appropriate. You can handle this using responsive image techniques.
• Thinking about high resolutions. Many mobile devices have high resolution screens, and therefore need higher resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers these days. SVG has a small file size and will stay sharp whatever size it is being displayed at (see Adding vector graphics to the web for some more details).

具體移動注意事項

在網(wǎng)站在移動設(shè)備上更容易訪問時，還有其他重要的注意事項。 我們在這里列出了一對夫婦，但是當我們想到他們時會增加更多。

Not disabling zoom

使用視口，可以在您的 title ="HTML頭元素提供有關(guān)文檔的一般信息(元數(shù)據(jù))，包括其標題和指向 其腳本和樣式表。"> < head> :

<meta name="viewport" content="user-scalable=no">

你應該永遠不要這樣做，如果在所有可能 - 許多人會依靠放大，以便能夠看到你的網(wǎng)站的內(nèi)容，所以把這個功能遠離他們是一個很糟糕的主意。 在某些情況下，縮放可能會破壞UI; 在這種情況下，如果你覺得你絕對需要禁用縮放，你應該提供一些其他類型的等效，例如增加文本大小的控件，以不破壞你的UI。

Keeping menus accessible

由于移動設(shè)備上的屏幕窄得多，因此在移動設(shè)備上查看網(wǎng)站時，使用媒體查詢和其他技術(shù)使導航菜單縮小到顯示屏頂部的小圖標是非常常見的，這可以是 按下以僅在需要時顯示菜單。 這通常由"三水平線"圖標表示，并且設(shè)計模式因此被稱為"漢堡包菜單"。

在實施此類菜單時，您需要確保顯示控件的控件可通過適當?shù)目刂茩C制(通常為移動觸摸)訪問，如上述控制機制中所述， 并且在訪問菜單時頁面的其余部分被移出或以某種方式隱藏，以避免與導航導航混淆。

請參閱此處查看好漢堡菜單示例。

用戶輸入

在移動設(shè)備上，輸入數(shù)據(jù)對于用戶來說比在臺式計算機上的等同體驗更加惱人。 使用桌面或筆記本電腦鍵盤，比觸摸屏虛擬鍵盤或微型移動物理鍵盤更方便地將文本輸入到表單輸入中。

出于這個原因，值得嘗試最小化所需的打字量。 例如，您可以改為提供 / HTML / Element / select"title ="HTML選擇元素表示提供選項菜單的控件。"> < select> 菜單包含最常用的選項 有助于數(shù)據(jù)輸入的一致性)，并提供一個"其他"選項，顯示一個文本字段以輸入任何離群值。 您可以在 external"> common-job-types.html (請參閱 "external">普通工作示例live )。

還值得考慮使用HTML5表單輸入類型，如移動平臺上的日期，因為它們處理得很好 - 例如Android和iOS都顯示適合設(shè)備體驗的可用小部件。 請參見 html5-form-examples.html (有關(guān)示例，請參見 HTML5表單示例 ) - 嘗試加載這些內(nèi)容并在移動設(shè)備上進行操作。 例如:

• Types number, tel, and email display suitable virtual keyboards for entering numbers/telephone numbers
• Types time and date display suitable pickers for selecting times and dates.

如果您想為桌面設(shè)備提供不同的解決方案，您可以隨時使用功能檢測為移動設(shè)備提供不同的標記。 有關(guān)檢測不同輸入類型的原始信息，請參見輸入類型，并查看我們的 功能檢測文章了解更多信息。

概要

在本文中，我們向您提供了一些常見的移動輔助功能問題的詳細信息，以及如何克服這些問題。 我們還通過使用最常用的屏幕閱讀器，幫助您進行輔助功能測試。

也可以看看

• Guidelines For Mobile Web Development — A list of articles on Smashing Magazine covering different techniques for mobile web design.
• Make your site work on touch devices — Useful article about using touch events to get interactions working on mobile devices.