輔助功能測試

為確保您的應用符合無障礙標準，請參照公共標準進行檢查，例如網路內容無障礙指南 (WCAG) 2 和 EN 301 549，並使用 自願性產品無障礙模板 (VPAT) 等資源對您的產品進行自我評估。有關這些法規的更多詳細資訊，請檢視主要的無障礙頁面。

我們建議使用自動化無障礙掃描工具來測試以下內容

• 針對 Android

  1. 安裝 Android 版 Accessibility Scanner (無障礙掃描工具)
  2. 透過 Android 設定 > 無障礙 > Accessibility Scanner > 開啟 來啟用無障礙掃描工具。
  3. 導航至無障礙掃描工具的“複選框”圖示按鈕以啟動掃描。

• 針對 iOS

  1. 在 Xcode 中開啟 Flutter 應用的 iOS 資料夾。
  2. 選擇一個模擬器作為目標，然後點選 Run (執行) 按鈕。
  3. 在 Xcode 中，選擇 Xcode > Open Developer Tools (開啟開發者工具) > Accessibility Inspector (無障礙檢查器)。
  4. 在無障礙檢查器中，選擇 Inspection (檢查) > Enable Point to Inspect (啟用點選檢查)，然後選擇執行中 Flutter 應用的各個使用者介面元素，以檢查它們的無障礙屬性。
  5. 在無障礙檢查器中，選擇工具欄中的 Audit (審計)，然後選擇 Run Audit (執行審計) 以獲取潛在問題的報告。

• 針對 Web

  1. 開啟 Chrome DevTools（或在其他瀏覽器中使用類似工具）。
  2. 檢查 semantics host 下的 HTML 樹，其中包含由 Flutter 生成的 ARIA 屬性。
  3. 在 Chrome 中，“Elements (元素)”選項卡中有一個“Accessibility (無障礙)”子選項卡，可用於檢查匯出到語義樹的資料。

使用 Flutter 的 Accessibility Guideline API (無障礙指南 API) 測試您的應用。此 API 會檢查您的應用 UI 是否符合 Flutter 的無障礙建議。這些建議涵蓋了文字對比度、目標尺寸和目標標籤的相關規範。

以下程式碼片段展示瞭如何在名為 AccessibleApp 的示例 widget 上使用 Guideline 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 create 建立的新應用上執行它們。該應用主螢幕上的每個按鈕都充當一個可點選的目標，其文字以 18 號字型渲染。

您可以將 Guideline API 測試與其他 Widget 測試一起新增，也可以將其放入單獨的檔案中，例如本例中的 test/a11y_test.dart。

您可以透過在 profile 和 release 模式下使用以下命令列標誌，視覺化為 Web 應用建立的語義節點，從而除錯無障礙功能

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

啟用該標誌後，語義節點會出現在 widget 之上；您可以驗證語義元素是否放置在正確的位置。如果語義節點位置不正確，請提交 Bug 報告。