データリッチなAppにおけるVoiceOver体験の最適化

データリッチなAppにおけるVoiceOver体験の最適化

Accessibility Custom Content APIを使用して複雑なデータをVoiceOverで表示する方法を確認しましょう。アクセシビリティ情報を簡潔な形で、必要なときにだけ提供する方法を紹介します。AXCustomContentを統合して、VoiceOverの有効化を希望するユーザが、データリッチなAppを効率的にナビゲーションできるようにする方法を紹介します。このセッションを最大限活かしていただくためには、一般的なアクセシビリティの原則と、SwiftとSwiftUIで使用できるVoiceOverアクセシビリティAPIを理解していることが推奨されます。

リソース
- Accessibility for Developers
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- アクセシブルな空間体験の実現
WWDC21
- Thursday@WWDC21
ダウンロード

こんにちは Nandini Sundara Ramanです今日は AXCustomContent APIを使いデータ量の多いAppで VoiceOverの体験をカスタマイズする方法をご紹介します VoiceOverはApple のスクリーンリーダーで画面が見えない場合であっても Appleのデバイスで操作することができます VoiceOverは画面をタッチすることで指の下にある項目が読み上げられますそしてスワイプなどの簡単なジェスチャーでインターフェイスを操作しますそこで私が作ったワンワンショップというシンプルなAppを紹介しますここではそれぞれの犬の詳細な説明がテーブルビューで表示されていますそしてVoiceOverユーザーはリストをスワイプして犬のショップを探索することができるのですそれではこのAppの VoiceOver体験を簡単にご紹介しますベイリービーグル犬楽天的優れた狩猟犬であり忠実な友達人気度１位年齢３歳体重 25ポンド体高 14インチウィンストン　パグ犬愛情深く知的愛情深い忠実で魅力的遊び心があり茶目っ気がある人気度２位年齢３歳体重 14ポンド体高 10インチおおこれはVoiceOverがそれぞれの犬を読み取った大量のデータでしたここでは左上から右下に向かってセルのすべての内容が読み上げられます VoiceOverでインターフェイスを操作するときデータが多すぎるとユーザーの認知負荷が高まり Appが操作しづらくなりますまたデータが少なすぎると Appが満足のいかないものになってしまいます両極端では困るのでここでバランスを取るのは難しいかもしれませんなぜならユーザーによって Appを使用する際に必要とする情報が異なる可能性があるからですこのバランスを実現するために Accessibility Custom Content APIを用意しました Accessibilityフレームワーク内のこのクラスとプロトコルはすべてのプラットフォームで利用できます
このAPIは複雑なデータをVoiceOverで表現する際の一般的な問題を解決し入手可能な情報を欲しい情報だけユーザーに提供します
このAPIを使えばユーザーが必要なときに必要なコンテンツだけを提示させる便利な技術を利用することができますではデータが豊富なAppで AXCustomContent API がどのように機能するかを見てみましょうそのためにまず私のAppがどのように見えるかをお見せしたいと思います AXCustomContent API が実装されていますベイリービーグル犬　他詳細ありはい！お聞きの通りです VoiceOverはこのセルで利用できるコンテンツが増えたことを伝えましたこれはMore Content ローターを使ってこのセルのさらなる情報にアクセスできることを意味しています VoiceoverローターはユーザーがAppを迅速かつ効率的に操作できるようにしますさまざまな組み込まれた用途があります VoiceOverの言語設定や発話速度の調整などまた Webページのリンク間の移動などもここでは More Content ローターを使うと VoiceOverのカーソルの下にある追加情報の要素をいろいろ見て回ることができます iOSデバイスで VoiceOverを使用して MoreContentローターにアクセスするにはダイヤルを回すように２本の指を画面に当て目的のローターオプションに到達するまで回してくださいこれが MoreContentローターです詳細そして下または上にスワイプすると VoiceOverカーソルの下の次または前の追加コンテンツに移動しますさてセルをスワイプしていくと VoiceOverはさらに追加情報を提示します年齢３歳人気度１位体重 25ポンド体高 14インチ楽天的優秀な狩猟犬忠実な友達説明同じAppのmacOS版に AXCustomContent API を実装した場合の動作を見てみましょうベイリービーグル犬　他詳細あり VoiceOverのカーソルがより詳しい情報を持つ要素の上に来たら VO + コマンド + / でローターを起動できそのカスタムコンテンツを表示させます
その他のコンテンツメニュー　５項目年齢３歳人気度１位体重 25ポンド体高 14インチ説明楽天的優秀な狩猟犬そして忠実な友達 iOSでは VoiceOver要素が追加情報があるときに通知を受け取るには VoiceOverの環境設定で Verbosityを開きます
Verbosityで More Contentを選択します
そしてヒントを話すか音を再生するかを選択しますまたレベルを変更すると追加情報が配信されたときに通知されます同様に macOSでも Verbosityを設定して追加情報が配信されたときの通知を受け取れます VoiceOverのユーティリティ環境設定でこれができますではワンワンショップApp をAXCustom Content API に対応させる方法をご紹介しますここでは犬のTableViewCellに犬の写真に対する変数を設定しています名前犬種説明人気度年齢体重体高
AXCustomContent API を操作するためにまず最初にAccessibility フレームワークをインポート
次に追加して実装する必要があります TableViewCellのAXCustom ContentProviderプロトコルです
プロトコルメソッドを実装する前にアクセシビリティラベルプロパティを無効にしましょうそして犬の名前と犬種だけを返すようにしましたここではそれが最も関連性の高い詳細情報だからです
次に AXCustomContent Providerプロトコルメソッド AXCustomContent オブジェクトの配列を持つ accessibilityCustomContent を実装しますここで AXCustomContent オブジェクトはローカライズされた文字列のキーと値のペアです
ここでは「Description」という文字列をラベルとして持つ説明用のAXCustomContent オブジェクトを作成しますそしてDescriptionのテキスト値を AXCustomContent変数の値として作成しますまた人気年齢体重体高などの AXCustomContent変数も作成しますそしてユーザーがVoiceOver に求める順序でこれら AXCustomContentの多くの情報を提示しますそれでは AXCustomContentProvider プロトコルをTableViewCell に実装したあと VoiceOverの操作性がどのように改善されたかを見てみましょうベイリービーグル犬　他詳細あり人気度１位年齢 3歳体重 25ポンド体高 14インチ楽天的優秀な狩猟犬そして忠実な友達説明このリストを閲覧しようとしているユーザーにとって犬の年齢はその犬を飼いたいと思ったときに重要な情報になるかもしれません現在その情報はMoreContent ローター内にあります AXCustomContent変数にはこの問題を解決するための「importance」というプロパティがありますこのプロパティの値を「高」に設定すれば VoiceOverが要素に焦点を当てたときに常にコンテンツが表示されるようになります追加の要素を何度も見ることはありません VoiceOverで犬の年齢が常に提示されるようにカスタムコンテンツの年齢の項目で importanceプロパティを「高」に設定します
今の設定で犬の年齢が常にVoiceOverによって読み上げられていることがわかりますベイリービーグル犬　年齢 3年他詳細ありこの年齢情報は More Content ローターでもご覧いただけます今年の新機能として SwiftUIでも同じ機能をサポートしています私たちはアクセシビリティの CustomContentの変更を設定することができるのです SwiftUIのカスタムビューではラベルと値の両方の変数に変更可能なテキストを伝え必要に応じて importanceプロパティを設定しますこの方法はカスタムコンテンツの値が一箇所に追加され後の階層では操作されないような場合に有効ですこれをDogCell Viewに実装するにはまず説明文にアクセシビリティの隠し属性を設定しますまた犬の人気度年齢体重身長を含むHStack上でこれらが自動的に DogCellのアクセシビリティラベルに検出されないようにします次にアクセシビリティの CustomContent の属性を設定し importanceを「high」で設定している年齢人気度体重体高と説明を設定します custom contentの値を Swift UIの階層内の複数の場所で操作したい場合 AccessibilityCustomContentKey のextensionを作成することでキーの再定義を避けることができますこれで変更可能なテキスト文字列を再作成することなくそのキーの値を更新または削除できるようになります DogCellの例では AccessibilityCustom ContentKeyの extensionを作成しカスタムキーの１つとして年齢を追加しています DogCell本体の VStackには文字列キーを使わずに AccessibilityCustom ContentKey「年齢」で accessibilityCustom Content属性を追加しました最後にデータ量の多い AppのVoiceOver体験をより快適にするために試してもらいたいことがありますまず最初に視覚的にデータの多い部分を特定します VoiceOverをオンにして VoiceOverカーソルの下の情報が細かすぎるかどうかを判断してください細か過ぎる場合は AXCustomContentProviderのプロトコルを実装します補足情報をaccessibility CustomContentに移動することを検討してください常にユーザーに提示したい情報は importanceプロパティを「high」に設定します VoiceOverユーザーのために希望する分野の情報を利用できるオプションを用意しました必要なときだけに情報が表示されるようにすれば Appのアクセシビリティが大幅に向上しますそこで今回 VoiceOver ユーザーの皆様により良い体験をしていただくためにどのように組み込むことができるかを見てみることを強くお勧めします AXCustomContent APIsをデータが豊富なAppに！皆さんこのセッションをご覧いただき本当にありがとうございましたまたお目にかかりましょう！ [パーカッシブな音楽]

