協助工具

確保應用程式能被廣泛使用者存取是建置高品質應用程式的必要環節。設計不良的應用程式會對所有年齡層的人們造成障礙。《聯合國身心障礙者權利公約》聲明，必須在道義和法律上確保普遍存取資訊系統；世界各國都將輔助功能設為必要條件；且各公司都意識到最大化其服務存取權的商業優勢。

我們強烈建議您在發布應用程式之前，將輔助功能檢查清單納入關鍵條件。Flutter 致力於協助開發人員讓他們的應用程式更易於存取，並且除了底層作業系統提供的支援外，還包含對輔助功能的頂級框架支援，包括：

大字體

使用使用者指定的字體大小呈現文字小工具

螢幕閱讀器

傳達關於 UI 內容的語音回饋

足夠的對比度

以具有足夠對比度的色彩呈現小工具

這些功能的詳細資訊將在下方討論。

除了測試這些特定主題外，我們還建議使用自動化輔助功能掃描器

• 適用於 Android

  1. 安裝適用於 Android 的「輔助功能掃描器」
  2. 從「Android 設定 > 輔助功能 > 輔助功能掃描器 > 開啟」啟用「輔助功能掃描器」
  3. 導覽至「輔助功能掃描器」的「核取方塊」圖示按鈕以啟動掃描

• 適用於 iOS

  1. 在 Xcode 中開啟您的 Flutter 應用程式的 iOS 資料夾
  2. 選取模擬器作為目標，然後按一下「執行」按鈕
  3. 在 Xcode 中，選取「Xcode > 開啟開發人員工具 > 輔助功能檢查器」
  4. 在「輔助功能檢查器」中，選取「檢查 > 啟用指標以進行檢查」，然後在正在執行的 Flutter 應用程式中選取各種使用者介面元素，以檢查其輔助功能屬性
  5. 在「輔助功能檢查器」中，選取工具列中的「稽核」，然後選取「執行稽核」以取得潛在問題的報告

• 適用於網頁

  1. 開啟 Chrome DevTools（或其他瀏覽器中的類似工具）
  2. 檢查包含 Flutter 產生的 ARIA 屬性的 HTML 樹狀結構。
  3. 在 Chrome 中，「元素」索引標籤有一個「輔助功能」子索引標籤，可用於檢查匯出到語意樹狀結構的資料

Android 和 iOS 都包含系統設定，可設定應用程式使用的所需字體大小。在決定字體大小時，Flutter 文字小工具會遵循此 OS 設定。

字體大小由 Flutter 根據 OS 設定自動計算。不過，身為開發人員，您應該確保在字體大小增加時，您的版面配置有足夠的空間來呈現其所有內容。例如，您可以在設定為使用最大字體設定的小螢幕裝置上測試應用程式的所有部分。

以下兩個螢幕擷取畫面顯示以預設 iOS 字體設定呈現的標準 Flutter 應用程式範本，以及在 iOS 輔助功能設定中選取最大字體設定的範本。

對於行動裝置，螢幕閱讀器（TalkBack、VoiceOver）讓視障使用者能夠取得關於螢幕內容的語音回饋，並透過在行動裝置上手勢操作和在桌上型電腦上鍵盤快捷鍵與 UI 互動。在您的行動裝置上開啟 VoiceOver 或 TalkBack，並在您的應用程式中導覽。

若要在您的裝置上開啟螢幕閱讀器，請完成下列步驟

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  runApp(const MyApp());
  SemanticsBinding.instance.ensureSemantics();
}

請參閱下列影片示範，以了解 Victor Tsaran 如何使用 VoiceOver 瀏覽現已封存的 Flutter Gallery 網頁應用程式。

Flutter 的標準小工具會自動產生輔助功能樹狀結構。不過，如果您的應用程式需要其他功能，則可以使用 Semantics 小工具進行自訂。

當您的應用程式中有應以特定語音發聲的文字時，請呼叫 TextSpan.locale，以告知螢幕閱讀器要使用哪種語音。請注意，MaterialApp.locale 和 Localizations.override 不會影響螢幕閱讀器使用的語音。通常，螢幕閱讀器會使用系統語音，除非您使用 TextSpan.locale 明確設定語音。

