SwiftUIとUIKitを使ったアクセシブルなアプリの作成

SwiftUIとUIKitを使ったアクセシブルなアプリの作成

UIフレームワークの進歩により、リッチでアクセシブルな体験体験の作成がどれほど容易になるかを説明します。VoiceOverなどのテクノロジーが、アクセシビリティトレイトやアクションを通して、いかにアプリのインターフェイスとインタラクションしやすくなるかもご覧ください。みなさんのアクセシビリティ体験を洗練するSwiftUIの最新のアップデートや、みなさんのUIKit アプリのアクセシビリティ情報を最新に保つ方法をお話しします。

関連する章
- 0:00 - Welcome
- 1:30 - Explore the toggle trait
- 2:46 - Discover multi-platform accessibility announcements
- 3:58 - Assign priority to announcements
- 6:36 - Meet the zoom action
- 8:00 - Refine VoiceOver direct touch experiences
- 11:08 - Customize accessibility content shapes in SwiftUI
- 12:48 - Keep accessibility attributes up-to-date in UIKit using block-based setters
リソース
関連ビデオ

WWDC23
- SwiftUIの新機能
ダウンロード

♪ ♪
Allison：みなさんこんにちは私はAllisonでアクセシビリティのエンジニアです今日はみなさんのアプリをさらにアクセシブルにするための画期的な新しい方法について説明します Appleではアクセシビリティは作るものすべてに必須であり私たちは誰しもがテクノロジーにアクセスできるべきだと考えていますアプリをアクセシブルにするのは非常に簡単であって欲しいと思います昨年私たちは数多くの機能拡張を行い誰もが最高のアプリ体験ができるよう努めてきました本セッションでは人々が新しい画期的な方法でアプリとインタラクトできるような APIを詳しく見ていきますその次に SwiftUIのアプリのコンテンツのためにアクセシビリティビジュアルを改善する方法について話します最後にはアクセシビリティの属性を UIKit内で最新に保つためのより良い方法について学びますではアクセシビリティの機能拡張についてからはじめましょう写真編集のアプリを手掛けています私のアプリではライブラリやカメラからの写真に素敵な画像修正を加えられます様々なフィルターを適用したり写真の色合いを変えたりアプリのピアノの鍵盤を使って画像にあったカスタム音楽を作ったりできますアプリに組み込めるアクセシビリティエンハンスメントを少し見ていく事にしましょう私の写真アプリのフィルターのページにオンかオフの状態に切り替えるカスタムボタンがあります
「Filter」のスイッチボタンで画像フィルターのオンオフを切り替えますシステムはこのカスタムUIの正しいアクセシビリティのヒントやタイトルを知りませんが私たちは他のシステムのトグルに見合ったアクセシビリティ体験を確実に提供したいわけですそこで新しいアクセシビリティの特性 isToggleが役立ちますフィルターボタンを表す構造体がありますその構造体のボディにフィルターを切り替えられるボタンを作成しますボタンの色はフィルター状態の変数に基づいて更新されますそして isToggleの特性を accessibilityAddTraitsのmodifierのフィルターボタンに追加します isToggleは適切なアクセシビリティヒントと「switch button」の説明を与えてくれます VoiceOver：「Filter Switch button」「Double-tap to toggle setting」
Allison：新しいトグルの特性は UIKitでも利用可能です viewDidLoadメソッドでボタンビューを設定しますそしてボタンのaccessibility Traitsプロパティに .toggleButtonを含むよう設定します写真付フィルターアプリで写真ナビゲーションバーボタンに新しいアナウンスメントを加えて写真ビューがロード中である事を知らせたいと思います Accessibility Notificationsがこれを助けてくれる新しいAPIです Accessibility notificationsによる統一されたマルチプラットフォーム方法でアプリでアシスティブテクノロジーを使っている人にアナウンスメントを作成したり情報を伝達したりできます Accessibility notificationsが作成できるアプリは SwiftUIと UIKitとAppKitを実行するアプリです Accessibility Notificationではアナウンスメントやレイアウトの変更や画面の変更ページスクロールの通知を Swift独自の方法で送れます写真ツールバーボタンが押される時はアナウンスメントを出したいですね VoiceOver：「Photo, Button」「Photos Loading photos view」 Allison：ツールバーボタンの実行でアナウンスメントを出せますアナウンスメントの作成に使えるのは AccessibilityNotification.Announcementで文字列パラメータを「Loading Photos View」としますアプリでカメラのナビゲーションバーボタンが押された時も 3つのアナウンスメントを作成したいと思います最初のアナウンスメントの「Opening Camera」と 3つ目の「Camera Active」が最も重要なアナウンスメントです VoiceOverの現在のアナウンスメントのスピーチパターンを聞いてみましょう 2つ目の「Camera Loading」が「Opening Camera」に被っているのが分かります VoiceOver：「Camera button」「Done Open--camera--camera active」 Allison：現在 SwiftUIやUIKitではアナウンスメントの優先度も設定できるのでアシスティブテクノロジーによって話されるアナウンスメントの順番の重要性が設定できますこれによって必ず聞かせたいアナウンスメントと時間がなければ無視する物とをコントロールできますこの情報の重要性を特定するのに使える3つのアナウンスメント優先度は highとdefaultとlowです Highの優先度を持つアナウンスメントは他のスピーチに割り込めますが一旦始まれば割り込みはされません Defaultの優先度を持つアナウンスメントは既存のスピーチに割り込めますが新たなスピーチが始まれば割り込まれることがあります Lowの優先度を持つアナウンスメントが話される順番としては他のスピーチが完了していて新たなアナウンスメントも始まっていない場合です写真アプリではアナウンスメントの優先度を利用して割り込みのある文字列を修正できます属性文字列から作られたアナウンスメントが3つあります SwiftUIでは優先度の設定を行う所は accessibilitySpeechAnnouncement Priorityの文字列優先度です 2番目のアナウンスメント「Camera Loading」は重要性が最も低いので lowの優先度を与えます最後のアナウンスメント「Camera Active」が最も重要なので highの優先度を与えます次に属性文字列をAccessibility Notificationに渡しますまずデフォルトの優先度のアナウンスメントを割り当て次にlowの優先度でそれからhighの優先度ですここでlowの優先度のアナウンスメントがデフォルト優先度に割り込まない一方 High優先度のアナウンスメントが defaultとlowのアナウンスメントに割り込む様子を見てください VoiceOver：「Camera button」「Done　Opening camera--camera active」 Allison：UIKitでも同様の順序づけが可能ですアナウンスメントの優先度をNSAttributed Stringのキーバリューペアに設定します使用するキーは UIAccessibilitySpeechAttribute AnnouncementPriorityで値を適切なUIAccessibility Priorityに設定しますそして属性をattributed string initializerに渡しますアプリに戻ると画像ビューでは物理的に触れたりつまんだりしてズームインやズームアウトができますアシスティブテクノロジーを有効にするとこの物理的な指の動作は達成しにくくなりますアクセシビリティズームアクションではアシスティブテクノロジーが有効な時 UIエレメントでズームインやズームアウトができるようになります画像にズームアクションを加えます ZoomingImageView構造体のボディに画像があります最初にaccessibilityZoomActionの modifierを加えますズームアクションの方向に基づいてコンテンツのズームインやズームアウトを行い AccessibilityNotification. Announcementをポストしますこれらの変更でVoiceOverのズーム機能がどうなったか見てみましょう VoiceOver：「Zooming image view image」「Zoom」「2x zoom　3x zoom」「4x zoom　3x zoom」 Allison：ズームのトレイトとアクションはUIKitでも追加できますまず画像ビューを含む事になるズームビューを作成します次に supportsZoomトレイトを画像トレイトと並べてズームビューに追加しますそしてaccessibilityZoomInAtPointと accessibilityZoomOutAtPointを実装しこのそれぞれがbooleanを戻してズームが成功か失敗かを示しますこのそれぞれのメソッドでズームスケールを更新しズームの変更を示すアナウンスメントをポストしますこの画像フィルターのアプリでは小さなピアノの鍵盤を使って画像に追加する短い音楽を作成できます鍵盤を使って画像に合ったカスタムトーンが作れますトーンを作ろうとした時の音に対して現在のVoiceOver体験がどんな感じか見てみましょう
エレメントに触れるたびに VoiceOverが鍵盤ラベルを読み VoiceOverのアクティベーション音が出るのですがこれでは鍵盤を素早く続けて押すのが困難になります典型的には VoiceOverは安全な探求体験を与えてくれますが時にはアプリを適切に使うためにはアプリとの直接的インタラクションが必要となるものです余分なスピーチや音は無しで直接ピアノの鍵盤に触れた方がこのアプリでははるかに有用です今こそこのビューにダイレクトタッチのトレイト allowsDirectInteractionを取り入れる時ですアクセシビリティダイレクトタッチエリアで VoiceOverのジェスチャーがアプリへと直接渡されていく画面の領域を特定できるようになりますデフォルトの状態ではVoiceOverがダイレクトタッチエレメントのコンテンツの読み上げと起動の両方を行いますですがこのアプリの場合は誰かがピアノの鍵盤を触った時にはまずピアノの鍵盤エレメントを設定せずにも VoiceOverがサイレントになりすぐにピアノの音が聴けるのが望ましいと考えましたさらには allowsDirect Interactionトレイトには新たにサポートされる2つのダイレクトタッチオプションがありますまずは silentOnTouchを特定すれば誰かがダイレクトタッチエリアを触ったら VoiceOverがサイレントになりアプリはオーディオフィードバックを自ら送ることができます 2番目は requiresActivationを特定してタッチパススルーの前にVoiceOverがエレメントを起動するようダイレクトタッチエリアに要求させるオプションですこちらがKeyboardKeyView用のコードスニペットですどの鍵盤も長方形で特定の音を鳴らします音が鳴るたびにVoiceOverが発話する問題を修正するためにボタンのダイレクトタッチオプションを silent on touchに設定しましたこれでVoiceOverが鍵盤ボタンにかかっていても VoiceOverの発話が邪魔する事なく正しい音が流れます UIKitでも新しいダイレクトタッチオプションが追加できます鍵盤ボタンをUIButtonとして作成できます次にallowsDirectInteractionの accessibilityTraitsを追加しますアクセシビリティダイレクトタッチオプションを UIKitで設定する時はこのトレイトが要求されます最後は accessibility DirectTouchOptionsに silentOnTouchのオプションを追加しますアクセシビリティトグルトレイトやアナウンスメント優先度やズームトレイトそしてダイレクトタッチオプションで SwiftUIやUIKit アプリとのアシスティブテクノロジーインタラクションがコントロールしやすくなります次は SwiftUIのアクセシビリティコンテンツの形状の種類についてですこの種類はアクセシビリティエレメントのパスを設定し画面上でのアクセシビリティエレメントの外見をコントロールします以前はインタラクションコンテンツの形状の種類がアクセシビリティの形状とヒットテストの形状を変えていました今ではヒットテストの形状に影響を与える事なくアクセシビリティコンテンツの形状だけを左右する Accessibility Content Shape kindがありますエレメントが例えば丸のようなカスタムの形状を必要とする時計算されたアクセシビリティのカーソルが画面の他のアイテムを遮るかもしれませんこの例ではアクセシビリティパスは正方形なので赤い丸のコンテンツにマッチしていません Accessibility Content Shape kindがビューに適用されると基礎となるアクセシビリティジオメトリが modifierで指定された形状で更新されますこれでエレメントのパスは既存のSwiftUIの形状で素早く更新できるようになります丸の画像で丸いボタンを作りましたフレームを設定してアクセシビリティラベルを色に合わせて redにします最後にアクセシビリティタイプと Circleを形状としてビューにコンテンツ形状のmodifierを追加できます
これでアクセシビリティパスが赤い丸ボタンの丸い形状と一致します最後は UIKitアクセシビリティに間もなく追加されるブロックベースの属性セッターです写真編集アプリでは写真フィルターの有無を表す画像ビューのアクセシビリティ値が欲しいと思います今では簡単な方法でビューの基礎にあるアクセシビリティ属性を表示されたUIと常に一致させられますブロックベースの属性セッターを使えばそれが可能です新しいアクセシビリティのブロックAPIで属性が必要な時はいつでも値を直接に保存するのではなく評価されたクロージャが付与できますこのクロージャはビューがアシスティブテクノロジーによって参照されたり評価されるごとに再評価されますビューコントローラ用の viewDidLoad法によって作成されたクロージャで物事が単純化できます accessibilityValueBlockプロパティを zoomViewに設定して画像のフィルターの有無に基づいて常に値を更新しておきますクロージャはこの属性に適切なタイプを戻さなければならずこれはオプショナルな文字列です循環サイクルにならないよう弱い参照を使用していますねブロックはクラスライフサイクルの最初に加えるのがお勧めで適切なアクセシビリティ属性情報でクラスを始められますこれでアクセシビリティ属性ははるかに簡単に維持できます誰かがVoiceOverカーソルを新しいエレメントに動かすたびに VoiceOverは最初にクロージャのある属性セットを探しクロージャを再評価します
カスタムのUIを作成する時はトグルのようなアクセシビリティトレイトやダイレクトタッチオプションのような機能を統合してあらゆる人に対してのユーザビリティを増強しましょう
次に SwiftUIのカスタム形状で自分のビューを考えてみましょうアクセシビリティの形状が UIにマッチしていないならカスタムのアクセシビリティ形状を導入することを考えましょうそして最後に自分がどのようにアクセシビリティ属性を設定しているのかを評価しブロックベースのセッターがアプリに適しているか判断しましょう Appleではアクセシビリティは人権であると信じていますみなさんの力であらゆる人の生活をよりよくし力を与えるテクノロジーを作り出せるはずですこれらの新しいAPIを使えばアシスティブテクノロジーに頼る人々にとってアプリの使い易さがグッと上がります是非すべてを活用して素晴らしいアクセシブルなアプリを作ってくださいご視聴ありがとうございました