5:03 - Accessibility Custom Content API Sample

import UIKit
import Accessibility

class DogTableViewCell: UITableViewCell, AXCustomContentProvider {

    var coverImage: UIImageView!
    var name: UILabel!
    var type: UILabel!
    var desc: UILabel!
    var popularity: UILabel!
    var age: UILabel!
    var weight: UILabel!
    var height: UILabel!
    
    override var accessibilityLabel: String? {
        get {
            guard let nameLabel = name.text else { return nil }
            guard let typeLabel = type.text else { return nil }
            return nameLabel + ", " + typeLabel
        }
        set { }
    }

    var accessibilityCustomContent: [AXCustomContent]! {
        get {
            let notes = AXCustomContent(label: "Description", value: desc.text!)
            let popularity = AXCustomContent(label: "Popularity", value: popularity.text!)
            let age = AXCustomContent(label: "Age", value: age.text!)
            let weight = AXCustomContent(label: "Weight", value: weight.text!)
            let height = AXCustomContent(label: "Height" , value: height.text!)
            return [age, popularity, weight, height, notes]
        }
        set { }
    }
}

6:49 - Accessibility Custom Content API Sample with importance property

import UIKit
import Accessibility

class DogTableViewCell: UITableViewCell, AXCustomContentProvider {

    var coverImage: UIImageView!
    var name: UILabel!
    var type: UILabel!
    var desc: UILabel!
    var popularity: UILabel!
    var age: UILabel!
    var weight: UILabel!
    var height: UILabel!
    