足夠的色彩對比度使文字和影像更容易閱讀。除了讓有各種視覺障礙的使用者受益外，當在極端照明條件下（例如，暴露在直射陽光下或在亮度較低的顯示器上）檢視裝置上的介面時，足夠的色彩對比度也有助於所有使用者。

W3C 建議

• 小型文字（低於 18 點一般或 14 點粗體）至少 4.5:1
• 大型文字（18 點及以上一般或 14 點及以上粗體）至少 3.0:1

確保每個人都能使用您的應用程式表示從一開始就將輔助功能建置到其中。對於某些應用程式而言，這說起來容易做起來難。在下面的影片中，我們的兩位工程師將一個輔助功能狀態不佳的行動應用程式，提升到一個利用 Flutter 內建小工具提供更易於存取的體驗的狀態。

以輔助功能為考量建置 Flutter 應用程式

使用 Flutter 的 輔助功能準則 API 測試您的應用程式。此 API 會檢查您應用程式的 UI 是否符合 Flutter 的輔助功能建議。這些建議涵蓋文字對比度、目標大小和目標標籤的建議。

以下程式碼片段顯示如何在名為 AccessibleApp 的範例小工具上使用準則 API

import 'package:flutter_test/flutter_test.dart';
import 'package:your_accessible_app/main.dart';

void main() {
  testWidgets('Follows a11y guidelines', (tester) async {
    final SemanticsHandle handle = tester.ensureSemantics();
    await tester.pumpWidget(const AccessibleApp());

    // 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();
  });
}

若要試用這些測試，請在您於「撰寫您的第一個 Flutter 應用程式」程式碼實驗室中建立的應用程式上執行它們。該應用程式主畫面上的每個按鈕都可作為一個可點擊的目標，並以 18 點字體呈現文字。

您可以將準則 API 測試與其他小工具測試一起新增，或新增到個別檔案中，例如本範例中的 test/a11y_test.dart。

您可以透過視覺化在設定檔和發布模式下使用下列命令列旗標為您的網頁應用程式建立的語意節點來偵錯輔助功能

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

啟用旗標後，語意節點會顯示在小工具的上方；您可以驗證語意元素是否放置在它們應該放置的位置。如果語意節點放置不正確，請提交錯誤報告。

以下是您準備發布應用程式時要考慮的非詳盡清單。

• 主動互動。確保所有主動互動都有作用。任何可按下的按鈕都應該在按下時執行某些動作。例如，如果您針對 onPressed 事件使用 no-op 回呼，請將其變更為在螢幕上顯示 SnackBar，說明您剛按下哪個控制項。
• 螢幕閱讀器測試。當您點擊時，螢幕閱讀器應該能夠描述頁面上的所有控制項，並且描述應該是可理解的。使用 TalkBack (Android) 和 VoiceOver (iOS) 測試您的應用程式。
• 對比度。我們建議您在控制項或文字與背景之間使用至少 4.5:1 的對比度，但已停用的元件除外。還應該檢查影像是否有足夠的對比度。
• 情境切換。在輸入資訊時，不應該自動變更使用者情境。一般而言，小工具應該避免在沒有某種確認動作的情況下變更使用者情境。
• 可點擊的目標。所有可點擊的目標都應該至少為 48x48 像素。
• 錯誤。重要動作應該可以復原。在顯示錯誤的欄位中，如果可能，請建議更正方式。
• 色覺缺陷測試。控制項應該在色盲和灰階模式下都可用且可讀。
• 縮放比例。使用者介面在文字大小和顯示縮放的非常大比例下，仍應保持易讀和可用。

若要進一步了解 Flutter 和輔助功能，請查看由社群成員撰寫的下列文章

• 深入探討 Flutter 的輔助功能小工具
• Flutter 中的語意
• Flutter：為螢幕閱讀器打造絕佳體驗

除非另有說明，否則本網站上的文件反映的是 Flutter 的最新穩定版本。頁面最後更新於 2024-10-17。 查看原始碼 或回報問題。