Zenn
✨

（SwiftUI）VoiceOverカーソルのヒットエリアを広げる方法

2022/03/03に公開
iOS
SwiftUI
アクセシビリティ
VoiceOver
tech

はじめに

以下の環境で動作検証しました。

  • Xcode 13.2.1 (13C100)
  • iOS 15.3.1

実装例

以下のように実装します。

struct ContentView: View {
  var body: some View {
    Text("Hello")
      .font(.system(size: 16))
      .frame(width: 200, height: 50)
      .background(Color.clear)
      .accessibilityElement(children: .combine)
  }
}

上記の実装について解説します。

  1. .frameを利用してビューのフレームを広げます。
  2. .backgroundを利用してフレームの背景を透明色で塗りつぶします。
  3. .accessibilityElementを利用してアクセシビリティ要素を結合します。

透明色でフレームの背景を塗りつぶしてからアクセシビリティ要素を結合するのがポイントです。理由はわかりませんが、この方法であればVoiceOverカーソルのヒットエリアがフレームのサイズと同期します。

なお、VoiceOverカーソルのヒットエリアを広げる方法はドキュメント化されていません。従って、上記の実装が今後も動作するかは補償しません。

※見落としているだけかもしれませんので、Apple DeveloperにVoiceOverカーソルのヒットエリアについてのドキュメントがあれば教えていただけると助かります。

（追記）iOS 15以降の実装例

iOS 15以降は以下のように.contentShapeを追加する必要があります。指定しなかった場合、VoiceOverカーソルのヒットエリアは文字列「Hello」を囲む最小のフレームに設定されます。

struct ContentView: View {
  var body: some View {
    Text("Hello")
      .font(.system(size: 16))
      .frame(width: 200, height: 50)
      .background(Color.clear)
      .contentShape(Rectangle())
      .accessibilityElement(children: .combine)
  }
}

参考資料

  1. Accessibility Modifiers - Apple Developer

Discussion