1:54 - Add the accessibility toggle trait

import SwiftUI

struct FilterButton: View {
    @State var filter: Bool = false

    var body: some View {
        Button(action: { filter.toggle() }) {
            Text("Filter")
        }
        .background(filter ? darkGreen : lightGreen)
        .accessibilityAddTraits(.isToggle)
    }
}

2:31 - Add the accessibility toggle trait with UIKit

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let filterButton = UIButton(type: .custom)

        setupButtonView()

        filterButton.accessibilityTraits = [.toggleButton]

        view.addSubview(filterButton)
    }
}

3:43 - Post an accessibility notification

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            PhotoFilterView
                .toolbar {
                    Button(action: {
                        AccessibilityNotification.Announcement("Loading Photos View")
                            .post()
                    }) {
                        Text("Photos")
                    }
                }
        }
    }
}

5:13 - Assign announcement priority

import SwiftUI

struct ZoomingImageView: View {
  
    var defaultPriorityAnnouncement = AttributedString("Opening Camera")

    var lowPriorityAnnouncement: AttributedString {
        var lowPriorityString = AttributedString("Camera Loading")
        lowPriorityString.accessibilitySpeechAnnouncementPriority = .low
        return lowPriorityString
    }
    
    var highPriorityAnnouncement: AttributedString {
        var highPriorityString = AttributedString("Camera Active")
        highPriorityString.accessibilitySpeechAnnouncementPriority = .high
        return highPriorityString
    }
  
