Contents

無障礙

Contents

確保你的應用能夠被廣泛的使用者使用是建構高品質應用程式至關重要的一點。如果你的應用設計不佳，可能會無法覆蓋到所有年齡段的人。 聯合國關於殘疾人權利 規定了道德和法律必須確保資訊系統能夠普遍使用。世界各地也都要求提供無障礙的環境；同樣，公司也認識到了最大限度覆蓋服務的優勢所在。

我們強烈建議你將輔助功能清單新增到釋出應用前的關鍵指標。 Flutter 始終致力於支援開發者能夠使它的應用更易於存取，其中就包括了由底層作業系統提供的一流的無障礙支援，包括：

大字型
使用使用者指定的字型大小呈現文字 widget

讀屏器
透過語音反饋傳達使用者介面的內容

高對比度
在渲染 widget 時，使用具有高對比度的顏色

詳細關於這個特性的討論，請繼續閱讀。

輔助功能檢測

關於無障礙功能檢測的細節，我們將在下面討論。除了測試這些特定主題外，我們還建議您使用自動輔助功能掃描程式：

  • 對於 Android:

    1. 在 Android 上安裝 輔助掃描程式

    2. 透過 設定 > 輔助 > 輔助掃描器 > 開啟在 Android 啟用輔助功能掃描程式

    3. 在導航欄找到輔助掃描器複選框按鈕啟動掃描

  • 對於 iOS:

    1. 在 Xcode 中開啟 Flutter 應用程式的 iOS 資料夾

    2. 找到模擬器，然後單擊 執行 按鈕

    3. 在 Xcode 選擇 Xcode > 開發者工具 > 輔助檢查器

    4. 在輔助檢查器中，選擇 檢查> 啟用點檢查，然後執行 Flutter 應用程式，選擇各種使用者介面元素來檢查其輔助功能

    5. 在輔助檢查器中，選擇工具欄中的稽核，然後選擇執行音訊”來獲取潛在問題的報告

  • 對於 web:

    1. 開啟 Chrome 開發者工具（或其他瀏覽器中的類似工具）

    2. 檢查包含 Flutter 產生的 ARIA 屬性的 HTML 樹。

    3. 在 Chrome 中，「Elements」選項卡中有一個「Accessbility」子選項卡，可用於檢查匯出到語義樹的資料。

大字型

Android 和 iOS 都包含配置應用程式所需字型大小的系統設定。在確定字型大小時， Flutter 文字 widget 會遵循當前系統設定。

給開發者的提示

Flutter 會根據作業系統設定自動計算字型大小。但是，作為開發人員，你應確保在增加字型大小時，你的頁面有足夠的空間來呈現其所有內容。例如，你可以在小螢幕上設定最大的字型來測試你應用上的全部內容。

例子

以下兩個螢幕截圖分別顯示了使用預設 iOS 字型設定呈現的標準 Flutter 應用程式，和使用 iOS 輔助功能設定中選擇的最大字型設定呈現的 Flutter 應用程式。

Default font setting
Default font setting
Largest accessibility font setting
Largest accessibility font setting

讀屏器

在移動裝置上，讀屏器（TalkBack、VoiceOver）可以使視障使用者能夠獲得有關螢幕內容的語音反饋，並透過移動裝置上的手勢和桌面上的鍵盤快捷鍵與 UI 進行互動。在你的移動裝置上開啟 VoiceOver 或 TalkBack 並瀏覽你的應用程式。

To turn on the screen reader on your device, complete the following steps:

  1. On your device, open Settings.
  2. Select Accessibility and then TalkBack.
  3. Turn ‘Use TalkBack’ on or off.
  4. Select Ok.

To learn how to find and customize Android’s accessibility features, view this video.

  1. On your device, open Settings > Accessibility > VoiceOver
  2. Turn the VoiceOver setting on or off

To learn how to find and customize iOS accessibility features, view this video.

對於 Web，目前支援以下螢幕閱讀器：

移動瀏覽器：

  • iOS - VoiceOver
  • Android - TalkBack

桌面瀏覽器：

  • MacOS - VoiceOver
  • Windows - JAWs & NVDA

Web 上的讀屏器使用者需要點選「啟用輔助功能」按鈕來建構語義樹。如果你使用下面這個 API 以程式設計方式為你的應用程式自動啟用輔助功能，則使用者可以跳過此步驟：

RendererBinding.instance.setSemanticsEnabled(true)

Windows comes with a screen reader called Narrator but some developers recommend using the more popular NVDA screen reader. Learn about using NVDA to test Windows apps here.

