完全に理解する Storyboard & UIKit (Day 28): Accessibility（VoiceOver対応など）のUI設計

美しいデザインや滑らかなアニメーションは素晴らしいですが、それらが見えづらい、あるいは全く見えないユーザーにとってアプリはどう映るでしょうか？ Appleは全ての人に開かれたデバイスを作ることを理念としており、iOSには非常に強力なアクセシビリティ支援機能（特に画面読み上げの VoiceOver）が標準搭載されています。

UIKitで構築したUIに対して、ほんの少しの追加設定を行うだけで、何百万人もの視覚障害を持つ人々があなたのアプリを使えるようになります。

1. UIKitとVoiceOverの基本原理

iPhoneの設定から「VoiceOver」をオンにすると、画面を一度タップした要素の「役割」と「内容」をSiriが音声で読み上げ、ダブルタップで実行されるようになります。

UIKitの標準コンポーネント（UILabel, UIButtonなど）は、デフォルトでVoiceOverに対応しています。 例えば、UILabel に「設定」と書かれていれば「設定」、UIButton であれば「設定、ボタン」と自動的に読み上げてくれます。

しかし、開発者が手を加えないと「読み上げられない」、あるいは「不親切な読み上げ方になる」ケースが存在します。それを解決するのが UIAccessibility プロトコルです。

2. アイコンや画像に適切な読み上げラベルを設定する

最もよくある問題は、「文字情報を持たないImageViewやアイコンのみのボタン」です。 例えば、虫眼鏡のアイコンを置いた検索ボタンは、画面が見える人には伝わりますが、VoiceOverは「ボタン」としか読み上げず、役割が全く伝わりません。

Storyboardでの設定

1. 対象のUI部品（例: 虫眼鏡ボタン）を選択します。
2. Identity Inspector (⌥⌘3) の下のほうにある Accessibility セクションを開きます。
3. Accessibility: Enabled にチェックを入れます。
4. Label に、音声で読み上げさせたい内容を分かりやすい単語で入力します（例: 検索）。
5. Traits（特性）で、それが何であるかをチェックします。ボタンなら Button です。Imageの場合は Image です。

コードでの設定

swift
// 画像（UIImageView）をVoiceOverの対象にする
profileImageView.isAccessibilityElement = true

// 読み上げるテキストを設定する
profileImageView.accessibilityLabel = "ユーザーのプロフィール画像"

// 虫眼鏡ボタンの読み上げテキストを設定
searchButton.accessibilityLabel = "検索"

// 任意: より詳細な説明（ヒント）を加える（長押し後などに読み上げられる）
searchButton.accessibilityHint = "タップすると全ユーザーを検索できる画面に移動します"

これで、虫眼鏡ボタンをタップするとVoiceOverは「検索、ボタン」と正しく発話するようになります。

3. 複雑なカスタムビューの要素をグループ化する

Day 16などで作成した「ユーザーアイコン＋名前＋ツイート本文」が載ったカスタムセル（UITableViewCell）を考えてください。 デフォルトのままだと、ユーザーは「アイコンをタップして聞く」→「スワイプ」→「名前を聞く」→「スワイプ」→「本文を聞く」という、非常に煩わしい操作を強要されます。

これを解決するために、「セル全体を一つのAccessibility要素としてまとめ、連結した文章を読み上げる」配慮が必要です。

swift
// CustomTweetCell.swift の awakeFromNib 等に記述
override func awakeFromNib() {
    super.awakeFromNib()

    // セル自体を一つのAccessibility要素として扱う
    self.isAccessibilityElement = true

    // 中に入っている個別の要素（Labelなど）はVoiceOverのフォーカスを外す
    userImageView.isAccessibilityElement = false
    userNameLabel.isAccessibilityElement = false
    tweetContentLabel.isAccessibilityElement = false
}

// データがセットされた時に、読み上げ用の連結文章を生成してセットする
func configure(tweet: Tweet) {
    userNameLabel.text = tweet.userName
    tweetContentLabel.text = tweet.content

    // 💡 VoiceOver用に、人間が聞いて自然な文章を組み立てる
    self.accessibilityLabel = "\(tweet.userName)さんの投稿: \(tweet.content)"
    self.accessibilityTraits = .button // セルはタップできるのでボタン特性を持たせる
}

これで、セルを1回触るだけで「S7r1n9yさんの投稿: こんにちは世界、ボタン」と一気に要約して読み上げてくれる、極めて使いやすいUIになります。

📝 今日のまとめ

• アプリをより多くの人に届けるため、VoiceOverへの配慮（Accessibility設計）はプロとして当然の責務 である。
• 文字のないアイコン画像やボタンには、必ず accessibilityLabel（「検索」などの単語）を設定する。
• さらに詳しい説明が必要な場合は accessibilityHint を付与する。
• 複数の情報がまとまったセルやViewは、全体を一つの isAccessibilityElement = true とし、個別の要素を束ねた自然な文章を accessibilityLabel に設定してグループ化することで、UXが劇的に向上する。

アプリの成熟度が最高レベルに達しました。 明日の Day 29 では、「UIKitで作られた既存アプリ」に対して、Appleの最新UIフレームワークである「SwiftUI」の画面を部分的に埋め込んで共存させる、今後の実務で100%求められる橋渡し技術について解説します。