    // ...
}

5:46 - Post announcements with priority set

import SwiftUI

struct CameraButton: View {
    
    // ...
  
    var body: some View {
        Button(action: {
            // Open Camera Code
            AccessibilityNotification.Announcement(defaultPriorityAnnouncement).post()
            // Camera Loading Code
            AccessibilityNotification.Announcement(lowPriorityAnnouncement).post()
            // Camera Loaded Code
            AccessibilityNotification.Announcement(highPriorityAnnouncement).post()
        }) {
            Image("Camera")
           }
        }
    }
}

6:15 - Assign announcement priority with UIKit

class ViewController: UIViewController {
    let defaultAnnouncement = NSAttributedString(string: "Opening Camera", attributes: 
        [NSAttributedString.Key.UIAccessibilitySpeechAttributeAnnouncementPriority: 
        UIAccessibilityPriority.default]
    )

    let lowPriorityAnnouncement = NSAttributedString(string: "Camera Loading", attributes:   
        [NSAttributedString.Key.UIAccessibilitySpeechAttributeAnnouncementPriority:
        UIAccessibilityPriority.low]
    )

    let highPriorityAnnouncement = NSAttributedString(string: "Camera Active", attributes: 
        [NSAttributedString.Key.UIAccessibilitySpeechAttributeAnnouncementPriority:  
        UIAccessibilityPriority.high]
    )