On a Mac, you can use the desktop version of VoiceOver, which is included in macOS.

On Linux, a popular screen reader is called Orca. It comes pre-installed with some distributions and is available on package repositories such as apt. Learn about using Orca here.


檢視此 影片示範，瞭解 Victor Tsaran，他領導了 Material Design 的輔助功能計劃，並在 Flutter Gallery Web 應用程式中使用了 VoiceOver。

Flutter 的標準 widget 會自動產生無障礙樹。但是，如果你的應用需要不同的東西，則可以使用 語義小部件 來自訂您應用程式的無障礙體驗。

高對比度

高對比度能夠使文字和影象更易於閱讀。除了使具有各種視覺障礙的使用者受益外，高對比度也能夠幫助所有使用者在極端光照條件下 (例如在直射陽光下或在低亮度顯示器上) 觀看裝置上的介面。

W3C 建議:

  • 小文字至少 4.5:1 (低於 18 畫素常規或 14 畫素粗體)

  • 大文字至少 3.0:1 (18 畫素及以上常規或 14 畫素及以上粗體)

給開發者的提示

確保你包含的任何影象都具有較高的對比度。

在 widget 上指定顏色時，請確保在前景色和背景色之間具備足夠的對比度。

思考如何建構無障礙應用

確保你的應用能夠被所有人使用，這意味著你需要從一開始就考慮到無障礙。對於一些應用，說起來容易做起來難。在下面的影片中，我們的兩名工程師從一個無障礙狀態中獲取了一個 Flutter 內建的 widget，以提供更加便捷的體驗。

Testing accessibility on mobile

Test your app using Flutter’s Accessibility Guideline API. This API checks if your app’s UI meets Flutter’s accessibility recommendations. These cover recommendations for text contrast, target size, and target labels.

The following example shows how to use the Guideline API on Name Generator. You created this app as part of the Write your first Flutter app codelab. Each button on the app’s main screen serves as a tappable target with text represented in 18 point.

final SemanticsHandle handle = tester.ensureSemantics();
await tester.pumpWidget(MyApp());

// Checks that tappable nodes have a minimum size of 48 by 48 pixels
// for Android.
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

// Checks that tappable nodes have a minimum size of 44 by 44 pixels
// for iOS.
await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));

// Checks that touch targets with a tap or long press action are labeled.
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));

// Checks whether semantic nodes meet the minimum text contrast levels.
// The recommended text contrast is 3:1 for larger text
// (18 point and above regular).
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();

You can add Guideline API tests in test/widget_test.dart of your app directory, or as a separate test file (such as test/a11y_test.dart in the case of the Name Generator).

在 Web 上測試無障礙：

您可以透過在配置檔案和釋出模式下使用以下命令列標誌視覺化為你的 Web 應用程式建立的語義節點來除錯無障礙：

$ flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

標記啟用後，語義節點出現在 widget 的頂部；你可以驗證語義元素是否放置在應有的位置。如果語義節點放置不正確，請 提交錯誤報告。

無障礙釋出清單

這裡是一些應用釋出前的你需要考慮的部分清單。

  • 主動互動。確保所有可以互動的地方都會給予反饋。任何按鈕在按下之後都會做點什麼。例如，如果你有一個“onPressed”事件的無操作回呼(Callback)，請改為顯示一個“SnackBar”，並告訴使用者剛才按下了哪個控制項。

  • 螢幕閱讀測試。螢幕閱讀器應該能夠讓你在點選控制項時描述頁面上所有的控制項，並且描述應易於理解。請使用 TalkBack（Android）以及 VoiceOver (iOS) 測試你的應用。

    對比度。我們建議你至少將控制項或文字與背景之間的比例設為 4.5 : 1，禁用的元件除外。圖片也應該經過稽核足夠的對比度。

  • 上下文切換。當用戶輸入資訊時你不應改變其資訊。通常來說，widget 應該避免在沒有任何確認動作的情況下更改使用者的上下文。

  • 可點選的目標。所有可點選的目標平均至少應為 48x48 畫素。

  • 錯誤。所有重要動作應該能夠被撤銷。在有限範圍內顯示錯誤原因，如果可能的話，提供訂正建議。

  • 色覺不足測試。控制項應該可用並且在色盲和灰度模式下清晰可見。

  • 比例係數。文字大小和顯示比例的使用者介面應保持清晰易用。

更多資訊

如果你希望瞭解更多，尤其是如何配置 semantics tree，請檢視如下社群成員貢獻的文章：