RainVisitor Blog

RainVisitor

0%

【文章翻譯】Accessibility in Flutter on the Web

Posted on Edited on In

【文章內容使用 Gemini 1.5 Pro 自動產生】

Flutter 如何讓畫布渲染的應用程式對輔助技術使用者更友善

Flutter 框架支援的目標平台之一是 Web。Flutter 應用程式透過將所有 UI 渲染到畫布元素上，來保證像素精準度和平台一致性。但是，預設情況下，畫布元素不可存取。本案例研究說明了此類畫布渲染的 Flutter 應用程式如何支援存取性。

Dash, the Flutter mascot, with a tablet and a drink.

Flutter 擁有大量的預設 Widget，這些 Widget 會 自動產生存取性樹。存取性樹是一個存取性物件的樹，輔助技術可以查詢其屬性和特性，並在其上執行操作。對於自訂 Widget，Flutter 的 Semantics 類別允許開發人員描述 Widget 的含義，幫助輔助技術理解 Widget 的內容。

出於效能考量，在撰寫本文時，Flutter 的存取性預設情況下是選擇性啟用的。Flutter 團隊希望最終在 Flutter Web 中預設啟用語義。然而，在目前的狀況下，這會在許多情況下導致顯著的效能成本，並且需要一些優化才能更改預設值。希望始終啟用 Flutter 存取性模式的開發人員可以使用以下程式碼片段：

1
2
3
4
5
6
7
8
import 'package:flutter/semantics.dart';

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

注意：如果您的應用程式絕對需要知道使用者是否正在使用螢幕閱讀器等輔助設備，請允許使用者選擇性啟用。

啟用 Flutter 的存取性支援後，HTML 會自動更改，如本頁面的其餘部分所示。

注意： 螢幕閱讀器只是利用所述方法獲益的輔助技術的一個例子。為了提高可讀性，螢幕閱讀器被用作此類技術和其他輔助技術的代表。

Flutter 的存取性選擇性啟用

Flutter 的選擇性啟用機制是一個隱藏的按鈕。它在 HTML 中放置一個按鈕，準確地說，是一個 flt-semantics-placeholder 元素，其 role 等於 “button” - 對有視力的人來說是不可見且不可達的。它是一個自訂元素，已應用樣式，因此它不會顯示，除非您使用螢幕閱讀器，否則不可選取。

1
2
3
4
5
6
7
8
9
10
11
12
<flt-semantics-placeholder
  role="button"
  aria-live="polite"
  aria-label="Enable accessibility"
  tabindex="0"
  style="
        position: absolute;
        left: -1px;
        top: -1px;
        width: 1px;
        height: 1px;"
>&lt;/flt-semantics-placeholder&gt;
1
2
3
4
/* `<flt-semantics-placeholder>` inherits from `<flutter-view>`. */
flutter-view {
  user-select: none;
}

啟用後的變更

當一個使用螢幕閱讀器的使用者點擊這個按鈕時會發生什麼？考慮一個不太複雜的例子，例如 Flutter Gallery 中的 卡片，如以下螢幕截圖所示。

A classic card component with an image, a heading, and some text.

為了更好地理解使用者點擊按鈕時發生了什麼變化，請比較啟用和未啟用 Chrome DevTools 的螢幕截圖，當您 檢查存取性樹 時。第二張螢幕截圖顯示的語義資訊比第一張多很多。

未啟用：

Chrome DevTools showing an “Enable accessibility” button.

已啟用：

Chrome DevTools showing a rich accessibility tree with headings, buttons, groups, etc.

實作細節

Flutter 的核心思路是建立一個可存取的 DOM 結構，反映目前在畫布上顯示的內容。這包括一個 flt-semantics-host 父自訂元素，它具有 flt-semantics 和 flt-semantics-container 子元素，而這些子元素又可以巢狀。考慮一個按鈕 Widget，例如 TextButton。此 Widget 在 DOM 中由 flt-semantics 元素表示。flt-semantics 元素上的 ARIA 標註（例如，role 或 aria-label）和其他 DOM 屬性（tabindex，事件監聽器）允許螢幕閱讀器向使用者宣佈這個元素為按鈕，並支援點擊和點選它，即使它不是一個字面上的