SwiftUIにおけるアクセシビリティの最新情報

SwiftUIにおけるアクセシビリティの最新情報

SwiftUIを使用すると、高品質で、あらゆる人がアクセスしやすいアプリ体験をより簡単に構築できます。このセッションでは、SwiftUIが提供する充実したアクセシビリティ要素を通じて、補助機能のテクノロジーがどのようにアプリを理解してナビゲートするかについて説明します。また、アクセシビリティの修飾子を使用して、アプリのコンテンツとインタラクションに関するより多くの情報を提供し、ユーザーの利用体験をさらにカスタマイズする方法も取り上げます。

関連する章
- 0:00 - Introduction
- 0:58 - Fundamentals
- 9:01 - View accessibility
- 16:28 - Enhanced interactions
リソース
ダウンロード

こんにちはアクセシビリティチームエンジニアのTommyです優れたアプリにはアクセシビリティが欠かせませんその体験を通じて誰もが創造性を発揮しつながり楽しめるようにするためです SwiftUIはすべてのAppleプラットフォームでこうした体験の実現を可能にします今日はSwiftUIに組み込まれているすぐに使えるアクセシビリティ機能とアプリのアクセシビリティの調整や作成に役立つツールを紹介します
次に SwiftUIに詳しい情報を提供してビューのアクセシビリティを改善するべき場所について説明します
最後にタップドラッグドロップなどのアクセシブルでリッチな操作のビルド方法を紹介します
SwiftUIは組み込みビューのアクセシビリティに対応してゼロから設計されておりアクセシビリティ技術への情報の追加やアプリ体験の調整が容易です私は海を訪れた時の楽しい思い出を共有するためのアプリを SwiftUIで開発していますこのアプリでは海の美しい景色を伝えるメッセージを送ることができますタップするだけで位置情報を追加したり波の音を録音したり評価を入力できるのです誰でも旅行についてコメントできてお気に入りへの追加やメッセージへの返信も可能です
返信相手に応じてカスタムサウンドを作成することもできます
ではここで SwiftUIを使ってこれらの機能をアクセシブルにする方法を見てみましょう SwiftUIはアクセシビリティ要素をプライマリ出力の1つとして作成しますアクセシビリティ要素はアプリのコンテンツをユーザーに届けるための基本的な構成要素であり VoiceOver 音声コントロールスイッチコントロールなどの技術に使用されていますアクセシビリティ要素とは 1つ以上のビューのことですビューの内容を説明する属性とビューを操作するためのタップや複雑な仕草などのアクションを提供します
VoiceOverなどのアクセシビリティ技術は要素を通じてのみアプリとやり取りするのでビューから提供され要素に含まれているコンテンツだけにアクセスできます
これはトグルビューです私が投稿した旅行に友だちからのコメントを許可するかどうか設定できます
トグルはビュー本文で宣言されており SwiftUIはこれを使って出力を形成します例えば画面の表示内容やアクセシビリティ要素についてなどです
アクセシビリティ要素では Commentsラベルを使って要素のラベルを作成します適用される特性は isToggleとisSelectedです設定の切替には pressアクションを使用します
VoiceOverがこのトグルにフォーカスすると要素が説明されダブルタップすることで pressアクションを実行できます「設定見出しコメント切り替えボタンオフオン」
SwiftUIはテキストとトグルを組み合わせて単一の要素に落とし込みます複数のビューを単一の要素で表すことによりナビゲーションを簡素化して関連情報をつなぎ合わせることができますアプリにあわせてトグルの見た目や印象をカスタマイズする場合は要素の属性とアクションを保存することが重要です SwiftUIの強力なビュースタイリングシステムは組み込みのアクセシビリティ機能を失わずにビューの外観を変更できます
属性とアクションはビューの見た目やスタイルが変更されても適用されます
トグルスタイルの修飾子（モディファイア）でスタイルを変更するとトグルの見た目が変わりますが要素のラベルと特性は保持されます
カスタムトグルがタップされると要素の属性にトグルの新しい状態が反映されます
ビューのスタイルはボタンやトグルのほかラベルやラベル付きコンテンツなどのグループ進捗ビューやゲージなどのインジケータを含め様々なコントロールでサポートされています可能な限りカスタムビューではなくスタイリングシステムを使用してくださいそうしないと自動的に付与されたアクセシビリティプロパティを再適用することになりますスタイルと組み込みビューによりアプリのアクセシビリティの体験が向上しますしかしより多くのアクセシビリティ情報を SwiftUIに渡すことができれば体験はさらに改善されますこの情報はアクセシビリティ修飾子を使って提供できます
アクセシビリティ修飾子によりアクセシビリティ要素によるビューの表示方法をカスタマイズできますラベルや特性のような属性もビューに追加できますカスタムジェスチャなどの操作用アクションも公開できます
さらに複数のビューを組み合わせて単一の要素を構成しナビゲーションを向上させることもできます
修飾子を使用してビューのアクセシビリティをカスタマイズする前に VoiceOverなどを使用して改善の余地があるアプリ体験を見つけることをお勧めします
このアプリでVoiceOverを使って最近の海への旅行を確認し改善点を見つけましょう
「週末の冒険見出し」「土曜日素敵な週末でした波は静かで太陽は橋の上で輝き空には雲ひとつありませんでした画像」「いい旅でしたねお気に入りボタン返信ボタン Nick」
「本当にきれいお気に入りボタン返信ボタン Jack」
SwiftUIで優れたアプリ体験を作成できたようです VoiceOverはすべてのコンテンツを読み上げ見出しのインジケータやボタンなども調整されていました気づいた改善点が3つありましたまずコメントセクションを読み上げる際要素が多いため時間がかかりました各コメントとボタンのつながりもわかりづらく混乱しました VoiceOverに読み上げられなかったビューもありましたたとえば未読インジケータなどですそれではこの体験をより良くしていきましょう
これはコメントビューです横方向に配置された要素はコメントのメッセージ未読インジケータお気に入りボタン返信ボタンを表しています SwiftUIはこのビューに 3つの要素を作成しますタイトルに1つとアクションのボタンに2つですスタックとスペーサビューは要素ではなくただビューのレイアウトを調整するだけですデフォルトでは未読インジケータはシェイプビューとされておりアクセシビリティ要素ではありません最初に未読状態を説明するラベルを追加しましょう
最初にアクセシビリティラベル修飾子はデフォルトでは存在しないインジケータ用の要素を作成してからラベルを未読に設定します
インジケータビューが未読のときも要素は常にアクセシビリティの技術で可視化されますコメントを読むときも SwiftUIが役立ちますコメントが読まれるとインジケータの不透明度がゼロになって見えなくなりますアクセシビリティ技術からエレメントを自動的に隠すことも SwiftUIなら可能です
コメントビューの移動を簡易化するために各スタックを単一の要素にして各ボタンを要素のアクションにできますアクセシビリティ要素である children combine修飾子を適用することで複数の要素の属性とアクションが結合されます
要素のラベルはすべてのビューを組み合わせたラベルになります重要な特性は結合されボタン等のコントロールからのアクションはカスタムアクションになりますこれで単一の要素がメッセージ未読状態アクションを表すようになりコメントの確認がずっと簡単になりました再び各コメントを VoiceOverで確認すると理解しやすくなっています「未読いい旅でしたね Nick ボタン」「お気に入り返信」
SwiftUIのおかげでアクセシビリティが大幅に向上しましたがコンテキストに沿った情報をもっと提供することでコンテンツを網羅した楽しい体験を提供できるようになります海の旅行に関するメッセージは改善できましたが友達のコメントにもう少し手を入れましょう
私のアプリではお気に入りのコメントをダブルタップすると「特にお気に入り」になりますすると新しいマークが付いてそのコメントの価値を示すのですがこの変更で新たな問題が発生します先ほどまでは組み合わせたアクションでお気に入りを適切にラベリングできていたのに今回はVoiceOverが記号を読み上げています「未読本当にきれい Jack ボタン」
「お気に入り」「返信」「未読日焼け止めは塗っていた？ Beth ボタン」
「きらきら返信」
通常ビューで記号を使うと星や矢印などのデフォルトのラベルが使用され意味も推測される場合があります他の記号を使う場合は念のためにラベルを名前として明示的に追加しておく必要がありますデフォルトのラベルを使う場合でもアクセシビリティ技術を使用したときにインターフェイスを正確に説明できているか注意しましょう「特にお気に入り」の場合光の記号のラベルを正しく更新する必要があります
アクセシビリティラベルを修飾子で追加すると「特にお気に入り」でないメッセージに適用されたときにデフォルトの正しいSwiftUIを上書きしてしまいます
iOS 18ではisEnabledパラメータをアクセシビリティ修飾子に追加できますこの修飾子が有効になっていると属性がビューに適用されそうでなければこの修飾子は効果を発揮しません「特にお気に入り」ラベルはコメントが「特にお気に入り」になったときのみ適用され単なるお気に入りでは SwiftUIは星記号のデフォルトのラベルに戻りますこのようにSwiftUIはデフォルトで適切なアクセシビリティを実現しますが時には条件に応じてカスタマイズも必要です
アプリのコメントビューに戻ってみると「特にお気に入り」アクションが復活しラベルも問題ありません「未読日焼け止めは塗っていた？ Beth ボタン」「特にお気に入り返信」
ラベルなどの情報が欠落しているなら必ず追加するべきですが到達までに複数の操作が必要な情報にアクセシビリティ技術でもっと簡単にアクセスさせられればアプリの使用体験はさらに向上しますこれらの改善はホバーキー押下ジェスチャによってビューが動的に表示される場合に特に役立ちます私はアプリをmacOSで動かすつもりだったのでホバーで旅行の追加情報を表示させようとしました
旅行の画像のビューにカーソルを置くと場所記録海の評価などの添付ボタンが表示されますこれで画面がすっきりしてきれいな海の写真に集中できますが添付情報のアクセシビリティについて数点考慮する必要がありますホバー可能なビューなどの動的に表示されるコンテンツはアクセシビリティ技術やキーボードスイッチなどの接触型の入力手段からアクセスするのに時間がかかることがあります
カーソルを動かしてビューを表示し操作するだけなら数秒しかかかりません
しかしVoiceOverでは多くのステップを踏む必要がありますホバー可能なビューに注目しコマンドでホバー機能を起動しビューが表示されたらサブビューに移動し操作に注目したらそのあとで元のビューに戻る必要があります
この操作はホバー可能なビューのアクセシビリティの属性とアクションをメインビューの一部として追加することで簡略化できます
記録や場所を添付しない旅行も多いでしょうから旅行に追加するアクションまたはラベルの正確な数は変動します SwiftUIのアクセシビリティ修飾子はこのようなときに便利ですアクションから始めましょう
これは旅行のビューのホバー可能なオーバーレイですコントロールにアクセスしやすくするためこれらをカスタムアクションとして作り変えます
アクセシビリティのアクション修飾子により添付情報にも同じビューを指定しますコントロールを抽出して旅行のビューのカスタムアクションに作り変えるのですこれで旅行のビューのオーバーレイとカスタムアクションのロジックが同じになりましたこの変更により VoiceOverは現在のオーバーレイを示さなくても各添付情報を示せるようになります
「土曜日素敵な週末でした波は静かで太陽は橋の上で輝き空には雲ひとつありませんでした画像」「アクションメニュー 2つのアイテム場所記録」
さて海の評価についての情報が抜けているようです評価はホバーで表示されますが重要な情報なので旅行のアクセシビリティ要素でももっと目立たせたいですね
重要な情報を出すのに複数の操作が必要な場合はその情報を要素に追加して表示されていなくても移動しやすくするという選択肢があります複数の要素を組み合わせるなどで要素の属性を修正したのならコンテンツを象徴する装飾ビューでコンテンツを追加するとよいでしょう
どちらの場合も動的なコンテンツを含むビューのラベルを修正する必要があります SwiftUIにはこれらの処理に対応したツールがあります
それでは旅行の要素ラベルに評価を追加して読み上げ時に見つけやすくしましょう
普通のラベル修飾子では SwiftUIが要素に提供した説明内容が消えてしまいますまた評価の表示頻度は低いので今回は一部のメッセージにのみ評価の情報を入れ込むだけとします
アクセシビリティラベル修飾子はビューにも使うことができビューのテキストを抽出して旅行の要素ラベルに設定しますプレースホルダもビューの既存のラベルに設定できるので旅行の評価を SwiftUIが旅行の要素用に作成した既存のラベルに統合できます
評価と旅行の投稿が単一のラベルになったので旅行のビューではVoiceOverの読み上げが適切に行われています「星半分土曜日素敵な週末でした波は静かで太陽は橋の上で輝き空には雲ひとつありませんでした画像」
良さそうですねホバーはAPIのユースケースとしては初歩的なものですコンテンツの変更内容は必ずVoiceOverなどの技術からアクセス可能にしましょう
アプリの操作性を設計するときはタッチ操作やマウス以外の入力の快適性にも配慮を忘れないでください
インタラクションの中でも特に一般的に使用されているのがドラッグ＆ドロップです
VoiceOver 音声コントロールなどの技術はこれにも対応しており SwiftUIではこのような体験を「on drag」「on drop」修飾子でサポートしています
ドラッグ＆ドロップは柔軟に設計できるため複数の方法でアプリ体験を強化できますこのアプリではコメントのカスタム通知をドラッグ＆ドロップで作成できます VoiceOverで試してみましょう 1人あたり最大3つまでサウンドをドラッグして通知を作成できますカスタムドロップデリゲートで複数のドロップポイントを単一ビューに配置しているので VoiceOverは音をドロップできる場所を知りません「シンセドラッグ可能」「ドラッグ」
「拍手ドラッグ可能通知音なし」
「ドロップドロップ準備」「ドロップ完了」
accessibilityDropPoint修飾子はビュー上でドラッグ＆ドロップ操作が可能な場所を定義しますコメント通知ビューには3つのドロップポイントが定義されておりアラートに設定できる3つのサウンドを説明しています各ポイントには実行される操作を説明するためのラベルも存在しますこれでVoiceOverが通知ビューの各ドロップポイントにアクセスできます「シンセドラッグ可能」「ドラッグ」
「拍手ドラッグ可能通知ベル鳥」「ドロップドロップ準備サウンド3を設定ドロップ準備」
「ドロップ完了」
体験が改善されたのでアプリ内でサウンドをすばやく対象にドラッグできるようになりました
ドラッグ＆ドロップ体験を構築するときはアクセシビリティ技術上でも問題なく動作するか必ず確かめることが重要ですドラッグ＆ドロップにカスタムアクションを設定してドラッグに目的地やアクションを設定するのも良いでしょう
複数のポイントで複数の操作をサポートしている要素であれば各ポイントがアクセシビリティ技術に公開されているか確認してください操作はアプリの外部の操作ウィジェットに及ぶこともありますウィジェットのビューは更新速度が遅いのでアクセシビリティアクションの修飾子が機能しません App Intentを使用するとウィジェットでボタンやトグルなどの操作ビューを作成できますがこのウィジェット体験もカスタムアクションを追加することで改善できます私は新しいウィジェットをアプリに追加して行きたい海の評価と投稿をすぐに実行できるようにしましたタップするだけでお気に入りの海の評価の更新もできます各ボタンはSwiftUIでラベル付けされており VoiceOverで起動できます
これは海のビューです投稿と評価のための操作ボタンが3つありますカスタムアクションでこのウィジェットの重要機能の使用感をさらに改善しましょう
アクセシビリティアクション修飾子で App Intentが許可されていますこれが起動するとウィジェットのインテントと更新が実行されます
カスタムアクションを追加して海をお気に入りに登録しました magicTapアクションによりダブルタップで写真も撮れます
これらの変更によりお気に入りの海がマーキングされリストのトップに移動します「ファンストンビーチ評価なしボタン」「ベイカービーチ評価なしボタン」「お気に入り」
「ベイカービーチお気に入りボタン」今回はアプリのアクセシビリティの実現方法を解説しましたアプリを作成する際は VoiceOverなどの技術をお忘れなくアプリ体験が一層向上するようなアクセシビリティAPIの使い所を探ってみてくださいそしてアクセシビリティのサンプルプロジェクトでアクセシビリティAPIの使い方を確認し SwiftUIの一般的なパターンを調整できるようにしましょうチーム一同皆さんのアプリの素晴らしいアクセシビリティを楽しみにしていますありがとうございました

