watchOSにおけるアクセシブルな体験の実現

watchOSにおけるアクセシブルな体験の実現

大きなテキストサイズ、VoiceOver、AssistiveTouchなどの機能をサポートする場合に、watchOS向けに最高のアクセシビリティ・エクスペリエンスを構築する方法を紹介します。APIのインテグレーション、エクスペリエンスなどに関するベストプラクティスを含め、watchOS用に構築されたSwiftUI Appに視覚および身体機能に関するアクセシビリティのサポートを追加する方法を説明します。

リソース
関連ビデオ

WWDC21
- SwiftUIのアクセシビリティ: 基礎を超えて
- Tuesday@WWDC21
WWDC20
- Appを視覚的にアクセシブルにする
WWDC19
- SwiftUIにおけるアクセシビリティ
ダウンロード

♪ （watchOSにおけるアクセシブルな体験の実現）こんにちはダニエルですアクセシビリティエンジニアです本トークでは私の同僚ヴィラータと共に watchOSのアクセシビリティ機能とこれらを使うユーザー向けにデベロッパとしてどのように watch Appを構築するかについて説明します本日はまずwatchOSにおけるアクセシビリティを紹介します次にアクセシビリティAPIについて詳しく説明しさまざまなビジュアルアクセシビリティサポートのために可能なことをお伝えしますそして最後にヴィラータがWatchの運動障害のためのアクセシビリティ動作やそのサポートのためにできることを説明しますまずはwatchOSのアクセシビリティですアクセシビリティとは個々のユーザーがデバイスを使いやすいようにすることですつまりAppで最高のユーザー体験を提供するにはアクセシビリティへの配慮が欠かせません Apple Watchには Appを使いやすくするアクセシビリティ機能が多数用意されています VoiceOverなどのアシスト技術によりたとえば視覚障害のあるユーザーがジェスチャで画面を操作しコンテンツ読み上げ中のタップで Apple Watchをフル活用できます今年のwatchOSには Apple Watch専用に再開発された AssitiveTouchが加わりました AssitiveTouchにより運動障害のある人が画面にまったく触れずに Apple Watchを使えますこの機能についてはヴィラータが後で説明しますサポートするためにできることについても説明します watchOSはモーション低減太字などの表示への適応を提供していますアクセシビリティテキストサイズも大きくなりましたここでは視覚的なアクセシビリティを説明します適切なAPIでアクセシビリティをサポートすると AppがWatchKitや SwiftUIで記述されているかどうかに関わらず VoiceOverが正しく機能するようになります SwiftUIのアクセシビリティについて説明しますただしここで学習するすべての原則が WatchKitにも適用されると理解しておいてくださいまたAppをアクセス可能にする際にはコンプリケーションや通知にも配慮してくださいこれらはAppからのコンテンツを配信する別経路として機能するため私たちのアシスト技術をサポートするようにしてください Appの構築のために新しいことを学べる一番の方法ではないでしょうか？幸運にも私は家で植物に投資するようになったのでその世話用Appを作ることにしましたまだ完成していませんがメイン画面では今後の植物の世話のスケジュール（5日間の水やり 7日間の肥料やり日光に適度に当てる）など育てている植物の全情報が表示されますここに他の植物があります植物への水やりや施肥のような作業記録に使う 2つのボタンがありますそしてセルをタップして水やりや施肥の間隔を調節できますこれは情報提供 Appなので各セルにはテキストがかなり入っていますここではシステムテキストがデフォルトサイズの場合の Appの外観をお見せします見た目はかなり良いですしかし左のようにシステムテキストサイズを小さくするとボタンとタスクリストのテキストサイズが変更されても植物名の文字サイズは変わりません次に右のアクセシビリティを大きくするとタスクリストのテキストサイズが大きくなり情報が画面に収まらなくなりますではAppに Dynamic Typeを適切にサポートさせる方法を見てみましょう PlantViewのコードを調べるとタイトルやその他コンテンツを含む VStackがありますタイトルに使ったフォントサイズが固定されていることに注目してくださいそれは完全に私のタイトルのサイズの変更を止めています固定フォントサイズではなく提供されている11種類のテキストスタイルのいずれかを使う必要があります左側のテキストスタイルはデフォルトのシステムテキストサイズで表示されますテキストサイズを最大にすると右側のテキストスタイルのサイズに合わせて拡大されますテキストスタイルを使うとシステムのテキストサイズ設定に合わせてフォントサイズが自動で調整されますしたがってPlantViewコードをもう一度見てみるとタイトルのフォントをタイトル3のテキストスタイルに変更してサイズの小さいタイトルにすることですばやく簡単に変更できます次にタスクリストのテキストの切り捨てを修正します PlantTaskLabelのコードでは HStack内のすべての項目に 1のlineLimitを割り当てますこれでテキストを1行にすることのみが可能になります UIで必要な数の行に柔軟に調整できるようにするにはサポートの必要がある最大行数に lineLimitを設定しますまたは削除して行数を制限しないようにします今私たちは進歩していますしかしUIは確かに大きく切り捨てもありませんがプロセスでは非常に詰め込まれています画面の情報を読むのはまだ簡単ではありません大きなテキストスタイルのレイアウトでは構造を変える必要がある場合がありますしたがってレイアウト構築時 sizeCategoryに Environmentプロパティラッパーを作成しこの変更があったときに更新を取得します次にsizeCategoryに依存するよう UIを調整するのみですこの場合タスクリスト内の ExtraLargeのどこかでテキストが折り返されますサイズカテゴリがこれより小さい場合は前に見た PlantViewを使いますただしそれが大きい場合はこの新しい垂直方向のビューを使いますこのビューでは各ラベルとボタンを並べてより多くのスペースを確保できますこちらの方がきれいに見えます Watchへの大きなアクセシビリティテキストスタイル導入によりダイナミックタイプの利用者の増加が予想されますあなたもそうすべきです！ Apple Watchの設定をするユーザーには開始時にテキストサイズをカスタマイズするオプションが表示されます変更を行わない場合はスマートフォンで使われているサイズに最も近いサイズを Watchが自動で選択しますテキストサイズが大きい場合にWatch Appが優れた動作をするようにするには Dynamic Typeの概要を説明するのに重要な点が3つありますまず固定フォントサイズではなく常にテキストスタイルを使うようにします次にテキストを折り返して切れないようにします 3つ目は必要に応じてコンテンツが詰まりすぎたときに垂直方向のレイアウトに切り替えることですここでは大きなテキストに関して簡単な説明をしただけなので "Building Apps with Dynamic Type"というトークをご確認いただきステップアップいただくことを強くおすすめしますまた優れたビジュアル体験の実現についてさらに詳しく知るには "Appを視覚的にアクセシブルにする" というトークをご覧くださいこれで視覚的にうまく動作しますしかし目の見えないユーザーはどうすればよいでしょうか VoiceOverをオンにして体験を聞いてみましょう
WWDaisy デイジーイメージドロップイメージ 5日間リーフイメージ 7日間もっと明るくイメージ中程度ドロップフィルボタンリーフフィルボタン従って私達ができる改善点は必ずあります 1つ目の方法は操作可能なボタンの数を減らすことです現時点ではこれはかなり複雑なビューです各セルに4つのラベル 4つの画像ボタンが2つあります現在2番目の植物に移るには最初の植物セルの全項目を通過する必要がありますまた水肥料日光の画像アイコンもテキストに別々の要素として読み上げられラベルは文脈に合っていません最後に下2つのボタンは使われているシンボルが提供するデフォルトのラベルを使っていました最初にお話ししたのは植物1から植物2に移るには移動すべき項目が多すぎるということです NavigationLink 作成時は各要素のアクセシビリティステートの理解のために子のアクセシビリティElement グループを .containとして指定しましたしかしこれはいいように見えるのでこの行を削除します NavigationLinkは子からのすべてのアクセシビリティ情報を自動で結合しますこれでセルは単一要素として扱われ読み上げ内容は"WWDaisy 5日間 7日間中程度ボタン" となりますこのタスクリストにはまだ作業が必要です各タスクに適切なラベルを付けて今後の植物の世話タスクの状況を説明します PlantTaskがラベルを決めます PlantTaskLabel構造体の内部ではaccessibilityLabelを変更して各植物タスクに異なる文字列を返すようにしますこれはボタンにラベルを置くのに使う技術と同じですコンテンツは "WWDaisy 5日間水やり 7日間施肥中程度の日光に当てるボタン" と読み上げられます水やりと施肥ボタンは "水やり記録ボタン" "施肥ボタン"と読み上げられますこれまで多くの作業が自動で行われていますが必要な追加の修飾子はわずかです SwiftUIではほとんどのアクセシビリティ機能が無料です数行コードを書くだけで済むでしょうしかしこれから常にカスタムコントロール構築の必要がある場合もあります私は植物のための水やりと施肥の頻度を調節できるようにカスタムカウンタを作ることにしましたでは見てみましょう数日間の水やりの頻度見出し削除ボタン 8 追加ボタン追加技術的には機能するものの理想の体験ではありませんここでの目標はこれら3項目を1つのアクセス可能な要素にすることですまずアクセシビリティElement 修飾子を使いますこれで新しい上位レベルの要素が作成されますが今回はすべての子を無視しますこれはアクセシビリティElementのデフォルト動作です同じ動作を得るにはパラメータを空白のままにしておけばいいのです子を無視しているため自動で提供されたアクセシビリティアクションとともにボタンのラベルが破棄されます代わりに accessibilityAdjustableActionを使ってユーザがカウンタを上下にスワイプして値を増減できるようにします要素が1つしかないためタスク名を使ってラベルを1つだけ付けますこれは"水やり頻度"か "施肥頻度"となります最後に値を入力します accessibilityValueは変更のたびに読み込まれますがラベルは要素の移動時のみに読み上げられます
数日間の水やりの頻度見出し水やりの頻度8日間調整可能 9日間素晴らしいよりよく動くようになりました先ほど見たようにSwiftUIを使えばVoiceOverが Watch Appに簡単にアクセスできるようになるのですまたSwiftUIであるため macOSとiOSでも同じコードが使えます SwiftUIで素晴らしい体験をデザインする詳細にはトーク"SwiftUIのアクセシビリティ"の説明をご覧ください SwiftUIアクセシビリティ使用時の新しいツールと APIについてはトーク "SwiftUI アクセシビリティ: 基礎を超えて"をご覧ください次に視覚的アクセシビリティから移る前にコンプリケーションと通知という 2点に焦点を当てますコンプリケーションはAppへのトラフィックが多いためアクセスしやすい方法で情報を提供する必要もありますコンプリケーションにはさまざまな種類がありますがそのほとんどはテキスト画像記号の 3要素で構成されますテキストはVoiceOverで自動的にピックアップされますがテキストに略語がある場合は必ず非省略バージョンのアクセシビリティラベルを追加してくださいここでは省略形 "Wednesday Mar 9"を完全な "Wednesday, March 9th"に拡張します画像ベースのコンプリケーションも非常に一般的ですここでもアクセシビリティラベルを提供してくださいそうでなければイメージ名が使われます "月"は "月のリアルタイムの眺め第3四半期"ほど説明的ではありません SF Symbolsなどの特定の図像には "ドロップフィル"などのデフォルトのアクセシビリティラベルが付いている場合がありますがシンボルに付いているラベルがわかりやすいものであることを確認してください "Water in three days"は私にとってとてもわかりやすいです通知については Appがユーザーにたくさんの情報を送信する方法ですしたがって一部の通知は非常に単純ですが動的な通知には複雑なビューが含まれる場合があるため Appに提供したものと同じアクセシビリティサポートが必要になります次はヴィラータが運動障害のためのアクセシビリティについて説明しますヴィラータダニエルありがとうヴィラータですアクセシビリティチームのエンジニアです Apple Watchの運動障害アクセシビリティサポートについてお話しできることを大変嬉しく思いますしかしまずは新機能の概要を簡単に説明します画面に触れず手のジェスチャーのみで Watchの盤面からコントロールセンターに移動してボタンをオンにできますとても簡単です今年 Apple Watchに AssitiveTouchをお届けできることがとても嬉しいです AssitiveTouchでは Apple Watch がオンになっている手のみでタッチすることなく Apple Watchをフル活用できますユーザーはハンドジェスチャーや手の動きで画面のカーソルを動かせますメニューを表示して画面の内容に基づいて追加機能にアクセスできます一部の人にとってはこれがApple Watchを操作する唯一の方法となる場合があります手足の欠損や手や腕の機能の喪失など運動障害のある人も AssitiveTouchを使えば Apple Watchでの操作を制御・実行できるオプションを追加できますそれでは AssitiveTouchの使用例を見てみましょう AssitiveTouchの主な操作方法はハンドジェスチャーですユーザーは拳を握る（タップ）や 2回拳を握ってのアクションメニュー表示次のボタンに移動するピンチ前のボタンに戻るダブルピンチなどのジェスチャーを実行できますハンドジェスチャーが使えない人のための代用が手の動きです手首を傾けると画面のポインタを動かして UIボタンを操作できます iOSのAssitiveTouchと同様にDwell Controlを使うとポインタをボタンに置いて一定時間操作ができます
それではAssitiveTouchを詳しく見ていきましょう AssitiveTouchの主な機能は2つですカーソルとアクションメニューです AssitiveTouchをオンにすると画面にカーソルが表示されますカーソルは左上から右下に向かって画面上の各ボタン 1つずつにフォーカスを当てますカーソルでボタンが高輝度表示されるとやり取りが可能になります選択したボタンに対して他のアクションを実行するにはアクションメニューを表示してシステム/カスタムアクションを実行します AssitiveTouchアクションメニューには Digital Crownの押下スクロールナビゲーションジェスチャ操作などデバイスの制御を可能にするデフォルトのシステムアクションが用意されていますこのメニューにカスタムアクションの追加もできますさてAssitiveTouchの仕組みを理解しました Appでのサポート方法を見てみましょう次のトピックに移りますまず選択可能なボタンがどのようにビューに表示されるかまたその要素をどう変更できるかです次にカーソルフレームとフレームサイズの変更方法を見ます最後にアクションメニューのカスタマイズ方法の説明です選択可能なボタンから始めましょうこの表は AssitiveTouchで選択可能なボタンの概要です選択可能なのはユーザーの操作に応答する対話型ボタンのみです SwiftUIにはユーザーの操作を処理するためのコントロール要素が組み込まれていますこれらの要素は対話型での選択が可能ですビューにボタントグルまたは NavigationLinkがあればこれらの要素はデフォルトでフォーカスされますアクション可能な要素はアクションがあるか対話型として定義されているため AssistiveTouchで選択可能ですテキスト要素はタップジェスチャアクションの適用で対話的に選択可能になります AccessibilityActionを要素に追加することもできますボタンや調整可能など実用的特性を持つ要素を定義すると対話型として扱われ AssitiveTouch によって選択されます選択できないボタンも一部あります AssitiveTouchではラベルやユーザー操作に応答しないテキストなどの静的要素は選択できませんユーザー操作が無効なボタンも選択できません例を見てみましょうここにはラベルヘッダやドリンク情報を含むテキスト Accept および Cancel ボタンがあります選択可能なのは 2つのボタンのみですラベルとテキストは選択できませんこのビューのコードを見てみましょうメインVStackにタップジェスチャが付いていますこのビューをタップするとドリンクの詳細ビューを表示できるのですただし明示的に宣言しない限りVStack内の静的要素は選択可能になりませんここで選択できるのは AcceptボタンとCancelボタンのみですではビュータップでドリンクの詳細を見られることをユーザはどのように知るのでしょうかより良いユーザー体験を提供するためにドリンク情報テキスト要素を強調表示してそれが対話可能でタップできることを示しますそうするには accessibilityRespondsToUser 対話型修飾子に "true"を設定します修飾子適用後このビューにはドリンク情報テキスト Accept および Cancelボタンの選択可能な要素が3つありますそれではAssitiveTouch カーソルフレームを見ていきますご覧のように AssitiveTouchでは要素が厄介なのかアクションを実行できるかを強調するためにフォーカスされたエレメントが重要です AssitiveTouchカーソルフレームは要素のタップ可能領域と同じですタップ可能な領域が小さい要素は小さなカーソルフレームがあり内側のコンテンツをクリップする場合があります余白を追加し境界線をオブジェクトの形状に一致させてクリップを防止することでこのような作業をよりクリーンにできますこの例では省略記号の画像のある NavigationLinkが AssitiveTouchカーソルの小さな円で強調表示されていますこれを改善するにはタップ可能領域のサイズを大きくしますこれでAssitiveTouchカーソルフレームも変更されます contentShape修飾子へのパスを指定することでタップ可能な領域と要素のカーソルフレームを変更できますこのNavigationLinkではタップ可能な領域の形を要素のサイズの半分の円に設定しますその結果AssitiveTouch カーソルフレームが大きくなり画面上での表示がはるかに簡単になりますそれではAssitiveTouchアクションメニューを見てみましょうこのメニューではアクションメニューリストに表示するデフォルトのシステムアクションとカスタムアクションがビューに表示されますフォーカス要素にカスタムアクションがあればそれらが優先順位付けされリストの先頭に表示されるので操作しやすくなりますエレメントが調整可能な場合は減分/増分アクションが表示されますアクセシビリティグループ要素にカスタムアクションがある場合はグループ要素にフォーカスするとそれらのアクションが表示されます VoiceOverのカスタムアクションを要素にすでに追加している場合はこれで完了ですこれらのアクションは AssitiveTouchアクションメニューにも自動的に表示されますカスタムアクションはアイコンとして表示されますデフォルトのイメージはカスタムアクション名の最初の文字になりますカスタムアクションアイコンのイメージを提供する場合は accessibilityAction修飾子にイメージ付きのラベルを追加できますセッションはこれで終わりですこれでApple Watchのアクセシビリティ機能の理解が深まりました AppにDynamic Type VoiceOver、AssitiveTouchのサポートを必ず追加してくださいこれらAPIで watchOS Appに誰もがアクセスできるようにするツールが用意されていますお時間ありがとうございました残りのWWDCもお楽しみください ♪