    // ...
}

6:56 - Add the accessibility zoom action

struct ZoomingImageView: View {
    @State private var zoomValue = 1.0
    @State var imageName: String?

    var body: some View {
        Image(imageName ?? "")
            .scaleEffect(zoomValue)
            .accessibilityZoomAction { action in
                let zoomQuantity = "\(Int(zoomValue)) x zoom"
                switch action.direction {
                case .zoomIn:
                    zoomValue += 1.0
                    AccessibilityNotification.Announcement(zoomQuantity).post()
                case .zoomOut:
                    zoomValue -= 1.0
                    AccessibilityNotification.Announcement(zoomQuantity).post()
                }
            }
    }
}

7:18 - Add the accessibility zoom action with UIKit

import UIKit

class ViewController: UIViewController {
    let zoomView = ZoomingImageView(frame: .zero)
    let imageView = UIImageView(image: UIImage(named: "tree"))

    override func viewDidLoad() {
        super.viewDidLoad()
        zoomView.isAccessibilityElement = true
        zoomView.accessibilityLabel = "Zooming Image View"
        zoomView.accessibilityTraits = [.image, .supportsZoom]

        zoomView.addSubview(imageView)
        view.addSubview(zoomView)
    }
}

7:43 - Respond to accessibility zoom actions with UIKit

