RichTextがiOSのアクセシビリティが反映されない問題

こんにちは。まっさんです。

まとめ

RichTextだとiOSのアクセシビリティが反映されないため、RichText widgetではなく、Text.rich を使って、文章にURLリンクなどを埋め込みましょう！

問題になったところ

例えば次の様なコードがあったとしましょう

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          const Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: 'テストテステストテス',
                  style: TextStyle(fontSize: 20),
                ),
                TextSpan(
                  text: 'HOGEHOGEHOGEHOGEO',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ),
          const Text(
            'HOGEHOGEHOGEHOGEO テストテストテスト',
            style: TextStyle(fontSize: 20),
          ),
          RichText(
            text: const TextSpan(
              children: [
                TextSpan(
                  text: 'テストテストテスト',
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
                TextSpan(
                  text: 'HOGEHOGEHOGEHOGEO',
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

結果の画面が次の通りです。

そして、iOSの設定にあるアクセシビリティの「画面表示とテキストサイズ」→「さらに大きくする」設定を以下の様に反映させた場合の結果が以下の画像の様になります。

画像で見てわかる通り、’RichText’ で指定した文字はアクセシビリティーに反映されませんでした。

原因

よく、RichTextを用いて文章内にリンクなど、画面遷移のボタンを入れ込むのを見かけますが、RichTextは自分で設定したものを表示させたい時に使用するwidgetの為、これは使い方としては誤っている様です。

参考文献