カスタムローターを使ったVoiceOverの効率性

カスタムローターを統合し、あなたのApp内での複雑な状況でユーザーがVoiceOverを使いナビゲーションを受けられるようになる方法をお見せします。複雑に入り組んだインターフェースであっても、カスタムローターがあればユーザーは探りながら進むことができ、VoiceOver頼りの人に対してもローターでナビゲーションを改善できます。このセッションを最大限に活用するためには、アクセシビリティとiOS、iPadOSのVoiceOverアクセシビリティAPIの全般的な理念に親しんでおくことが望ましいです。概略については、"Making Apps More Accessible with Custom Actions"をご覧ください。

リソース

関連ビデオ

こんにちは WWDCへようこそ

アレックス･ヴァルツァックです “カスタムローターを使った VoiceOverの効率性” VoiceOverにカスタムローターを追加する方法を紹介します VoiceOverは画面読み上げ機能です画面が見えない人のデバイス操作に役立ちます画面をタップして VoiceOverを起動すると簡単なジェスチャで UIをナビゲートします

画面が見えない人がローター使って操作する方法をいくつか紹介しますダイヤルを回すように画面上で指を回転するとローターが起動します上下にスワイプすることで前の項目や次の項目に移動できますカスタムローターをアプリケーションに追加すればユーザー体験が変わります複雑な操作法が簡略化されアプリケーション内の検索も上下にフリックするように簡単ですいくつかの例を紹介します複雑な操作をカスタムローターで簡単にしますまずはカスタムローターなしのユーザー体験を見てください地図アプリケーションで現在地とApple Store 近くの公園を表示します VoiceOverを起動すると UIのレイアウト方向に従ってアプリケーションのビューが動くのが分かりますアップルベイストリートサンフランシスコ湾ベイブリッジアルカトラズ島

カスタムローターなしのVoiceOverでアプリケーションを使った例ですご覧くださいカーソルがApple Storeと公園の間だけでなく橋や他の地点の間も動きます VoiceOverユーザーはすべての項目を順番に移動しなくてはなりません一方画面を見ればアイコンとその色から特定の項目に目が行きます VoiceOverユーザーが心地よくアプリケーションを使うには？まずインターフェース上で視覚的に注意を引く項目を把握します今回はApple Storeと公園ですね

次にカテゴリー別にグループ分けしますカテゴリー内で項目を探索するカスタムローターを作りますやってみましょう Apple Storeと公園のローターを１つずつ実装しますすると各ローターの項目をユーザーからの距離で並べ替え

その距離をアクセシビリティに含めることができますこれで一番近くのApple Storeがすぐに見つかります

一番近くの公園も同様です

画面を見て自分に最も近い場所に目が行くのと同じですね

２つのローターを実装した例をご覧くださいまずは完成後のApple Storeローターです Apple Stores

Apple チェスナットストリート 0.9マイル Apple ユニオンスクエア 1.8マイル Apple ストーンズタウン 4.6マイル次に公園のローターです公園

アラモ･スクエア 0.8マイルコロナ･ハイツ･パーク 1.5マイルヒッピー･ヒル 1.5マイルユーザーは各カスタムローターの並べ替えた場所を移動するので Apple Storeでも公園でも一番近い場所がすぐに見つかりますカスタムローターはすべてのユーザーに同様の使いやすさを提供します特にこの地図のように複雑な操作に有効ですアプリケーションにローター追加する方法は？ accessibilityCustomRotorプロパティでカスタムローターを探します

今回はローターが２つ必要です Apple Store用と公園用に２つのカスタムローターを設定します

各ローターに同じ地図の注釈をフィルタリングするので２のローターに１つのメソッドを実装するだけです

新たなUIAccessibilityCustomRotorを返すメソッドを作成しますカスタムローターは最小限の追加作業で実装できますローカライズした名前で UIAccessibilityCustomRotorを初期化しクロージャで基本ロジックを実行するとVoiceOverが UIAccessibilityCustomRotorと返します

ブロック引数から現在のローターの項目を抽出し移動可能なリストを用意します searchDirectionは上下のフリップで前に行くか次に行くかを知らせますこの情報を使って可能性リストのインデックスを増減できます

