カスタムコントロールのアクセシビリティの向上

カスタムコントロールのアクセシビリティの向上

あらゆるユーザーが利用できるようにすることで、アプリのインタラクティブ要素の可能性を最大限に引き出すことができます。VoiceOverやその他の支援技術が、ユーザーによるコントロールの理解と操作をどのようにサポートするかについての詳しい解説を通じ、アクションやパススルージェスチャ、直接のタッチなど多様な入力方法を確認します。また、サンプルのコントロールをいくつかお見せして、それぞれをより洗練させてアクセシビリティ体験を向上させる方法を詳細に説明します。

関連する章
- 0:01 - Introduction
- 1:02 - Guiding principles
- 8:41 - Complex controls
リソース
関連ビデオ

WWDC24
- SwiftUIにおけるアクセシビリティの最新情報
こんにちは Khinですアクセシビリティチームのソフトウェアエンジニアです。
カスタムUIコントロールはユーザーがアプリで独自の操作を行えるようにします。ジェスチャを使用して標準コントロールを超えたインタラクションが可能になります。 Appleではテクノロジーはすべての人に機能するときに最大の力を発揮すると考えています。それは支援技術を使用している人々にも優れた体験を提供することを意味します。 VoiceOver、スイッチコントロールなどです。コントロールをアクセシブルにすることですべての人がアプリの機能にアクセスできるようになります。このセッションではアプリ内のあらゆるコントロールをアクセシブルにする方法を探ります。まず使用できるいくつかの指針となる原則について説明します。次にそれらがいくつかの複雑なコントロールにどう適用されるかを示します。
では指針となる原則について話しましょう。このスライダを考えてみてください。 SwiftUIの標準スライダです。初めて見たとしても外観からすでに多くのことがわかるかもしれません。トラックとその上にハンドルがあります。ハンドルはトラックのほぼ中央にあります。ハンドルはつかんで動かせるように見えます。ドラッグして移動できます。この視覚情報からこのコントロールに関する多くの暗黙の手がかりを得られます。このコントロールが連続した値を表すことがわかります。現在の値も把握できます。この場合最大値の約半分です。値を変更するなどの操作に使用するジェスチャも識別できます。ハンドルはドラッグ可能に見えドラッグするとフィードバックは即座でトラックが塗りつぶされハンドルが動きます。何かが起きたという明確なフィードバックです。誰も説明する必要がありません。一目でわかります。脳は形状、位置、予想される動作を処理します。すべてが一瞬のうちに。それが視覚情報の持つ力です。では画面が見えない場合はどうでしょうか。トラック、ハンドル、位置そのいずれも認識できません。すべての人が視覚情報にアクセスできるわけではありません。そのため考慮することが重要です。支援技術を使用している人々がこれらのコントロールとどう操作するかを。
VoiceOverがこのスライダをどう説明するかを見てみましょう。 VoiceOverはAppleプラットフォームの組み込みスクリーンリーダーです。視覚に障害のある方やロービジョンの方がジェスチャでデバイスを操作できるようにします。「明るさ 50% 調整可能。」「1本の指で上下にスワイプして値を調整してください。」 VoiceOverを使用することでスライダが何を制御するかを理解できます。ラベルは「明るさ」と読み上げます。このコントロールには値があり現在50%に設定されていることも示します。どのような操作ができるかも明確です。「調整可能」と読み上げ値の調整方法のヒントを提供します。値が変化すると新しい値をリアルタイムで読み上げます。それがユーザーへのフィードバックです。 VoiceOverを使用している方は優れた体験を得られます。コントロールの視覚情報にアクセスできなくても。
コントロールの視覚的な形式から人々が得る情報を考えてください。それぞれを指針となる原則として活用しましょう。アクセシビリティ体験のための原則としてです。コントロールの目的が理解されるようにします。値を表す場合はその値を支援技術で利用できるようにします。どのような操作ができるかまたコントロールを使用したときにどのようなフィードバックが得られるかを明確にします。
別の例を見てみましょう。コーヒーメーカーアプリのカスタムコントロールです。朝によってはフルカップが必要なこともあります。半分だけの朝もあります。目覚ましで起きたか猫の鳴き声で起きたかによります。そこで 1つの簡単なジェスチャでコーヒーの量を制御できるアプリを作りました。上にドラッグでコーヒーを増やし下にドラッグで減らします。塗りつぶしレベルは抽出するオンス数を表します。現在このコントロールはアクセシビリティのための追加情報を提供していません。右にスワイプしてコントロールを選択すると VoiceOverは何をするかも値の変更方法も読み上げません。「設定。」「ボタン。」
「6オンス。」「カップを上下にドラッグ。」このコントロールの操作方法がまだ明確ではありません。でも大丈夫です。いくつかの簡単なステップで改善できます。そのために先ほど探った指針となる原則に立ち返ります。 CoffeeDispenserViewの実装を見てみましょう。現在はコーヒーレベルをStateとして宣言しスライダに渡しているだけです。まずスライダをアクセシビリティ要素としてマークします。明確な目的を与えるために accessibilityLabelモディファイアを使用して「Coffee Dispenser」と命名します。次に accessibilityValueモディファイアを使用して現在の塗りつぶしレベルを読み上げます。また VoiceOverがコーヒースライダを組み込みスライダと同じように調整できるようにします。このコントロールに同じインタラクションを追加します。まず .adjustableトレイトを追加します。これにより VoiceOverはこのコントロールがスワイプで調整できることを認識します。次に各スワイプの動作を定義します。 .accessibilityAdjustableActionモディファイアを使用して。クロージャはdirectionパラメータを提供します。 .incrementまたは.decrementです。クロージャは各ケースを処理する必要があります。
これらの変更により新しいVoiceOver体験を見てみましょう。右にスワイプしてコントロールを選択し上下にスワイプしてコーヒーの量を調整します。「Coffee dispenser 6オンス調整可能。」「1本の指で上下にスワイプして値を調整してください。」
「7オンス。」「8オンス。」「7オンス。」「6オンス。」 VoiceOverを使用して1オンス単位でコーヒーレベルを調整できるようになりました。
でも 0.5オンス単位で調整したい場合はどうでしょうか。正確な制御のために VoiceOverにはパススルージェスチャと呼ばれる組み込み機能があります。
パススルージェスチャを実行するには VoiceOverを使用している方がダブルタップして長押しでアクティブにします。ジェスチャはコントロールの accessibilityActivationPointから開始します。指が動くと VoiceOverはタッチイベントを直接コントロールに送信します。これにより値をより正確に細かく制御できます。コーヒースライダの場合アクセシビリティアクティベーションポイントはデフォルトで中央にあります。現在の塗りつぶしレベルに合わせて設定します。これによりジェスチャは常にコーヒーレベルの位置から開始しどちらの方向にも調整する余裕が生まれます。
パススルージェスチャ中にフィードバックを提供することも重要です。そのために値が変化したときにアクセシビリティアナウンスを送信します。ただし毎回ではありません。それだと煩わしくなります。代わりに最後に読み上げた内容とその時刻を追跡します。値が実際に変化し少なくとも0.3秒が経過していれば読み上げます。それ以外はスキップします。これにより VoiceOverを使用している方は意味のある更新を聞けます。
ではダブルタップして長押しし指を上に動かしてパススルージェスチャを試しコーヒーレベルを9.5オンスまで増やします。「Coffee dispenser 6オンス調整可能。」「1本の指で上下にスワイプして値を調整してください。」
「6... 6.4オンス。」「6... 6... 7... 7... 8.3オン... 8.4オンス。」「8.5オン... 8.6オンス。」「8.7オンス。」「8.8オン... 9... 9.5オンス。」
素晴らしいです。コントロールがドラッグ可能になり意味のある更新を提供します。この体験は先ほど共有した指針となる原則を実現しています。ラベル、値、アクション、アナウンスを備えています。
基本的なカスタムコントロールを探ったのでより複雑な例をいくつか見てみましょう。 iOSで私のお気に入りの機能の1つをご紹介します。「バックグラウンドサウンド」です。雨や波の音などのアンビエントオーディオを再生して集中してリラックスするのに役立ちます。アクセシビリティ設定からすぐに見つけられます。設定の中にはイコライザコントロールがあります。 2次元パッドです。中央のハンドルを表面上の任意の場所に動かせます。このパッドには2つの次元があり動かすことで音のトーンを調整できます。視覚的には各軸に周波数と振幅のシンボルがあります。ハンドルをつかむと実際に探索できます。 2つの値の空間を同時に。スライダでは adjustableトレイトが 2つのアクションを提供します。 incrementとdecrement 単一軸上で。しかしこのコントロールには 2つの軸があります。水平と垂直です。 adjustableトレイトを追加すると 1方向しかカバーできないため理想的な解決策ではありません。ここでカスタムアクションが役に立ちます。カスタムアクションを使用するとコントロールの一般的な操作を公開できます。各アクションにはVoiceOverが読み上げるラベルがあります。そしてアクティブ化時に実行されるクロージャがあります。 adjustableアクションとは異なりカスタムアクションは定義した任意の操作をサポートします。単一軸に限定されません。このイコライザパッドではカスタムアクションをこのように追加します。イコライザパッドビューで accessibilityActionモディファイアを 4回追加します。各アクションに説明的な名前があります。「上に移動」「右に移動」「下に移動」「左に移動」。それぞれが固定ステップで単一軸を移動します。この範囲内に制限されます。これらのアクションにより空間を探索することが可能になります。支援技術を使用している方がすでに慣れ親しんだアクションを実行するだけで。
カスタムアクションを使用したイコライザパッドの体験です。上下にスワイプしてアクションを選択しダブルタップで実行します。「フィルタチャート周波数0 振幅10。」「ダブルタップして長押ししドラッグしてフィルタを調整。」「チャート軸の範囲は -100から100に設定されています。」「上下にスワイプしてカスタムアクションを選択。」「ダブルタップでアクティブ化。」「下に移動。」「上に移動。」「右に移動。」「左に移動。」「右に移動。」「上に移動。」「周波数0 振幅20。」「周波数0 振幅30。」「周波数0 振幅40。」
アクションを通じて 2D空間をナビゲートでき音そのものが明確なフィードバックを提供します。
イコライザパッドはプラットフォームが自身の体験に指針となる原則をどう適用するかの良い例です。次に私が取り組んできたアプリをご紹介します。独自のカスタムコントロールを備えています。私と同じようにペットが大好きな方なら仕事中に寂しくなることがあるでしょう。日中も一緒にいられるように猫と遊べるアプリを作りました。画面から直接。なでるとゴロゴロ鳴きます。タップするとニャーと鳴きます。ピンチすると猫なのでシャーッと返ってきます。まさに本物そっくりです。このコントロールのアクセシビリティサポートはまだ追加していません。 VoiceOverでデフォルトの体験を確認します。「Cat fill スペース画像。」「猫に触れて操作。」画面上の画像とだけ読み上げます。なでる、タップする、ピンチするはこのコントロールがサポートするしかし VoiceOverはそれらの存在を知りません。
ゴロゴロ鳴く、こねこね踏む、怒ったニャーという鳴き声もすべてそこにあります。支援技術を使用している人々と共有されるのを待ちながら。 VirtualCatはインタラクティブな猫の表面を含むSwiftUIビューです。コントロールの目的を表現するために「Virtual Cat」と読み上げるアクセシビリティラベルを追加します。次にアクセシビリティバリューを猫の現在の反応に設定します。次に猫との操作に使うジェスチャを VoiceOverに伝える方法が必要です。パススルージェスチャも使えますがここでは最適ではないかもしれません。例えば同じ操作を何度も繰り返したい場合や複数のジェスチャを使いたい場合があります。そこでこのコントロールにはダイレクトタッチを使用します。ダイレクトタッチAPIは画面の領域をダイレクトタッチエリアとしてマークします。 allowsDirectInteractionトレイトを追加するとタッチイベントがコントロールに直接渡されます。 VoiceOverによって処理されるのではなく。これによりコントロールを直接操作できます。サポートされているすべてのジェスチャを使用できます。ダイレクトタッチオプションでこの動作をカスタマイズできます。最初のオプションは .requiresActivationです。設定するとコントロールはダイレクトタッチに反応しません。ダブルタップするまで。これにより画面上で指をドラッグしても誤ってアクティブ化することがありません。パススルージェスチャとは異なりダイレクトタッチはアクティブな状態を保ちます。フォーカスが別の要素に移るまで。もう1つのオプションは .silentOnTouchです。設定すると VoiceOverは完全に無音になります。誰かがエリアを触れているとき。独自のオーディオフィードバックを提供するコントロール向けです。 VoiceOverの音声がコントロール自体の音声にかぶってしまう場合に使います。このコントロールをインタラクティブにするために .accessibilityDirectTouchモディファイアを .requiresActivationオプションで追加します。
ダイレクトタッチジェスチャが実行できない方もいることに注意してください。可能な限りコントロールを操作する他の方法も公開するようにしましょう。例えばカスタムアクションを使用するなどです。
VoiceOverでの更新された体験を見てみましょう。ダブルタップしてダイレクトタッチをアクティブにし猫をなでる、タップする、ピンチするを試します。
「Virtual cat 眠っています。」「アクティブ化してダイレクトタッチ操作を開始。」「アクション利用可能。」
「Virtual cat。」「眠っています。」
これらの変更により VoiceOverを使用している方はコントロールの説明とダイレクトタッチのジェスチャを知ることができます。操作からフィードバックも得られます。これによりこのアプリの魅力のすべてを支援技術を使用している人々にも届けられます。
独自のカスタムインタラクティブコントロールをすべての人にアクセシブルにしましょう。 VoiceOverをオンにしてアプリを開き改善の機会を見つけましょう。カスタムコントロールを構築する際は人々がコントロールの目的、値、アクション、フィードバックを理解できるか考えてください。コントロールがジェスチャに依存する場合はダイレクトタッチを検討してください。パススルーが最適でないジェスチャの場合可能な限りカスタムアクションを提供しましょう。これによりスイッチコントロール、 Voice Controlを使用している方もその他の支援技術を使用している人々も同じ操作にアクセスできます。ご視聴ありがとうございました。

