flutter-accessibility は何をしますか？
Flutterアプリをスクリーンリーダーなどの支援技術に対応するよう設定します。
概要
このスキルは、Flutterアプリケーションのアクセシビリティ（a11y）サポートを構成するためのガイドとツールを提供します。アプリをより包括的にし、支援技術に依存するユーザーがアプリを効果的に操作・理解できるようにします。
主な機能
- Semanticsウィジェット: ウィジェットにアクセシビリティラベル、ヒント、値、および状態を追加します。
- スクリーンリーダーのサポート: iOSのVoiceOverやAndroidのTalkBackとの互換性を確保します。
- フォーカス管理: キーボードやスイッチ制御ユーザーのためのフォーカス順序とトラバーサルを制御します。
- ランドマークとヘッダー: ナビゲーションを支援するために、領域をランドマークまたはヘッダーとしてマークします。
- カスタムアクション: スワイプやタップなどのアクセシブルな操作を定義します。
- マージセマンティクス: 複数の子ウィジェットからのセマンティクス情報を1つのノードに結合します。
使用方法
以下の例は、基本的なアクセシビリティラベル付きアイコンボタンの実装を示しています。
Semantics(
label: '設定を開く',
hint: '設定画面に移動します',
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// 設定を開く
},
),
)
より複雑な例として、マージセマンティクスを使用したカスタムリストアイテムを示します。
Semantics(
container: true,
child: MergeSemantics(
child: ListTile(
leading: Icon(Icons.notifications),
title: Text('通知'),
subtitle: Text('新しいメッセージが3件あります'),
onTap: () {
// 通知を開く
},
),
),
)
ベストプラクティス
- ラベルの簡潔さ: ラベルは簡潔で説明的に保ちます。冗長な情報は避けてください。
- ヒントは慎重に: ヒントは必要な場合にのみ使用し、アクションの結果を説明します。
- テスト: iOSではVoiceOver、AndroidではTalkBackを使用して実際のデバイスでテストします。
- キーボードナビゲーション: すべてのインタラクティブ要素にキーボードからアクセスできることを確認します。
- 動的コンテンツ: 動的に変更されるコンテンツに対して
announceText()やannounce()の使用を検討します。
プラットフォームサポート
| プラットフォーム | スクリーンリーダー | 備考 |
|---|---|---|
| iOS | VoiceOver | UIKitおよびSwiftUIと同様の標準的なセマンティクスサポート |
| Android | TalkBack | Material Designコンポーネントと互換性あり |
| Web | ChromeVox, NVDA, JAWS | セマンティックHTML要素への適切なマッピングが必要 |
| macOS | VoiceOver | AppKit統合と同様のサポート |