最初か最後にいることをユーザーに示すため nil値に戻し VoiceOverは目標物に焦点を当てたままですそれ以外は前後の項目を targetElementとして新たなUIAccessibilityCustomRotorの結果に戻して終了します開発者としてカスタムローターAPIを活用するために覚えるべきことはクロージャを実装しカスタムローターを accessibilityCustomRotorsに追加することですカスタムローターはアプリケーション内の要素グループに作用しますアクセシビリティの改善法をもっと学ぶならカスタムアクションの相互作用についてこのトークをチェックしてください地図上で関連する要素を見つける機能は既に説明しました次はカスタムローターをテキストで使う方法です

場所をタップしてパンフレットを表示します今回はゴールデンゲートパークのパンフレットですやることがいっぱいですテキストを自動で表示するラインローターで１文ずつ見ていきますラインゴールデンゲートパーク訪問計画オランダ風車３月に満開のチューリップを見に行く公園の東端にある背の高い建物イースト･メドーピクニック場はメンテナンスで閉鎖中ペット連れの家族に最適な場所一部のコンテンツは聞けましたが最初の警報までにかかった時間は？イースト･メドーの警報を聞くまでにその前のすべてを聞く必要がありましたまだ聞いてない警報もありますつまりすべての警報を聞くにはすべての情報を慎重に聞く必要があります実際はカスタムローターを実装して警報のみを表示することができるので警報のアイコンに気付く速さで重要な情報が聞けます警報ローターを見てみましょう警報イースト･メドーピクニック場はメンテナンスで閉鎖中オーク･ウッドランド山道ぬかるんだ状態オーシャン･ビーチ濃霧と強風に注意予想どおり警報ローターは警報のみを表示するので公園に行く計画を効率よく立てられます

textViewには customRotorが for alertsとして１つだけあります textViewの accessibilityCustomRotorsに含むローターは１つだけです新しいローターを返すメソッドを実装します公園のようなロケーションのタイプの代わりにローターに置きたいテキスト属性のタイプで渡しますこの場合それは警報属性ですこのメソッドの構文は地図の例と似ていますここでもローカライズした名前で UIAccessibilityCustomRotorを初期化し VoiceOverの移動先の項目を返すクロージャを実装します

すべての警報は textViewの属性付きテキストで見つけることができますテキスト内のローター項目の範囲から警報の範囲を特定しますがユーザーの進みたい方向で異なりますちょうどこの箇所ですカスタム警報属性を検索するテキストの範囲とユーザーのジェスチャに基づいて検索する方向を決めます警報の一致で停止できると分かりますその時点で UIAccessibilityCustomRotorの結果を返し新たなtargetRangeとして渡しますまたはtargetRangeを nil値にして最初か最後にいることを示します注意すべきは targetRangeは UITextRangeであり targetElementは UITextInputプロトコルに適合することです取り込むにはかなりの情報量ですがアプリケーションにカスタムローターを実装するとローターの初期化に使ったブロックから前後のカスタムローターの結果が得られます

accessibilityCustomRotorsを使えばフィルタリングして特定の項目に絞れます前半はカスタムローターを使った地図アプリケーションの改善法でした次にテキストベースのコンテンツとの関わり方と強化法を説明しましたテキストコンテンツのアクセシビリティをさらに学ぶならこのセッションをご覧ください

カスタムローターや VoiceOverについて学んだ知識でアプリケーションのアクセシビリティを検証してください詳細はアプリケーションのテストに関する過去のセッションをご覧ください VoiceOverの効率を上げるには次のことが必要ですまずインターフェースの視覚的に最も複雑な領域の特定です VoiceOverを使った場合使わないのと同じくらい簡単か確かめます簡単でない場合は画面が見えてないのと同じですそこでカスタムローターをお勧めしますあなたがデザインしたアプリケーションが誰にでもうまく機能するか確かめてください WWDC 2020をご覧いただきありがとうございました

4:04 - mapView.accessibilityCustomRotors = [customRotor(for: .stores), customRotor(for: .parks)]
```
mapView.accessibilityCustomRotors = [customRotor(for: .stores), customRotor(for: .parks)]
```

4:31 - map rotor 1

// Custom map rotors

func customRotor(for poiType: POI) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: poiType.rotorName) { [unowned self] predicate in

        return UIAccessibilityCustomRotorItemResult(    )
    }
}

4:56 - map rotor 2

// Custom map rotors

func customRotor(for poiType: POI) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: poiType.rotorName) { [unowned self] predicate in
        let currentElement = predicate.currentItem.targetElement as? MKAnnotationView
        let annotations = self.annotationViews(for: poiType)
        let currentIndex = annotations.firstIndex { $0 == currentElement }
        return UIAccessibilityCustomRotorItemResult(    )

    }
}