struct PlantView: View {
    @Binding var plant: Plant
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(plant.name)
                .font(.title3)
            HStack() {
                PlantImage(plant: plant)
                PlantTaskList(plant: $plant)
            }
            PlantTaskButtons(plant: $plant)
        }
    }
}

5:00 - Line limits for PlantTaskLabel

struct PlantTaskLabel: View {
    let task: PlantTask
    @Binding var plant: Plant

    var body: some View {
        HStack {
            Image(systemName: task.systemImageName)
                .imageScale(.small)
            Text(plant.stringForTask(task: task))
        }
        .lineLimit(3)
        .font(.caption2)
    }
}

5:48 - Alternate layouts for PlantContainerView

struct PlantContainerView: View {
    @Environment(\.sizeCategory) var sizeCategory
    @Binding var plant: Plant
    
    var body: some View {
        if sizeCategory < .extraExtraLarge {
            PlantViewHorizontal(plant: $plant)
        } else {
            PlantViewVertical(plant: $plant)
        }
    }
}

8:56 - Element grouping for PlantCellView

struct PlantCellView: View {
    @EnvironmentObject var plantData: PlantData
    var plant: Plant
    
    var plantIndex: Int {
        plantData.plants.firstIndex(where: { $0.id == plant.id })!
    }
    
