Zenn
🎐

VoiceOverが日本語を読み上げてくれないので対応させた（SwiftUI）

2023/08/01に公開
iOS
Swift
Xcode
SwiftUI
アクセシビリティ
tech

はじめに

SwiftUIを使ってiOSアプリを製作する中で、視覚サポートの一つであるVoiceOver（UIの読み上げ機能）に対応させたかったのですが、日本語の文章を選択した時に無言になってしまい、何も読み上げてくれませんでした。

最初はiPhone側の設定の問題かとも思いましたが、UIKitで作った同じ状態のアプリは特別な設定をしなくても読み上げてくれたので、SwiftUIの仕様みたいです。

気づかずにリリースしてしまうと、読み上げ機能が必要な人にとっては使用できないアプリになってしまう恐れがあるので、解決策を共有したいと思って今回初めて記事を書きました。

誰かの参考になれば嬉しいです。

環境

  • Swift 5.7
  • Xcode 14.2
  • テスト端末iPhone 12 mini(iOS:16.4)
    • 端末の言語設定：日本語
    • 端末の地域設定：日本
    • 言語を検出：ON

結論

日本語の言語設定の追加と、Localizable.stringファイルが必要でした。

状況

サンプルとして以下のコードをビルドしてみます。

ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing:30) {
            //①
            Image(systemName: "heart.fill")
                .font(.largeTitle).foregroundColor(.pink)

            //②
            Text("Absolute Destiny Apocalypse")

            //③
            Text("絶対運命黙示録")
        }
        .padding()
    }
}

得られた挙動

  • ①をタップ → 「image, love」と英語っぽく読み上げられる
  • ②をタップ → 「Absolute Destiny Apocalypse」が英語っぽく読み上げられる
  • ③をタップ → UIの選択はされるが、無言
① ② ③

設定手順

  1. ソースツリーの一番上のアプリ名App > Project > info > Localizationから＋を押してJapaneseを選択し、表に追加させます。（この時点ではまだ読み上げられず）
  2. プロジェクトに新規ファイルを追加 > Resourceの中にあるString Fileを選んでNext > ファイル名はLocalizable.string(初期名) > create
  3. 出来上がったファイルを開いて、右側のinspectorのLocalize...をクリック > Englishを選ぶ > Localize...と同じ場所に出現したチェックボックスのjapaneseにチェック > Localizable.string(ja)とLocalizable.string(en)の2つファイルが追加されます。
  4. これで再度ビルドしてみると、ボイスオーバーで日本語が読み上げられるようになります。


得られた挙動

  • ①をタップ → 「ラブ、イメージ、ハート」と日本語っぽく読み上げられる
  • ②をタップ → 「あぶさるーと　でぃすてぃにー　あぽかりぷす」と日本語っぽい英語で読み上げられる
  • ③をタップ → 「ぜつたいうんめいもくしろく」と流暢な日本語で読み上げられる

②の日本語英語が少し不自然ですが、無事に読み上げがされるようになりました。
調べてみたのですが、端末の言語設定が日本語優先になっている時は、デフォルトで英文は日本語英語で読まれるみたいです。ちなみに、言語設定を英語優先にしたところ、①と②が流暢な英語、③は日本語で読み上げられました。

Localizable.stringファイルについて

今回Localizableで追加されたLocalizable.stringファイルは多言語化用のファイルで、

Localizable.string(en)
”コードの中の文字列”=“表示させたい文字列”;

と対訳を書くと、端末の言語設定に応じてそちらが表示されるようになります。
上の例では端末言語設定が英語の時に表示させる文字列を変更させることができます。
VoiceOverをオンにした状態では、設定に応じて表示されている文字列が優先されて読まれました。
文末には必ず;が必要で、忘れるとエラーになります。
多言語化についてはこちらの記事が簡潔でわかりやすかったです。
https://zenn.dev/sakutech/articles/swiftui-localization

さいごに

初心者向けのアクセシビリティに関する記事が少なかったので書きました。
勉強を初めて日が浅いので、間違ってる部分があったらコメントいただけると大変助かります。

参考

https://www.motokis-brain.com/article/84

Discussion