7:27 - Accessibility Label Modifier & Opacity

struct UnreadIndicatorView: View {
    var isUnread: Bool

    var body: some View {
        Circle()
            .foregroundStyle(.blue)
            .accessibilityLabel("Unread")
            .opacity(isUnread ? 1 : 0)
    }
}

8:02 - Accessibility Element Children Combine Modifier

var body: some View {
    HStack {
        UnreadIndicatorView(isUnread: message.isUnread)
        MessageContentsView(message: message)
        Spacer()
        Button(action: favorite) { favoriteLabel }
        Button(action: reply) { replyLabel }
    }
    .accessibilityElement(children: .combine)
}

10:37 - Accessibility Conditional Modifiers

var body: some View {
    Button(action: favorite) {
        Image(systemName: isSuperFavorite ? "sparkles" : "star.fill")
    }
    .accessibilityLabel("Super Favorite", isEnabled: isSuperFavorite)
}

13:38 - Accessibility Actions Modifier

var body: some View {
    TripView(trip: trip)
        .onHover { showAttachments = $0 }
        .overlay {
            MessageAttachments(attachments: trip.attachments)
                .opacity(showAttachments ? 1 : 0)
        }
        .accessibilityActions {
             MessageAttachments(attachments: trip.attachments)
        }
}

15:16 - Accessibility Label Modifier

var body: some View {
  TripView(trip: trip)
      .accessibilityLabel { label in
         if let rating = trip.rating {
            Text(rating)
         }
         label
      }
}

17:42 - Accessibility Drop Point Modifier

var body: some View {
    CommentAlertView(contact: contact)
        .onDrop(of: [.audio], delegate: delegate)
        .accessibilityDropPoint(.leading, description: "Set Sound 1")
        .accessibilityDropPoint(.center, description: "Set Sound 2")
        .accessibilityDropPoint(.trailing, description: "Set Sound 3")
}

19:45 - Accessibility App Intent Action Modifier

var body: some View {
    ForEach(beaches) { beach in
        BeachView(beach)
            .accessibilityAction(
                named: "Favorite",
                intent: ToggleRatingIntent(beach: beach, rating: .fullStar))
            .accessibilityAction(
                .magicTap,
                intent: ComposeIntent(type: .photo))
    }
}

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

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

関連する章

リソース