    override var accessibilityLabel: String? {
        get {
            guard let nameLabel = name.text else { return nil }
            guard let typeLabel = type.text else { return nil }
            return nameLabel + ", " + typeLabel
        }
        set { }
    }

    var accessibilityCustomContent: [AXCustomContent]! {
        get {
            let notes = AXCustomContent(label: "Description", value: desc.text!)
            let popularity = AXCustomContent(label: "Popularity", value: popularity.text!)
            let age = AXCustomContent(label: "Age", value: age.text!)
            age.importance = .high
            let weight = AXCustomContent(label: "Weight", value: weight.text!)
            let height = AXCustomContent(label: "Height" , value: height.text!)
            return [popularity, age, weight, height, notes]
        }
        set { }
    }
}

7:47 - Accessibility Custom Content API Basic Sample in SwiftUI

struct SampleView: View {
    var body: some View {
        VStack {
            Text(name)
            Text(description)
        }
        .accessibilityElement(children: .combine)
        .accessibilityCustomContent("Description", description, importance: .high)
    }
}

8:10 - Accessibility Custom Content API Sample in Swift UI

import SwiftUI
import Accessibility

struct DogCell: View {
    var dog: Dog
    var body: some View {
        VStack {
            HStack {
                dog.image
                    .resizable()
                VStack(alignment: .leading) {
                    Text(dog.name)
                        .font(.title)
                    Spacer()
                    Text(dog.type)
                        .font(.body)
                    Spacer()
                    Text(dog.description)
                        .fixedSize(horizontal: false, vertical: true)
                        .font(.subheadline)
                        .foregroundColor(Color(uiColor: UIColor.brown))
                        .accessibilityHidden(true)
                }
                Spacer()
            }
            .padding(.horizontal)
            HStack(alignment: .top) {
                VStack(alignment: .leading) {
                    HStack {
                        Text(dog.popularity)
                        Spacer()
                        Text(dog.age)
                        Spacer()
                        Text(dog.weight)
                        Spacer()
                        Text(dog.height)
                    }
                    .foregroundColor(Color(uiColor: UIColor.darkGray))
                    .accessibilityHidden(true)
                }
                Spacer()
            }
            .padding(.horizontal)
            Divider()
        }
        .accessibilityElement(children: .combine)
        .accessibilityCustomContent("Age", dog.age, importance: .high)
        .accessibilityCustomContent("Popularity", dog.popularity)
        .accessibilityCustomContent("Weight", dog.weight)
        .accessibilityCustomContent("Height", dog.height)
        .accessibilityCustomContent("Description", dog.description)
    }
}

8:57 - Accessibility Custom Content API Sample with AccessibilityCustomContentKey in SwiftUI

import SwiftUI
import Accessibility

extension AccessibilityCustomContentKey {
    static var age: AccessibilityCustomContentKey {
        AccessibilityCustomContentKey("Age")
    }
}

struct DogCell: View {
    var dog: Dog
    var body: some View {
        VStack {
            HStack {
                dog.image
                    .resizable()
                VStack(alignment: .leading) {
                    Text(dog.name)
                        .font(.title)
                    Spacer()
                    Text(dog.type)
                        .font(.body)
                    Spacer()
                    Text(dog.description)
                        .fixedSize(horizontal: false, vertical: true)
                        .font(.subheadline)
                        .foregroundColor(Color(uiColor: UIColor.brown))
                        .accessibilityHidden(true)
                }
                Spacer()
            }
            .padding(.horizontal)
            HStack(alignment: .top) {
                VStack(alignment: .leading) {
                    HStack {
                        Text(dog.popularity)
                        Spacer()
                        Text(dog.age)
                        Spacer()
                        Text(dog.weight)
                        Spacer()
                        Text(dog.height)
                    }
                    .foregroundColor(Color(uiColor: UIColor.darkGray))
                    .accessibilityHidden(true)
                }
                Spacer()
            }
            .padding(.horizontal)
            Divider()
        }
        .accessibilityElement(children: .combine)
        .accessibilityCustomContent(.age, dog.age, importance: .high)
        .accessibilityCustomContent("Popularity", dog.popularity)
        .accessibilityCustomContent("Weight", dog.weight)
        .accessibilityCustomContent("Height", dog.height)
        .accessibilityCustomContent("Description", dog.description)
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC21