テーブルのセルのVoiceOver対応

テーブルのセルの VoiceOver 対応 宇佐見公輔 2025-04-23 / YUMEMI.grow Mobile #21 株式会社ゆめみ

自己紹介 宇佐見公輔（うさみこうすけ） • 株式会社ゆめみ iOS テックリード 近況 •『モバイルアプリアクセシビリティ入門』 読書会に継続参加中 • Nagoya.swift #1 参加予定 1 / 21

今日の話 • 先月は、「VoiceOver API の基本」という話をしました • 今日は、CollectionView や TableView の Cell の VoiceOver 対応について話します 2 / 21

セルの VoiceOver 対応

基本的な VoiceOver 対応 • 標準コンポーネントはデフォルトで対応している • 必要に応じてカスタマイズできる カスタマイズ • accessibilityLabel ‣ 読み上げる内容をカスタム指定する • accessibilityTraits ‣ UI 要素の種類や性質を指定する セルの VoiceOver 対応 4 / 21

セルはちょっと注意が必要 CollectionView や TableView の Cell は、普通の UI 要素とは 扱いが少し異なる。 • Cell 自身は VoiceOver 対応ではない • VoiceOver では、Cell の中の UI 要素が読み上げられる • これにより、デフォルトでも読み上げはされる セルの VoiceOver 対応 5 / 21

デフォルトの状態で発生する問題 Cell はデフォルトでも読み上げはされるが、問題もある。 • Cell の中の UI 要素がそれぞれ読み上げ られると、次の Cell に移動しづらい ‣ スワイプで UI 要素をひとつずつ移動し てしまう • 理想は、Cell 全体を 1 つの UI 要素とし て読み上げてほしい セルの VoiceOver 対応 6 / 21

セルをひとつの要素とするための対応 Cell の isAccessibilityElement を true にすればよい。 cell.isAccessibilityElement = true cell.accessibilityLabel = "読み上げ内容" • Cell 自身の情報を読み上げるようになる ‣ Cell の中の UI 要素は読み上げられなくなる • 読み上げ内容は自前で指定する必要がある ‣ accessibilityLabel を使う セルの VoiceOver 対応 7 / 21

トレイトも指定する accessibilityTraits を指定すると、より良くなる。 cell.isAccessibilityElement = true cell.accessibilityLabel = "読み上げ内容" cell.accessibilityTraits = .button • Cell がタップできる場合には .button を指定しておくと良い ‣「ボタン」と読み上げられる ‣ VoiceOver 利用者に、タップできることを伝える セルの VoiceOver 対応 8 / 21

セルの選択状態 Cell の選択状態も伝えたい。実は何もしなくても対応される。 • CollectionView や TableView は選択状態を管理している ‣ Cell の isSelected が自動制御される ‣ そのため、何もしなくても選択状態を読み上げてくれる もし選択状態の管理が標準の方法でないなら、自前で指定する。 cell.accessibilityTraits.insert(.selected) cell.accessibilityTraits.remove(.selected) セルの VoiceOver 対応 9 / 21

Custom Content API

セルの内容をどこまで読み上げるか Cell の読み上げ内容は accessibilityLabel で指定するが、情 報量が多い場合にどうするか。 ひとつの Cell の読み上げが終わるまでに時間がかかってしまう。 ただ、それも悪いわけではない。 • Cell 単位でスワイプ移動できるようになっていれば、途中で中断 して次の Cell に移動できる むしろ、読み上げの情報量を変に減らすのも良くない。 • VoiceOver 利用者が受け取れる情報量が減ってしまう Custom Content API 11 / 21

Custom Content API を使う すべてを accessibilityLabel に指定するかわりに、 Accessibility Custom Content API（AXCustomContent） を使うという方法がある。 • AXCustomContentProvider プロトコル ‣ accessibilityCustomContent プロパティを実装する – [AXCustomContent] を返す accessibilityCustomContent の内容は、「その他のコンテン ツ」として読み上げられる。 Custom Content API 12 / 21

VoiceOver ローター 「その他のコンテンツ」は VoiceOver ローターで選択できる。 （WWDC21「データリッチな App における VoiceOver 体験の最適化」より） Custom Content API 13 / 21

Custom Content の指定でどうなるか • Cell の読み上げ ‣ accessibilityLabel の内容が読み上げられる • VoiceOver ローターで「その他のコンテンツ」を選択 ‣ accessibilityCustomContent の内容が読み上げられる ‣ 複数ある場合は、スワイプで読み上げる内容を切り替えられる Custom Content API 14 / 21

Custom Content の重要度の指定 また、AXCustomContent で importance を指定できる。 importance = .high にすると挙動が変わる。 • Cell の読み上げ ‣ accessibilityLabel の内容が読み上げられる ‣ 続けて accessibilityCustomContent で .high の内容 も読み上げられる Custom Content API 15 / 21

セルの読み上げの改善 accessibilityLabel と accessibilityCustomContent を組み合わせることで、読み上げの内容を調整できる。 情報量が多い Cell について、 • Cell の読み上げでは重要な情報を提供する • VoiceOver ローターで「その他のコンテンツ」を選択すると詳細 な情報を提供する これによって、Cell の読み上げの量を調整しつつ、利用者が受け取 れる情報量も減らさないようにできる。 Custom Content API 16 / 21

見出しの活用

複数のセクションがある場合 CollectionView や TableView は、複数のセクションに分かれて いることがある。 その場合、セクションヘッダーの VoiceOver 対応をしておくと良 い。 見出しの活用 18 / 21

セクションヘッダーの VoiceOver 対応 Cell と同様の対応をする。 header.isAccessibilityElement = true header.accessibilityLabel = "読み上げ内容" header.accessibilityTraits = .header • accessibilityTraits は .header を指定する ‣「見出し」と読み上げられる ‣ VoiceOver ローターで「見出し」を選択すると、header 要素 だけを読み上げ・移動できる 見出しの活用 19 / 21

まとめ

テーブルのセルの VoiceOver 対応 • Cell の isAccessibilityElement を true にして、 accessibilityLabel を指定する • AXCustomContent を使うと、Cell の読み上げを調整できる • セクションヘッダーも VoiceOver 対応をする まとめ 21 / 21