    var body: some View {
        NavigationLink(destination: PlantEditView(plant: plant).environmentObject(plantData)) {
            PlantContainerView(plant: $plantData.plants[plantIndex])
                .padding()
        }
    }
}

9:38 - Accessibility labels for PlantTaskLabel

struct PlantTaskLabel: View {
    let task: PlantTask
    @Binding var plant: Plant

    var body: some View {
        HStack {
            Image(systemName: task.systemImageName)
                .imageScale(.small)
            Text(plant.stringForTask(task: task))
                .accessibilityLabel(plant.accessibilityStringForTask(task: task))
        }
        .lineLimit(3)
        .font(.caption2)
    }
}

10:03 - Accessibility labels for PlantButton

struct PlantButton: View {
    let task: PlantTask
    let action: () -> Void
    @State private var isTapped: Bool = false
    
    var body: some View {
        Button(action: {
            self.isTapped.toggle()
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                self.isTapped.toggle()
            }
            action()
        }) {
            Image(systemName: task.systemImageFillName)
                .foregroundColor(task.color)
                .scaleEffect(isTapped ? 1.5 : 1)
                .animation(nil, value: 0)
                .rotationEffect(.degrees(isTapped ? 360 : 0))
                .animation(.spring(), value: 0)
                .imageScale(.large)
        }
        .buttonStyle(BorderedButtonStyle())
        .accessibilityLabel("Log \(task.name)")
    }
}

