AppのVoiceOverエクスペリエンスの強化

VoiceOverは、ユーザーが画面を見ずに操作できるようサポートする重要な機能です。例えば、この記事も、皆さんはテキストを視覚的に読んでいると思いますが、VoiceOverを使っているデベロッパの場合は、この段落(およびその後に続く記事)や、ナビゲートに必要な重要な要素の説明を音声で聞くことになります。また、この記事を「Apple Developer」Appで開いた場合は、App内のナビゲーション要素も読み上げられます。

あなた自身がVoiceOverを使用するかどうかにかかわらず、卓越したエクスペリエンスをデザインするには、VoiceOverユーザーの観点を取り入れる必要があります。ここでは、その方法をご紹介します。

App内のアクセシビリティ要素をマスターする

iOS、iPadOS、watchOS、tvOSでVoiceOverを有効にすると、画面上のすべてのラベル付き要素の説明が開始されます。何を読み上げるかを判断するため、VoiceOverはアクセシビリティ要素(ビュー内にある個別またはグループ化された視覚的要素)を探し、ユーザーがその要素を操作できるかどうかをチェックします。VoiceOverが要素を説明する際、読み上げているコンテンツの周りに黒い長方形の枠が付けられ、強調表示されます。


ヒント:自分のデバイスでVoiceOverを使ってみましょう


Xcodeには、Appのアクセシビリティをテストするためのツールがいくつか用意されていますが、お持ちのiPhone、iPad、Mac、Apple Watch、Apple TVで実際にテストしてみることで、VoiceOverがどのような機能なのか、様々なAppがVoiceOverをどのように実装しているかを学ぶことができます。VoiceOverは「設定」AppまたはMacの「システム環境設定」で有効にできます。また、この機能に簡単にアクセスするには、ハードウェアベースのアクセシビリティショートカットを有効にすることもできます。

VoiceOverでは、デバイスのナビゲーションをサポートする特定のMulti-Touchジェスチャーおよびタップを追加することもできます。画面上の任意の場所で右にスワイプすると、ビューの次の要素に移動し、左にスワイプすると、前の要素に戻ります。新しい要素に移動するたびに、VoiceOverがアクセシビリティラベルや値などの詳細を読み上げ、その要素にヒントや特性が含まれる場合はそれも読み上げます。

別の方法として、視覚的要素を直接タップしてそこに移動することもできます。それがアクセシビリティ要素の境界内にある場合、VoiceOverはその要素にフォーカスします。境界外の場合、VoiceOverが「ボン」という音で知らせます。

標準的なUIKitのコントロールはすべて、デフォルトでアクセシビリティ要素になっています。カスタムコントロールまたはビューをアクセシビリティ要素としてフラグ設定するには、「isAccessibilityElement」を使用します。

```swift
var isAccessibilityElement: Bool { get set }
```

アクセシビリティ要素をグループ化して整理する

スワイプでナビゲートする場合、VoiceOverは画面に表示されている順番通りに各要素に移動します。とはいえ、それが必ずしも情報を把握するうえで最も効率的な方法であるとは限りません。Appにアクセシビリティ要素が多すぎると、それを理解するのに非常に時間がかかってしまうことがあります。その場合は、アクセシビリティ要素をグループ化し、単純化された階層を作成することをお勧めします。

アクセシビリティ要素をグループ化すると、VoiceOverがそれをまとめて説明するため、App内をすばやくナビゲートできるようになります。例えば、「ヘルスケア」Appの「心拍数」というタイトル、心拍数の値、最後に計った時刻のように、タイトル、テキスト、タイムスタンプラベルを含むビューをグループ化することができます。

「ヘルスケア」Appの「概要」ビュー内の要素をグループ化することで、VoiceOverユーザーに効率的なエクスペリエンスを提供できます。

上記の方法は、VoiceOverを使用するユーザーに、視覚的インターフェイスで提供されているコンテキストを伝えるのにも役立ちます。要素をグループ化し、まとめて読み上げることによって、時刻とテキストがそのタイトルに関連するものであり、3つの無関係なアイテムではないことを伝えることができます。

カスタムアクションの追加

アクセシビリティ要素にカスタムアクションを割り当てると、追加機能を提供できます。例えば、VoiceOverを有効にせずにメールを使用している場合、受信トレイ内のメッセージをタップすると読むことができ、それぞれのメッセージを左または右にスワイプすると、メッセージの削除、フラグ設定、移動など、ほかの機能を利用することができます。カスタムアクションを使用することで、この機能を別の形でVoiceOverユーザーに提供することができます。つまり、VoiceOverがメッセージ要素にフォーカスした時に「利用可能なアクション:上または下にスワイプしてカスタムアクションを選択」というヒントを読み上げます。利用したいアクションに移動したところでダブルタップすれば実行することができます。


豆知識:App内で、テーブルビューの前方または後方スワイプジェスチャーを実装すると、プロジェクト内のこれらのボタンに対してVoiceOverアクションが自動的に設定されます。


カスタムアクションは、グループ化された要素と組み合わせると非常に効果的で、ナビゲーション可能な階層を簡素化できます。例えば、アクセシビリティ要素のビューがあり、そこにサブビューとして複数のボタンが含まれている場合、必ずしもVoiceOverでそれらのボタンにナビゲートできるとは限りません。だからと言って、これを小さな要素に分割し、ボタンそれぞれにフォーカスできるようにしてしまうと、かえってわかりにくくなります。

Appleでは、カスタムアクションを使用して、ボタンアクションへのアクセス方法を提供することを強く推奨します。この方法により、要素のまとまりを維持したまま、VoiceOverユーザーにフルコントロールを提供することができます。要素を注意深くグループ化してカスタムアクションを追加すると、全体的なナビゲーションエクスペリエンスが向上し、VoiceOverに依存するユーザーにAppをもっと楽しんでもらえるようになります。

アクセシビリティ要素に「UIAccessibilityCustomAction」を設定するには、「accessibilityCustomActions」を使用します。

```swift
var accessibilityCustomActions: [UIAccessibilityCustomAction]? { get set }
```

レイアウト変更のフラグ設定

Appは、アクションやイベントの結果を示すために、レイアウトを視覚的に変更する場合があります。例えば、「ショートカット」Appで「+」ボタンをタップすると、ユーザーがショートカットを作成するためのコンポーネントが表示されます。VoiceOverユーザーには、「画面が変更されました」または「レイアウトが変更されました」という通知を使用して、新しい要素にフォーカスを誘導することができます。

「ショートカット」Appは、ユーザーが「+」ボタンを選択した後に「画面が変更されました」という通知を再生します。

「レイアウトが変更されました」という通知は、インターフェイスに大きな変更があった場合にのみ使用することをお勧めします。頻繁に用いるとユーザーを混乱させ、App内のコンテキストが失われるおそれがあります。

アクセシビリティ通知を表示するには、「UIAccessibility」で「post(notification:argument:)」を使用します。

```swift
static func post(notification: UIAccessibility.Notification, 
        argument: Any?)
```

次のステップ

このような改良をAppに施すと、VoiceOverのサポートが向上するだけでなく、スイッチコントロールやフルキーボードアクセスなど、ほかの支援技術の基盤を整えることにもなります。VoiceOverを探求し、Appのアクセシビリティを高めていきましょう。すべての人に力を与えることができた時、テクノロジーは最大の力を発揮するのです。

Resources