import UIKit 

class ZoomingImageView: UIScrollView {
    override func accessibilityZoomIn(at point: CGPoint) -> Bool {
        zoomScale += 1.0

        let zoomQuantity = "\(Int(zoomValue)) x zoom"  
        UIAccessibility.post(notification: .announcement, argument: zoomQuantity)
        return true
    }

    override func accessibilityZoomOut(at point: CGPoint) -> Bool {
        zoomScale -= 1.0

        let zoomQuantity = "\(Int(zoomValue)) x zoom" 
        UIAccessibility.post(notification: .announcement, argument: zoomQuantity)             
        return true
    }
}

10:10 - Use accessibility direct touch options

import SwiftUI

struct KeyboardKeyView: View {
    var soundFile: String
    var body: some View {
        Rectangle()
            .fill(.white)
            .frame(width: 35, height: 80)
            .onTapGesture(count: 1) {
                playSound(sound: soundFile, type: "mp3")
            }            
            .accessibilityDirectTouch(options: .silentOnTouch)
    }
}

10:46 - Use accessibility direct touch options with UIKit

import UIKit

class ViewController: UIViewController {
    let waveformButton = UIButton(type: .custom)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        waveformButton.accessibilityTraits = .allowsDirectInteraction
        waveformButton.accessibilityDirectTouchOptions = .silentOnTouch
        waveformButton.addTarget(self, action: #selector(playTone), for: .touchUpInside)
        
        view.addSubview(waveformButton)
    }
}

12:21 - Set the accessibility content shape

import SwiftUI

struct ImageView: View {
    var body: some View {
        Image("circle-red")
            .resizable()
            .frame(width: 200, height: 200)
            .accessibilityLabel("Red")
            .contentShape(.accessibility, Circle())
    }
}

13:35 - Update accessibility values using block-based setters with UIKit

import UIKit 

class ViewController: UIViewController {
    var isFiltered = false

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set up views
        zoomView.accessibilityValueBlock = { [weak self] in
            guard let self else { return nil }
            return isFiltered ? "Filtered" : "Not Filtered"
        }
    }
}

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

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

関連する章

リソース

関連ビデオ

WWDC23