11:07 - Custom control accessibility for PlantTaskFrequency

struct PlantTaskFrequency: View {
    let task: PlantTask
    @Binding var plant: Plant
    let increment: () -> Void
    let decrement: () -> Void
    
    var value: Int {
        switch task {
        case .water:
            return plant.wateringFrequency
        case .fertilize:
            return plant.fertilizingFrequency
        default:
            return 0
        }
    }
    
    var body: some View {
        Section(header: Text("\(task.name) frequency in days"), content: {
            CustomCounter(value: value, increment: increment, decrement: decrement)
                .accessibilityElement()
                .accessibilityAdjustableAction { direction in
                    switch direction {
                    case .increment:
                        increment()
                    case .decrement:
                        decrement()
                    default:
                        break
                    }
                }
                .accessibilityLabel("\(task.name) frequency")
                .accessibilityValue("\(value) days")
        })
    }
}

19:50 - Make static element focusable

struct FreeDrinkView: View {
    @State var didCancel = false
    @State var didAccept = false
    @State var showDetail = false
    
    var body: some View {
        VStack(spacing:10) {
            FreeDrinkTitleView()
            
            FreeDrinkInfoView()
                .accessibilityRespondsToUserInteraction(true)
            
            HStack {
                CancelButton(buttonTapped: $didCancel)
                AcceptButton(buttonTapped: $didAccept)
            }
        }
        .onTapGesture {
            showDetail.toggle()
        }
        .sheet(isPresented: $showDetail, onDismiss: dismiss) {
            DrinkDetailModalView()
        }
    }
}

21:12 - AssistiveTouch cursor frame

struct DrinkView: View {
    var currentDrink:DrinkInfo
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            DrinkInfoView(drink:currentDrink)
            
            Spacer()
            
            NavigationLink(destination: EditView()) {
                Image(systemName: "ellipsis")
                    .symbolVariant(.circle)
            }
            .contentShape(Circle().scale(1.5))
        }
    }
}

22:48 - AssistiveTouch Action Menu

PlantContainerView(plant: plant)
    .padding()
    .accessibilityElement(children: .combine)
    .accessibilityAction {
        // Edit action
    } label: {
        Label("Edit", systemImage: "ellipsis.circle")
    }

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

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

リソース

関連ビデオ

WWDC21

WWDC20

WWDC19