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

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

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

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

有一些例外，需要特別考慮移動(dòng); 主要有:

• 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上的屏幕閱讀器測(cè)試摘要

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

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

Android TalkBack

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

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

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

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

當(dāng)"話語提示"打開時(shí)，解鎖手機(jī)有點(diǎn)不同。

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

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

Global and local menus

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

要訪問這些菜單:

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)全局和本地上下文菜單下的所有選項(xiàng)的詳細(xì)信息，請(qǐng)參見使用全局和本地上下文 菜單。

Browsing web pages

您可以在Web瀏覽器中使用本地上下文菜單來查找僅使用標(biāo)題，表單控件或鏈接，逐行瀏覽等導(dǎo)航網(wǎng)頁的選項(xià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的移動(dòng)版本。

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

一旦VoiceOver啟用，iOS基本控制手勢(shì)會(huì)有一點(diǎn)不同:

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 使用上述手勢(shì)，然后將 VoiceOver 滑塊切換回關(guān)閉。

Unlock phone

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

Using the Rotor

當(dāng)VoiceOver打開時(shí)，您有一個(gè)稱為Rotor的導(dǎo)航功能，您可以從中快速選擇一些常見的有用選項(xiàng)。 使用它:

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下可用的選項(xiàng)是上下文相關(guān)的 - 它們將根據(jù)您所在的應(yīng)用程序或視圖而有所不同(參見下面的示例)。

Browsing web pages

讓我們使用VoiceOver進(jìn)行網(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.

控制機(jī)制

在我們的CSS和JavaScript無障礙文章中，我們研究了特定類型的控件機(jī)制的事件的概念(請(qǐng)參見鼠標(biāo)特定事件 )。 總而言之，這些引起輔助功能問題，因?yàn)槠渌刂茩C(jī)制無法激活關(guān)聯(lián)的功能。

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

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

如果您嘗試控制我們的簡單框 -drag.html ( see example live / a>)示例與鍵盤或觸摸，你會(huì)看到的問題。 這是因?yàn)槲覀兪褂玫拇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;

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

響應(yīng)設(shè)計(jì)

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

特別是，需要解決的最常見的問題是移動(dòng)的:

• 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).

具體移動(dòng)注意事項(xiàng)

在網(wǎng)站在移動(dòng)設(shè)備上更容易訪問時(shí)，還有其他重要的注意事項(xiàng)。 我們?cè)谶@里列出了一對(duì)夫婦，但是當(dāng)我們想到他們時(shí)會(huì)增加更多。

Not disabling zoom

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

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

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

Keeping menus accessible

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

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

請(qǐng)參閱此處查看好漢堡菜單示例。

用戶輸入

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

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

還值得考慮使用HTML5表單輸入類型，如移動(dòng)平臺(tái)上的日期，因?yàn)樗鼈兲幚淼煤芎?- 例如Android和iOS都顯示適合設(shè)備體驗(yàn)的可用小部件。 請(qǐng)參見 html5-form-examples.html (有關(guān)示例，請(qǐng)參見 HTML5表單示例 ) - 嘗試加載這些內(nèi)容并在移動(dòng)設(shè)備上進(jìn)行操作。 例如:

• 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í)使用功能檢測(cè)為移動(dòng)設(shè)備提供不同的標(biāo)記。 有關(guān)檢測(cè)不同輸入類型的原始信息，請(qǐng)參見輸入類型，并查看我們的 功能檢測(cè)文章了解更多信息。

概要

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

也可以看看

• 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.