FlutterでiOSアプリを作成する場合のアクセシビリティ「VoiceOver」に関する注意点

私がこの半年開発した上で気が付いたことをメモとして記します。
Windowsでコードを作り<a href="https://codemagic.io" target="blank">codemagic</a>でビルドしました。
スクリーンリーダー__VoiceOver__に関係する内容です。

----------


## 開発環境情報
$ flutter doctor -v
の結果は以下の通りです。
[√] Flutter (Channel beta, 1.23.0-18.1.pre, on Microsoft Windows [Version 10.0.19042.685], locale ja-JP)
    • Flutter version 1.23.0-18.1.pre at C:\Android\flutter
    • Framework revision 198df796aa (8 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Android\sdk
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = C:\Android\sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.52.0)
    • VS Code at C:\Users\nyama\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.


## ダイアログボックスについて
とくに断りがなければ通常以下のように記述するかと思います。

showDialog(
  context: context,
  builder: (BuildContext context)  {
// 表示内容を記述
  }
);

Androidアプリの場合は上記でとくに問題ありません。
iOSアプリとしてビルドした場合、ダイアログのテキストやボタン以外をタッチするとVoiceOverが[[dismiss]]とアナウンスをします。
ダイアログ部分をタッチしていることを知ることはできますが、当然ダブルタップをしても何も反応しない部分の割合が多くかえって操作の妨げになります。
これは以下のように1行追加することで解消できます。

showDialog(
  barrierDismissible: false, // 追記部分
  context: context,
  builder: (BuildContext context)  {
// 表示内容を記述
  }
);


## Semanticsクラスにおけるヒントの読み上げの問題
[FlutterでSemanticsクラスを使ってコンテキストメニューを作成[(ttps://qiita.com/yama_1983/items/86b9f0fce5ba74ccf0be)記紹介していますように、ウィジェットに対して操作をガイドするヒントをスクリーンリーダーがアナウンスすることができます。
しかしiOSではVoiceOverがこの内容を読み上げることができません。
Cocoaアプリでもボタンにフォーカスしたさいにガイドアナウンスがありませんので、Xamarinでも同様の問題がある物と予想されます。
アナウンスを組み込むためにはObjectiveCやSwiftで作成する以外に現状方法がない物と思われます。


## 入力フィールドでの問題
※ この問題はFlutter __ver2.2.0__ で改善を確認しました。
これが一番の困りごとです。
TextField()およびFormField()で入力フィールドを作成した場合、通常は入力したキーに対してVoiceOverからのフィードバックが得られます。
しかし私の確認したところではじゅうぶんな内容が得られませんでした。
具体的には以下のような問題があります。
<ul>
<li>入力した文字が読み上げられません</li>
<li>削除した文字が読み上げられません</li>
<li>1本指縦スワイプでの漢字変換ができません</li>
<li>エンターキーの読み上げが適切ではありません</li>
</ul>
日本語特有の問題かとも思いましたが、海外の掲示板でも報告があり、これについての返信も書かれていませんでした。
プロパティの指定を細かく行えば解決できるのかもしれませんが、まだ答えが見つけられていません。
現状正常な入力を行うことができない物と思われます。
1つの代替案としては__webview_flutter__で入力欄を作成すれば正常なアナウンスが得られます。
<dl><dt>参考ページ</dt><dd>
[【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法 | サシミスタジオ](https://sashimistudio.site/flutter-webview/?unapproved=44&moderation-hash=e44179559db3ff0f9c6d1575cba415b0#comment-44)
[【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法 | サシミスタジオ](http://sashimistudio.site/flutter-webview-link/)
</dd>
</dl>


## まとめ
1つのコードからAndroidとiOS両対応のアプリが作成できるのは魅力的ですが、
現時点でiOSアプリをVoiceOver対応を意識して開発するのは一筋縄ではいかないようです。