5:01 - Improve accessibility for coffee dispenser

// Improve accessibility for coffee dispenser

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityElement()
            .accessibilityLabel("Coffee Dispenser")
            .accessibilityValue("\(Int(coffee)) ounces")
            .accessibilityAddTraits(.adjustable)
            .accessibilityAdjustableAction { direction in
                switch direction {
                case .increment:
                    increaseCoffeeAmount()
                case .decrement:
                    decreaseCoffeeAmount()
                }
            }
    }
}

7:05 - Set the accessibility activation point

// Set the accessibility activation point
import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0

    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityActivationPoint(
                UnitPoint(x: 0.5, y: 1 - coffee)
            )
    }
}

7:27 - Post accessibility announcements

// Post accessibility announcements 

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
  
    var body: some View {
        CoffeeSlider(value: coffee)
            // ...
            .onChange(of: coffee) { _, newValue in
                if sufficientTimeSinceLastAnnouncement() && valueHasChanged() {
                    cacheLastSpokenValue(newValue)
                    AccessibilityNotification
                        .Announcement(newValue)
                        .post()
                }
            }
    }
}

10:13 - Add custom actions

// Add custom actions

import SwiftUI
                                                          
struct EqualizerView: View {
    var body: some View {
        EqualizerPad()
            .accessibilityActions("Move Up") {
                increaseY(by: 10)
            }
            .accessibilityActions("Move Right") {
                increaseX(by: 10)
            }
            .accessibilityActions("Move Down") {
                decreaseY(by: 10)
            }
            .accessibilityActions("Move Left") {
                decreaseX(by: 10)
            }
     }
 }

12:47 - Customize accessibility for the interactive cat surface

// Customize accessibility for the interactive cat surface

import SwiftUI

struct VirtualCat: View {
    var cat: CatModel
    var body: some View {
        InteractiveCatSurface()
            .accessibilityLabel("Virtual Cat")
            .accessibilityValue(cat.currentReaction.description)
            .accessibilityDirectTouch([.requiresActivation])
     }
}

- 0:01 - Introduction
- Why custom controls need accessibility support so everyone can use what your app was built to do, and what the session covers — guiding principles and how to apply them to complex controls.
- 1:02 - Guiding principles
- Create accessible custom controls by translating implicit visual cues into explicit information for assistive technologies. Apply labels, values, traits, and actions to ensure these controls are universally understood and actionable by everyone.
- 8:41 - Complex controls
- Complex controls, like multi-dimensional pads and highly interactive virtual surfaces, demand advanced accessibility techniques beyond basic labels and values. Implementing features like passthrough gestures, custom actions, and the Direct Touch API allows people to seamlessly navigate and interact with these interfaces.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

関連する章

リソース

関連ビデオ

WWDC24