5:04 - map rotor 3

// Custom map rotors

func customRotor(for poiType: POI) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: poiType.rotorName) { [unowned self] predicate in
        let currentElement = predicate.currentItem.targetElement as? MKAnnotationView
        let annotations = self.annotationViews(for: poiType)
        let currentIndex = annotations.firstIndex { $0 == currentElement }
        let targetIndex: Int
        switch predicate.searchDirection {
        case .previous:
            targetIndex = (currentIndex ?? 1) - 1
        case .next:
            targetIndex = (currentIndex ?? -1) + 1
        }
        return UIAccessibilityCustomRotorItemResult(    )

    }
}

5:17 - Maps rotor 4

// Custom map rotors

func customRotor(for poiType: POI) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: poiType.rotorName) { [unowned self] predicate in
        let currentElement = predicate.currentItem.targetElement as? MKAnnotationView
        let annotations = self.annotationViews(for: poiType)
        let currentIndex = annotations.firstIndex { $0 == currentElement }
        let targetIndex: Int
        switch predicate.searchDirection {
        case .previous:
            targetIndex = (currentIndex ?? 1) - 1
        case .next:
            targetIndex = (currentIndex ?? -1) + 1
        }
        guard 0..<annotations.count ~= targetIndex else { return nil } // Reached boundary
        return UIAccessibilityCustomRotorItemResult(targetElement: annotations[targetIndex],
                                                    targetRange: nil)
    }
}

8:07 - Text rotor 1

// Custom text rotor

func customRotor(for attribute: NSAttributedString.Key) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: attribute.rotorName) { [unowned self] predicate in
        var targetRange: UITextRange? // Goal: find the range of following `attribute`
        let beginningRange = 
        guard let currentRange =    else { return nil }

        switch predicate.searchDirection {   }

        return UIAccessibilityCustomRotorItemResult(targetElement: self,
                                                    targetRange: targetRange)
    }
}

8:20 - Text rotor 2

// Custom text rotor

func customRotor(for attribute: NSAttributedString.Key) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: attribute.rotorName) { [unowned self] predicate in
        var targetRange: UITextRange? // Goal: find the range of following `attribute`
        let beginningRange = self.textRange(from: self.beginningOfDocument,
                                            to: self.beginningOfDocument)
        guard let currentRange = predicate.currentItem.targetRange ?? beginningRange else {
            return nil
        }
        let searchRange: NSRange, searchOptions: NSAttributedString.EnumerationOptions
        switch predicate.searchDirection {   }

        return UIAccessibilityCustomRotorItemResult(targetElement: self,
                                                    targetRange: targetRange)
    }
}

8:37 - Text rotor 3

// Custom text rotor

func customRotor(for attribute: NSAttributedString.Key) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: attribute.rotorName) { [unowned self] predicate in
        var targetRange: UITextRange? // Goal: find the range of following `attribute`
        let beginningRange = 
        guard let currentRange =    else { return nil }
        let searchRange: NSRange, searchOptions: NSAttributedString.EnumerationOptions
        switch predicate.searchDirection {
        case .previous:
            searchRange = self.rangeOfAttributedTextBefore(currentRange)
            searchOptions = [.reverse]
        case .next:
            searchRange = self.rangeOfAttributedTextAfter(currentRange)
            searchOptions = []
        }
       
        return UIAccessibilityCustomRotorItemResult(targetElement: self,
                                                    targetRange: targetRange)
    }
}

9:06 - Text rotor 4 (end)

// Custom text rotor

func customRotor(for attribute: NSAttributedString.Key) -> UIAccessibilityCustomRotor {
    UIAccessibilityCustomRotor(name: attribute.rotorName) { [unowned self] predicate in
        var targetRange: UITextRange? // Goal: find the range of following `attribute`
        let beginningRange =
        guard let currentRange =    else { return nil }
        let searchRange: NSRange, searchOptions: NSAttributedString.EnumerationOptions
        switch predicate.searchDirection {   }
        self.attributedText.enumerateAttribute(
            attribute, in: searchRange, options: searchOptions) { value, range, stop in
            guard value != nil else { return }
            targetRange = self.textRange(from: range)
            stop.pointee = true
        }
        return UIAccessibilityCustomRotorItemResult(targetElement: self,
                                                    targetRange: targetRange)
    }
}

カスタムローターを使ったVoiceOverの効率性

リソース

関連ビデオ

WWDC23

WWDC21

WWDC19