【SwiftUI】アクセシビリティ設定によってフォントサイズが変わってしまう

はじめに

iPhoneの設定にアクセシビリティはとても優れており、様々な設定が存在します。
今回はそんなアクセシビリティに関する落とし穴について紹介できたらと思います。

問題点

このようなUIのアプリがあったとします。

現在は信号の表示であることが容易にわかります。
しかし、アクセシビリティで文字の大きさを大きくしていた場合はどうなるでしょうか。

このような表示になってしまいます。
これでは信号であるという事がユーザーに伝わりません。

もし省略されている文字がアプリの使い方であった場合、
ユーザーはアプリの使い方がわからないということが起きてしまうわけです。

対策方法

固定サイズ

dynamicTypeSizeで1つだけ指定すると固定のサイズになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .center) {
            Text("青信号")
                .frame(width: 120, height: 70)
                .background(Color.cyan)
+               .dynamicTypeSize(.medium)
            Text("黄信号")
                .frame(width: 120, height: 70)
                .background(Color.yellow)
+               .dynamicTypeSize(.medium)
            Text("赤信号")
                .frame(width: 120, height: 70)
                .background(Color.red)
+               .dynamicTypeSize(.medium)
        }
    }
}

この方法は確実ではありますが、ユーザーフレンドリではありません。
mediumでは文字が小さいと感じる方もいるからです。

xSmall	AX 5

範囲指定

文字が省略されない程度までは大きくできるように設定します。
今回はxSmallからxxLargeまでの範囲を指定しています。

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .center) {
            Text("青信号")
                .frame(width: 120, height: 70)
                .background(Color.cyan)
+               .dynamicTypeSize(DynamicTypeSize.xSmall...DynamicTypeSize.xxLarge)
            Text("黄信号")
                .frame(width: 120, height: 70)
                .background(Color.yellow)
+               .dynamicTypeSize(DynamicTypeSize.xSmall...DynamicTypeSize.xxLarge)
            Text("赤信号")
                .frame(width: 120, height: 70)
                .background(Color.red)
+               .dynamicTypeSize(DynamicTypeSize.xSmall...DynamicTypeSize.xxLarge)
        }
    }
}

最大サイズにしても文字が省略されていません！

xSmall	AX 5

おわり

意外と見落としがちなところなので気をつけていきたいです。