SwiftUIのアクセシビリティ: 基礎を超えて

SwiftUIのアクセシビリティ: 基礎を超えて

基礎を超えたレベルに進んで、卓越したアクセシビリティ体験を提供しましょう。Xcodeの新しいSwiftUIプレビューを使用して、最新のアクセシビリティAPIを試してみて、あらゆるユーザが利用できる素晴らしいAppを作成する方法を確認しましょう。SwiftUIに組み込まれた自動アクセシビリティをカスタマイズして、独自のカスタムコントロールを利用可能にする方法を紹介します。ベストプラクティスを検証し、グループピングとフォーカスを使用してAppのナビゲーション体験の改善箇所を明らかにします。また、ローターを追加することで、VoiceOverユーザのためのナビゲーションを強化します。

リソース
関連ビデオ

WWDC23
- アクセシブルな空間体験の実現
WWDC21
WWDC20
- カスタムローターを使ったVoiceOverの効率性
ダウンロード

♪ (SwiftUIのアクセシビリティ: 基礎を超えて) こんにちは WWDCへようこそ！私はNathanといいます Accessibilityチームのエンジニアをしています今日は基本を超えて優れたアクセシブルな SwiftUI Appを提供する方法について学びます今年は SwiftUIのアクセシビリティが大きく飛躍した年です Appleではアクセシビリティはコアバリューの1つですすべてのプラットフォームに搭載されているAppleの支援技術は身体的視覚的聴覚的運動的な障害の有無にかかわらず誰もがAppを利用できるようにします私と私のチームはAppのほとんどがデフォルトでアクセス可能であるように取り組んでいますが経験をより豊かにするためにできることは常にありますこの体験を簡単に豊かにする SwiftUIの新しいツールとAPIをご紹介しますまずは Xcodeにおけるツールの改善から始めましょう SwiftUIのプレビューは私達の Appの開発方法を変えました Appを実行しなくても複数の環境でビューを反復する能力が劇的に向上します最も重要なアクセシビリティ修飾子をクリックするだけで表示できるようにアクセシビリティエディタの厳選されたリストを追加しましたこれで全ての人が常に自分のビューにアクセスできるようになるといいですねしかしそれだけではありませんアクセシビリティ修飾子はプレビューでは視覚的な変更がないため Xcodeを離れることなくビューのアクセシビリティを検査できる新しいツールが開発されましたエディターパネルから新しいアクセシビリティパネルに切り替えてみましょう Xcode 13で出荷されるSwiftUIプレビューには「アクセシビリティプレビュー」が搭載されますこれによりプレビューのアクセシビリティ要素をリアルタイムで検査することができますこれはゲームチェンジャーですアクセシビリティプレビューは各支援技術を深く理解していなくても優れたアクセシビリティAppを作成するのに役立ちますアクセシビリティプレビューにどのように反映されるのかさらに詳しく見てみましょう先ほどの景色を簡略化したものですプレビューを実行した後VStackを選択するとアクセシビリティプレビューが更新され要素がソートされた順番に表示されます各要素にはラベルや特性などの基本的なプロパティが常に表示されることに注意してください例えば「テキスト」ビューでは文字列をラベルとするアクセシビリティ要素が作成されますまた .isStaticTextトレイトも得られます isHeaderトレイトの追加などアクセシビリティに変更を加えた場合はプレビューが更新されますまた SF Symbolsラベルの自動化など舞台裏で行われている自動アクセシビリティの一部を確認することができます例えば checkmark.seal.fillシンボルはデフォルトでは「検証済み」と表示されていますシンボルのデフォルトラベルに依存している場合それがインターフェイスを正確に表現しているかを確認することが重要です引き続きアクセシビリティプレビューを使用して Appの全てのユーザーに優れた体験を提供するために重要な５つの分野について説明しますまずカスタムコントロールをアクセシブルにするための最良の方法を検討します次に子供でもアクセスできるビューを作る方法について説明します一般的なナビゲーションの問題を Appで監査する方法とアクセシビリティプレビューがどのように役立つかをご紹介します次に VoiceOverのローターを使ってAppのナビゲーションを強化する方法をご紹介しますそして最後にフォーカスとそれが支援技術とどのように関連しているかを見ていきます私は「Wallet Pal」という新しい金融Appのプロトタイプを作っていますまだ初期段階ですが今のところ初期の設計にはかなり満足していますベータテスターにも気に入ってもらえたようで喜んでいますさて UIに磨きをかけたところで今度はアクセシビリティインターフェイスを磨くことにも時間をかける必要がありますアクセシビリティインターフェイスは誰もが使いやすいように視覚的な体験を補完するものです VoiceOverをお使いの方にWallet Palのテストをお願いしたところ Appの操作が難しく完全にアクセスできないという意見をもらいました VoiceOverに対応していない部分は他の支援技術にも対応していないことになります誰もがWallet Palを使えるようにすることが重要なのでどこを改善できるか調査してみましょうまずはユーザーからの Wallet Palの重要な機能である予算の編集ができないという報告から始めますこれは予算プランナーのビューでユーザーは食費娯楽費貯蓄の予算を編集できます Wallet Palの設計に合わせてカスタムスライダを作成する必要がありましたそのためシェイプで予算スライダーを作成しドラッグジェスチャーで操作することにしました SwiftUIのシェイプを使用すると魅力的でユニークなビューを簡単につくることができますがデフォルトではアクセスできないため予算スライダーもアクセスできませんこれが一部のユーザーが予算を編集できない理由でしょう SwiftUIプレビューを実行しSliderShapeを選択することでアクセスできないことを確認できますアクセシビリティプレビューを見ると要素がないのでこのコントロールにはアクセスできません理想的には変更可能な値を持つラベル付きのアクセシビリティ要素が１つあればよいのです一方標準的なコントロールはデフォルトでアクセス可能ですつまり優れた体験を提供するための余分な努力は殆どありません SwiftUIはアクセシビリティ要素のラベル値特性アクションを自動的に導き出すためにビュータイプと初期化パラメータを使用しますではカスタム予算スライダーをアクセス可能にするにはどうすれば一番よいでしょうか？標準のスライダーはデフォルトでアクセス可能なのであるビューのアクセシビリティを別のビューで表現できるようなAPIがあればいいなと私たちのチームは考えましたこれがaccessibilityRepresentation(representation:)を作るきっかけとなりましたこれはあるビューのアクセシビリティを別のビューで定義することができるAPIですこれを支援技術によってスライダーとして認識させたいのでアクセシビリティの表現にはこれを使います accessibilityRepresentation(representation:)を使ってこの予算スライダーをアクセス可能にすることができましたスライダーの操作性を向上させるために必要な変更点は金額をドルで表記することだけですこれで予算スライダーに完全にアクセスできるようになりました macOSではVoiceOverを使っているユーザーにはコントロールの種類が音声で通知されますつまり BudgetSliderの表示にスライダービューを使うことでスライダーとしてアナウンスされるのですカスタムコントロールをアクセス可能にするためには可能な限り accessibilityRepresentation(representation:)を使用することを推奨しますその柔軟性によりより多くのクリエイティブな使い方が可能ですそれではこのAppを使って他のアクセシビリティのバグを修正できるかどうかを見てみましょう予算を編集する機能は修正されましたが１部のユーザーからは予算プランナービューへの移動方法が分からないという報告がありました Wallet Palを設計する際全てのボタンに SF Symbolsを使うことにしました SF Symbolsはデフォルトアクセシビリティラベルとしては優れていますが意図した使用例に適さない場合もあります問題がボタンのラベルの不備なのか調べてみましょう NavigationBarViewには「予算の編集」ボタンがありますたくさんのボタンにSF Symbolを使用しており SymbolButtonStyleというカスタムbuttonStyleを作りましたしかし「予算の編集」というラベルでボタンを初期化したにも関わらずラベルは slider.vertical.3になっているようですつまりアクセシビリティラベルは SF Symbolから派生しているのです SymbolButtonStyleを詳しく見てみましょう SymbolButtonStyle の makeBody(configuration:) メソッドはイメージビューを返しますボタンを初期化した「予算の編集」の文字列では構成のラベルとしてテキストビューが生成されますしかしこのスタイルでは構成のラベルを完全に無視しますボタンに「予算の編集」のラベルが付いていないのはこれが理由です SF Symbolを表示したいのですがボタンのアクセシビリティは構成のアクセシビリティで表したいのですというわけでこれは accessibilityRepresentation(representation:)の良いユースケースだと思われます accessibilityRepresentation(representation:)を使うとイメージビューのアクセシビリティを別のビューこの場合は構成のラベルで代用することができますこれでボタンを作成する際に使用したラベルを保持することができます accessibilityRepresentation(representation:)はカスタムコントロールをアクセス可能にするための理想的で推奨される方法であるだけでなくビューをアクセシブルにするための新しい創造的な可能性を開くものでもあります次に子とアクセシビリティコンテナの関係についてお話しましょう思い出すかもしれませんがアクセシビリティ要素はアクセシビリティコンテナの子としてグループにまとめられますこれにはaccessibilityElement(children:)修飾子と contain: ChildBehaviorが使われますよく分からない方のために説明すると contain: ChildBehaviorを使用すると既存のアクセシビリティ要素を子としてラップするアクセシビリティコンテナを作成することができますしかしアクセシビリティ要素があってその子を設定したい場合はどうすればよいのでしょうか予算履歴グラフをアクセスシブルにしようとするとこのようなケースに遭遇しますグラフに全くアクセスできないというユーザーの報告がありましたつまり支援技術が予算履歴のヘッダーに注目して次の要素に移動しようとすると Alertsのヘッダーにたどり着いてしまうということです VoiceOverユーザーはこのグラフの存在すら知らないでしょうグラフの作成には新しいビュー「Canvas」を使用しました Canvasを使うと図形の集まりを簡単に描くことができます詳細についてはどうやってCanvasでAppに豊富なグラフを追加するかについての Jacobのプレゼンをご覧くださいアクセシビリティの観点から最も重要なことは Canvasが図形の集まりを描画するということです BudgetSliderのように図形はデフォルトではアクセスできませんすべてのユーザが自分の予算の履歴を見る必要があるため誰でもアクセスできるようにしましょうまず基本的ですがCanvasにラベルを付けましょうこれにより Canvas用の新しいアクセシビリティ要素が自動的に作成されそのラベルが割り当てられます次にグラフの各バーをそれぞれのアクセシビリティ要素で表したいと思いますこれはアクセシビリティ要素があってその子を提供したい場合の使用例ですそのためには新しい accessibilityChildren(children:)修飾子を使いますこれでアクセシビリティ要素がアクセシビリティコンテナに変換されラベルなどの他のアクセシビリティプロパティが維持されますこの修飾子は ViewBuilderを受け取りアクセシビリティコンテナの子として新しいビューを設定することができます予算履歴グラフは水平方向の棒グラフを描いているので HStackを使用して各予算のビューを返します各アクセシビリティ要素にRectangleでフレーム利用可能な全ての垂直方向のスペースを埋めるようにしますこれで各アクセシビリティ要素のフレームは視覚的に表示されるものよりも大きくなりますが問題ありません大きくても一貫性のあるフレームがあれば iOSでVoiceOverユーザーが画面上で指をドラッグしてスキャンするとアクセシビリティ要素を探すことができます accessibilityChildren(children:)修飾子内で HStackを選択するとアクセシビリティプレビューではグラフの各バーに要素が作成されていることを確認できますこれらはすべてCanvasアクセシビリティコンテナの子としてアクセス可能になりますこれらの変更により予算履歴グラフは完全にアクセス可能になり支援技術によってグラフ内の各バーをナビゲートできるようになりました各要素のフレームが同じであることに注目してくださいこれは理想的ですより複雑なグラフについてはアクセシビリティを確保する別の方法がありますグラフへのアクセシビリティの導入に関する Prestonのプレゼンテーションをご覧ください accessibilityChildrenを使えばビューのアクセシビリティ要素は視覚的に表示されるものとは異なるため素晴らしい体験を仕立てることができますしかし accessibilityChildrenは combineの助けを借りてアクセシビリティを構成するためにも使用できます簡単に説明すると子のcombineは複数のアクセシビリティ要素のプロパティを新規または既存のアクセシビリティ要素に結合しますしかし accessibilityChildren API が追加されたことで一般的な方法でアクセシビリティを構成するためにも使用できるようになりました accessibilityRepresentation(representation:)を使って元のアクセシビリティが完全に置き換えられますこれは構成を行うことができないことを意味します一方 accessibilityChildrenは加算的ですこれは後で子を結合してそれらのプロパティを元の要素にマージすることができますこれは accessibilityChildren(children:) 修飾子のより高度な使用例ですが私が強調したい機能ですこのプレゼンテーションのアクセシビリティカタログサンプルプロジェクトではその例が紹介されていますこのような構成で何ができるのかを多くの方々に見ていただきたいと思います accessibilityChildren(children:)はコンテナの子を制御することができますまた Canvasで描いた複雑なグラフも使い慣れた修飾子やビューを使ってアクセスできるようになります子を結合する動作を使えば１つのビューのアクセシビリティを多くのビューで構成することができます Appの個々のコンポーネントをアクセス可能にする方法を学んだので今度はナビゲーション体験を洗練するためにいろいろなものを結合してみましょう VoiceOverを使ったWallet Palの操作は混乱して難しいと聞いています素晴らしくてアクセシブルなAppを提供するためにはまだやるべきことがあります一番上にある「友達」のカルーセルを見てみましょうこの機能はまだ作っていませんが Wallet Palに何らかのゲーミフィケーションを追加する予定ですそこで各友達ビューの左上にチャレンジボタンを追加しましたすでにSymbolButtonStyleを修正したのでチャレンジボタンは正しく表示されるようになりましたしかしユーザーからは「ナビゲーションが分かりにくい」という報告を受けていますが他にも何か問題はありますか？この答えとしてはまず支援技術が Wallet Palをどのようにナビゲートするかを理解する必要がありますデフォルトではアクセシビリティ要素は他の要素との関係における幾何学的な位置に基づいて左上から右下へとソートされますつまりコンテンツを区別するアクセシビリティコンテナがなければVoiceOverはそれぞれのチャレンジボタン次に画像と友達追加ボタン最後にユーザー名が書かれたテキストをナビゲートすることになりますアクセシビリティプレビューの大きな特徴はアクセシビリティ要素がソートされた状態で表示されることですこれにより Xcode上で支援技術がどのように動作するかを簡単に視覚化することができます予想通りソートされた順序は以前に見たものと一致していますこの順番は間違いなくナビゲートの際に混乱を招くでしょうさてアクセシビリティ要素のソート順を修正する方法はいくつかあります１つはアクセシビリティコンテナの導入です accessibilityElement修飾子を包含動作で追加してみますこれで各FriendCellViewのアクセシビリティ要素がアクセシビリティコンテナに包まれますこれによりアクセシビリティコンテナの子が次のアクセシビリティ要素に移動する前にナビゲートされるためナビゲーション順序が修正されますこの変更によりVoiceOverはアクセシビリティコンテナの子をナビゲートしてから次のアクセシビリティ要素に移動しますこのようにしてより望ましいナビゲーション順序を実現しますしかしこの体験向上のためにより良い方法はないのでしょうか？問題の１つはチャレンジボタンがユーザーが誰であるかを知る前にナビゲートされることです VoiceOverのユーザーはチャレンジを送信する前にユーザーの名前を知りたいと思うでしょうそのためこのボタンは最後にソートされるべきですこの問題を解決するためにアクセシビリティの accessibilitySortPriority(_:)修飾子を使用することができます accessibilitySortPriority(_:)はアクセシビリティコンテナ内の要素の順序を変更するために使用できます優先度が高い要素は最初にソートされ優先度が低い要素は最後にソートされます優先順位が同じ要素は幾何学的な位置関係に基づいてソートされますナビゲーションの順序改善のためにチャレンジボタンにアクセシビリティの SortPriority(_:)修飾子を追加しますデフォルトは0なので優先度を -1にしてチャレンジボタンのソート順を強制的に最後にするようにしますこれでチャレンジボタンは最後に表示されるようになりますこれは VoiceOverユーザーが誰にチャレンジを送っているのか混乱する可能性が減るのでこれは良い改善ですがそれでも素晴らしい改善とは言えません各FriendCellViewをアクセシビリティコンテナでラッピングする代わりに子供たちを１つの要素にまとめることができます結合はこのプロパティを既存のまたは新しいアクセシビリティ要素にマージします結合動作はどのプロパティがマージされるかを調整してデフォルトの最良の結果を得ることもできます例えばチャレンジボタンは「チャレンジを送信」という名前のアクションになりましたこれもナビゲーションの順序を修正しアクセシビリティ要素の数を減らしていますこれでユーザーごとに１つの要素が用意され各要素には「チャレンジを送る」というアクションがあります ForEachで表現されているビューのアクセシビリティ要素を結合することは多くの場合理想的ですもうお分かりかと思いますが結合は非常に便利な子の動作です子は個別にナビゲートできるのではなくそのプロパティを単一のナビゲート可能な要素に統合します単一の要素が必要だが子からプロパティを継承させたくない場合は「動作を無視」を使用します最後にcontain child動作は子をアクセシビリティコンテナにラップして関連するビューのグループを表すために使用しますこれによりデフォルトのソート順が改善されるだけでなく支援技術の面でもメリットがあります新しいアクセシビリティプレビューを使えばこのようなナビゲーションの問題を簡単に発見することができますまたいくつかの小さな変更を加えるだけでエクスペリエンスを劇的に向上させることができますしかし VoiceOverユーザーに真に優れたナビゲーション体験を提供するにはローターを考慮する必要がありますアクセシビリティに慣れていない方は「ローターって何だろう？」とお思いかもしれません簡単に言うとローターは強力なナビゲーションツールですユーザーが素早くナビゲートできるブックマークのようなものだと考えてください見出しやコンテナローターなどのシステムローターはこの強力なナビゲーションの基礎となります例えばユーザーは見出しローターを使ってセクションを素早くナビゲートすることができますこれはセクションビューが自動的にisHeaderトレイトをヘッダービューに追加するからですセクションビューを使用していない場合は accessibilityAddTraitsで isHeaderトレイトをビューに追加することができます同様にアクセシビリティコンテナはコンテナのローターに追加されますがこれは先程見たように accessibilityElement修飾子で作成されますご覧の通り見出しローターのサポートは非常に簡単でコンテナローターはcontain child動作を使ってアクセシビリティ要素をグループ化する利点を更に高めています Wallet Palの基本的なナビゲーション体験が改善されてきたのでローターを使ってさらに一歩進めてみましょう Wallet Palでは予算が上限に近づいたり上限を超えたりしたときに動機付けとなるメッセージや警告を出してユーザーの支出傾向を確認するアラート機能がありますそれぞれのアラートの種類には SF Symbolを採用していますこれにより視覚的なユーザーはリストに素早く目を通すことができますしかしこのアイコンはVoiceOver ユーザーの役に立ちません警告が出ているかどうかを知るためにすべての警告を確認しなければならないのです目の見える人と同じような体験をするためには VoiceOverユーザーが警告だけをナビゲートできるようにして瞬時に次の警告に移動できるようにしなければなりませんそのためにローターを使用することができますカスタムローターのその他の例や効率化に重要な理由については 2020年に行われたプレゼンテーション「カスタムローターのVoiceOver効率」をご覧ください警告ローターをAertsViewに追加するためにまず最初にすることはローターをアクセシビリティコンテナに追加することの確認です SwiftUIの幾つかのビューはデフォルトでアクセシビリティコンテナです例えばリストやLazyVStackですでもVStackやHStackは違います ontain child動作を持つ accessibilityElement(children:)修飾子を追加します次に accessibilityRotorr(_:entries:)修飾子でローターを作成し名前を「Warning」としますそして最後にどのアラートを警告ローターに含めたいかを宣言しますここではすべての警告アラートを対象としますこれで完成ですこんなに簡単にAppのナビゲーションを強化できるのですこのような単純なユースケースでローターが極めて簡単になる理由の１つは SwiftUIがIDに基づいてローターのエントリーをアクセシビリティ要素に自動的にマッチさせることができるからですこれはローターのエントリーの IDが ForEachによって AlertCellViewに与えられたIDと一致するからですアクセシビリティローターのためにビューのアイデンティティを理解することは重要ですそのためビューのアイデンティティが不明瞭な場合または再確認したい場合は「SwiftUIの解明」のプレゼンテーションをご覧いただくことをお勧めします「ちょっと待って私のビューはこんなに単純じゃない ForEachの中にないビューはどうするの」と思うかもしれません心配なさらないでください accessibilityRotor APIはシンプルなビューから複雑なビューまで拡張できますこの単純なケースではAlertCellViewには結合による単一のアクセシビリティ要素があるためエレガントに動作しますそしてAlertCellViewはアラートのIDで識別されますもしすべてのアラートに対してアクションビューがあれば？この場合 VStackはForEachのルートビューとなりアラートのアイデンティティが与えられるのは VStackとなります AlertCellViewを警告ローターに含めるためにはローターのエントリーとして明示的にマークする必要がありますそれには accessibilityRotorEntry修飾子を使いますこの修飾子は名前空間とIDを必要としますがこれは AccessibilityRotorEntryを作成するために使われたIDと名前空間に一致する限り何でも良いのです最後に各ローターエントリーにこの名前空間を含める必要がありますはっきりとした名前空間を参照する機能により accessibilityRotor APIは単純なユースケースから複雑なユースケースまで拡張でき複数のビューにまたがるアクセシビリティ要素を同じローターに含めることができますアクセシビリティローターを追加しテキストナビを強化もできますそのためには accessibilityRotor修飾子の異なるバリエーションを使用してテキスト範囲の配列を提供することができますこの修飾子は Eメールリンク電話番号など TextEditor内の特定の文字列にVoiceOver ユーザーが素早く簡単にアクセスできるようにするのに適していますアクセシビリティローターはVoiceOverユーザーにとって複雑なナビゲーションを簡単にします新しいSwiftUIのローターAPIを使えばこの優れたナビゲーション体験を提供することがこれまで以上に簡単になります今日の最後のテーマは「フォーカス」ですフォーカスの要素という概念は皆さんも既にご存じと思いますが多くの支援技術が独自のフォーカス状態を持っていることはご存じないかもしれません私達はこれを「アクセシビリティフォーカス」と呼んでいますこれは支援技術のナビゲーションについて言及した時に変化が見られたフォーカスされたビューです支援技術のカーソルの位置はユーザーエクスペリエンスにとって重要です VoiceOverでフォーカスが変更されるとカーソルは要素の説明をするだけではなくフォーカスされた要素のパスに合わせて移動しますではどのような場合にフォーカスが変わるのでしょうか？フォーカスは 3つのイベントのいずれかが発生した時に変更されますが常に変更されるとは限りません１つ目で最も一般的なケースはユーザーが別のアクセシビリティ要素に移動する際にフォーカスを促した場合です２つ目のケースは UIが変更され前にフォーカスされていたビューが画面に表示されなくなったりモーダルビューで覆われたりした時ですこのような場合最初にソートされたアクセシビリティ要素にフォーカスがリセットされることが多くありますこれは新しく提示されたビューの最初のアクセシビリティ要素に移動するなど多くのユースケースを自動的にカバーしますしかしそれがAppにおける最良の動作ではないかもしれませんそのためフォーカスをプログラムによる要求で変更することも可能ですただし VoiceOVerユーザーのフォーカスを移動させることは非常に混乱を招く可能性があるので慎重に扱う必要がありますそれではダジャレではなく最後のケースに注目しましょう今年私達には新しいAPIがありそれは支援技術が現在どこにフォーカスしているかを読み取ることに加えて支援技術にフォーカスを移行するように要求することができます通知を追跡し通知が存在する場合はカスタムのNotificationBannerをオーバーレイする単純なビューを用意しましたこのビューをWallet Palで使用して Appが前面にあるときに受信したプッシュ通知のアラートを表示したいと思います NotificationBannerが追加されても支援技術は自動的にそれにフォーカスしませんしかし新しいAccessibilityFocusState を使ってフォーカスするように要求することができます AccessibilityFocusStateは支援技術がどこにフォーカスしているかを読み取る方法とプログラムによるフォーカスの変更を要求する方法の両方を提供するプロパティラッパーですこのプロパティをビューに追加し accessibilityFocus(_:)修飾子をつけ NotificationBannerにバインドしてみます次に onChange(of:perform:)修飾子を使用して新しい通知が受信された時に追跡します優先度の高い通知を受信した時だけアクセシビリティフォーカスの変更を要求します特に注意しなければならないのはプログラム的にフォーカスを移動させることはユーザーのインタラクションが発生しなかった場合非常に混乱を招く可能性があるということですユーザーが現在フォーカスされているコンテキストから外されてしまいますそのため慎重に取り扱わなければなりません従って優先度が低い通知については VoiceOver用のアクセシビリティ通知を投稿してお知らせいたしますこうすることで VoiceOverユーザーは新しい通知が表示されたことを知り必要に応じてその通知にナビゲートすることができますでは NotificationBanner ビューの中に入ってみましょう通知が表示されるとタイマーが開始しますタイマーが完了すると通知はnilに設定されます先に述べましたように通知がnilになると NotificationBannerは非表示になりますこれは VoiceOverユーザーが通知バナーにフォーカスしていてタイマーが切れるとビューが削除されるためフォーカスがリセットされますこれは優れたユーザーエクスペリエンスにはなりませんこの問題を解決するには通知バナーが支援技術によってフォーカスされているかどうかを読み取りフォーカスされている場合は通知の解除を遅らせますこれが理想的な解決策ですフォーカスされている間はビューが削除されないのでもうVoiceOverユーザーのフォーカスはリセットされませんさらに支援技術ユーザーがコンテンツを理解し必要に応じて対話するための時間を無制限に与えていますこの２つは支援技術ユーザーがそれを行う場合かなりの時間がかかる可能性があります AccessibilityFocusStateは今年以降卓越していてアクセス可能なSwiftUI Appを提供するために必要な最後の部分ですこれを使えば支援技術の焦点を読み取って指示しビュー間のスムーズな移行を実現することができます SwiftUIのアクセシビリティについてたくさんカバーしました SwiftUIのアクセシビリティを開発・デバッグする方法を強化する新しいアクセシビリティプレビューを紹介しカスタムコントロールや複雑なグラフをアクセス可能にする方法を説明しましたまたグループ化ローターフォーカスを使ってナビゲーションを改善する方法についても時間をかけて学びましたすべてをまとめると今年はアクセシビリティが大きく飛躍した年でしたアクセシビリティAPIの単純または複雑な例については「Accessibility Catalog」Sample Project をご覧ください本日ご紹介しきれなかった例や推奨されるベストプラクティスなどが掲載されていますご参加くださりありがとうございました皆様がAppをどうやって誰もがアクセスできるようにするのか拝見するのを楽しみにしています ♪

2:00 - Welcome to the Accessibility Preview

struct ContentView: View {
    var body: some View {
        VStack {
            Text("WWDC 2021")
                .accessibilityAddTraits(.isHeader)

            Text("SwiftUI Accessibility")
            Text("Beyond the Basics")

            Image(systemName: "checkmark.seal.fill")
        }
    }
}

4:30 - BudgetSlider

struct BudgetSlider: View {
    @Binding var value: Double
    var label: String

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(label)
                Text(value.toDollars()).bold()
            }
            SliderShape(value: value)
                .gesture(DragGesture().onChanged(handle))
        }
    }
}

struct SliderShape: View {
    var value: Double

    private struct BackgroundTrack: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .foregroundColor(Color(white: 0.2))
        }
    }

    private struct OverlayTrack: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .foregroundColor(Color(white: 0.95))
        }
    }

    private struct Knob: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .strokeBorder(Color(white: 0.7), lineWidth: 1)
            .shadow(radius: 3)
        }
    }

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                BackgroundTrack(cornerRadius: geometry.size.height / 2)

                OverlayTrack(cornerRadius: geometry.size.height / 2)
                    .frame(
                        width: max(geometry.size.height, geometry.size.width * CGFloat(value) + geometry.size.height / 2),
                        height: geometry.size.height)

                Knob(cornerRadius: geometry.size.height / 2)
                    .frame(
                        width: geometry.size.height,
                        height: geometry.size.height)
                    .offset(x: max(0, geometry.size.width * CGFloat(value) - geometry.size.height / 2), y: 0)
            }
        }
    }
}

extension Double {
    func toDollars() -> String {
        return "$\(Int(self))"
    }
}

5:15 - Slider

struct StandardSlider: View {
    @Binding var value: Double
    var label: String

    var body: some View {
        Slider(value: $value, in: 0...1) {
            Text(label) 
        }
    }
}

5:50 - Accessible BudgetSlider

struct BudgetSlider: View {
    @Binding var value: Double
    var label: String

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(label)
                Text(value.toDollars()).bold()
            }
            SliderShape(value: value)
                .gesture(DragGesture().onChanged(handle))
                .accessibilityRepresentation {
                    Slider(value: $value, in: 0...1) {
                        Text(label)
                    }
                    .accessibilityValue(value.toDollars())
                }
        }
    }
}

struct SliderShape: View {
    var value: Double

    private struct BackgroundTrack: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .foregroundColor(Color(white: 0.2))
        }
    }

    private struct OverlayTrack: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .foregroundColor(Color(white: 0.95))
        }
    }

    private struct Knob: View {
        var cornerRadius: CGFloat
        var body: some View {
            RoundedRectangle(
                cornerRadius: cornerRadius,
                style: .continuous
            )
            .strokeBorder(Color(white: 0.7), lineWidth: 1)
            .shadow(radius: 3)
        }
    }

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                BackgroundTrack(cornerRadius: geometry.size.height / 2)

                OverlayTrack(cornerRadius: geometry.size.height / 2)
                    .frame(
                        width: max(geometry.size.height, geometry.size.width * CGFloat(value) + geometry.size.height / 2),
                        height: geometry.size.height)

                Knob(cornerRadius: geometry.size.height / 2)
                    .frame(
                        width: geometry.size.height,
                        height: geometry.size.height)
                    .offset(x: max(0, geometry.size.width * CGFloat(value) - geometry.size.height / 2), y: 0)
            }
        }
    }
}

extension Double {
    func toDollars() -> String {
        return "$\(Int(self))"
    }
}

7:05 - NavigationBarView

struct NavigationBarView: View {
    var body: some View {
        HStack {
            Text("Wallet Pal")
                .font(.largeTitle)
                .bold()

            Spacer()

            Button("Edit Budgets", action: { ... })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "slider.vertical.3"))
        }
    }
}

struct SymbolButtonStyle: ButtonStyle {
    let systemName: String

    func makeBody(configuration: Configuration) -> some View {
				Image(systemName: systemName)
            .accessibilityRepresentation { configuration.label }
    }
}

9:40 - BudgetHistoryGraph

struct Budget: Identifiable {
    var month: String
    var amount: Double

    var id: String { month }
}

struct BudgetHistoryGraph: View {
    var budgets: [Budget]

    var body: some View {
        GeometryReader { proxy in
            VStack {
                Canvas { ctx, size in
                    let inset: CGFloat = 25
                    let insetSize = CGSize(width: size.width, height: size.height - inset * 2)
                    let width = insetSize.width / CGFloat(budgets.count)
                    let max = budgets.map(\.amount).max() ?? 0
                    for n in budgets.indices {
                        let x = width * CGFloat(n)
                        let height = (CGFloat(budgets[n].amount) / CGFloat(max)) * insetSize.height
                        let y = insetSize.height - height
                        let p = Path(
                            roundedRect: CGRect(
                                x: x + 2.5,
                                y: y + inset,
                                width: width - 5,
                                height: height),
                            cornerRadius: 4)
                        ctx.fill(p, with: .color(Color.green))

                        ctx.draw(Text(budgets[n].amount.toDollars()), at: CGPoint(x: x + width / 2, y: y + inset / 2))

                        ctx.draw(Text(budgets[n].month), at: CGPoint(x: x + width / 2, y: y + height + 1.5*inset))
                    }
                }
                .accessibilityLabel("Budget History Graph")
                .accessibilityChildren {
                    HStack {
                        ForEach(budgets) { budget in
                            Rectangle()
                                .accessibilityLabel(budget.month)
                                .accessibilityValue(budget.amount.toDollars())

                        }
                    }
                }

            }
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .foregroundColor(Color(white: 0.9)))
        .padding(.horizontal)
    }
}

12:30 - Composition

// See CompositionExample.swift in the referenced sample project

13:50 - FriendCellView

struct User: Identifiable {
    var id: Int
    var name: String
    var photo: String
}

struct FriendCellView: View {
    var user: User

    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack(alignment: .center) {
                Image(user.photo)
                Text(user.name)
            }

            Button("Send Challenge", action: { /* ... */ })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "gamecontroller.fill"))
        }
    }
}

struct SymbolButtonStyle: ButtonStyle {
    let systemName: String

    func makeBody(configuration: Configuration) -> some View {
				Image(systemName: systemName)
            .accessibilityRepresentation { configuration.label }
    }
}

14:50 - FriendsView

struct User: Identifiable {
    var id: Int
    var name: String
    var photo: String
}

struct FriendCellView: View {
    var user: User

    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack(alignment: .center) {
                Image(user.photo)
                Text(user.name)
            }

            Button("Send Challenge", action: { /* ... */ })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "gamecontroller.fill"))
        }
    }
}
      
struct FriendsView: View {
    var users: [User]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(users) { user in
                    FriendCellView(user: user)
                        .onTapGesture { /* ... */ }
                }

                AddFriendButton()

                Spacer()
            }
        }
    }
}
  
struct AddFriendButton: View {
    var body: some View {
        Button(action: { /* ... */ }) {
            Circle()
                .foregroundColor(Color(white: 0.9))
                .frame(width: 50, height: 50)
                .overlay(
                    Image(systemName: "plus")
                        .resizable()
                        .foregroundColor(Color(white: 0.5))
                        .padding(15)
                )
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct SymbolButtonStyle: ButtonStyle {
    let systemName: String

    func makeBody(configuration: Configuration) -> some View {
				Image(systemName: systemName)
            .accessibilityRepresentation { configuration.label }
    }
}

15:10 - FriendsView with Containers

struct User: Identifiable {
    var id: Int
    var name: String
    var photo: String
}

struct FriendCellView: View {
    var user: User

    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack(alignment: .center) {
                Image(user.photo)
                Text(user.name)
            }

            Button("Send Challenge", action: { /* ... */ })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "gamecontroller.fill"))
        }
    }
}
      
struct FriendsView: View {
    var users: [User]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(users) { user in
                    FriendCellView(user: user)
                         .accessibilityElement(children: .contain)
                        .onTapGesture { /* ... */ }
                }

                AddFriendButton()

                Spacer()
            }
        }
    }
}
  
struct AddFriendButton: View {
    var body: some View {
        Button(action: { /* ... */ }) {
            Circle()
                .foregroundColor(Color(white: 0.9))
                .frame(width: 50, height: 50)
                .overlay(
                    Image(systemName: "plus")
                        .resizable()
                        .foregroundColor(Color(white: 0.5))
                        .padding(15)
                )
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct SymbolButtonStyle: ButtonStyle {
    let systemName: String

    func makeBody(configuration: Configuration) -> some View {
				Image(systemName: systemName)
            .accessibilityRepresentation { configuration.label }
    }
}

16:20 - FriendCellView Sort Priority

struct User: Identifiable {
    var id: Int
    var name: String
    var photo: String
}

struct FriendCellView: View {
    var user: User

    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack(alignment: .center) {
                Image(user.photo)
                Text(user.name)
            }

            Button("Send Challenge", action: { /* ... */ })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "gamecontroller.fill"))
                .accessibilitySortPriority(-1)
        }
    }
}

16:55 - FriendsView with .combine

struct User: Identifiable {
    var id: Int
    var name: String
    var photo: String
}

struct FriendCellView: View {
    var user: User

    var body: some View {
        ZStack(alignment: .topLeading) {
            VStack(alignment: .center) {
                Image(user.photo)
                Text(user.name)
            }

            Button("Send Challenge", action: { /* ... */ })
                .buttonStyle(
                    SymbolButtonStyle(
                        systemName: "gamecontroller.fill"))
        }
    }
}
      
struct FriendsView: View {
    var users: [User]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(users) { user in
                    FriendCellView(user: user)
                        .accessibilityElement(children: .combine)
                        .onTapGesture { /* ... */ }
                }

                AddFriendButton()

                Spacer()
            }
        }
    }
}
  
struct AddFriendButton: View {
    var body: some View {
        Button(action: { /* ... */ }) {
            Circle()
                .foregroundColor(Color(white: 0.9))
                .frame(width: 50, height: 50)
                .overlay(
                    Image(systemName: "plus")
                        .resizable()
                        .foregroundColor(Color(white: 0.5))
                        .padding(15)
                )
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct SymbolButtonStyle: ButtonStyle {
    let systemName: String

    func makeBody(configuration: Configuration) -> some View {
				Image(systemName: systemName)
            .accessibilityRepresentation { configuration.label }
    }
}

20:30 - AlertsView Implicit Rotor

struct Alert: Identifiable {
    var id: Int
    var isUnread: Bool
    var isFlagged: Bool
    var subject: String
    var content: String
}

struct AlertsView: View {
    var alerts: [Alert]

    var body: some View {
        VStack {
            ForEach(alerts) { alert in
                AlertCellView(alert: alert)
                    .accessibilityElement(children: .combine)
            }
        }
        .accessibilityElement(children: .contain)
        .accessibilityRotor("Warnings") {
            ForEach(alerts) { alert in
                if alert.isWarning {
                    AccessibilityRotorEntry(alert.title, id: alert.id)
                }
            }
        }
    }
}

struct AlertCell: View {
    var alert: Alert

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                if alert.isUnread {
                    Circle()
                        .foregroundColor(.blue)
                        .frame(width: 10, height: 10)
                }
                if alert.isFlagged {
                    Image(systemName: "exclamationmark.triangle.fill")
                        .foregroundColor(.orange)
                        .frame(width: 10, height: 10)
                }
                Text(alert.subject)
                    .font(.headline)
                    .fontWeight(.semibold)
                Spacer()
                Text("04/30/21")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            Text(alert.content)
                .lineLimit(3)
        }
        .padding(10)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .foregroundColor(Color(white: 0.9))
        )
    }
}

21:50 - AlertsView Explicit Rotor

struct Alert: Identifiable {
    var id: Int
    var isUnread: Bool
    var isFlagged: Bool
    var subject: String
    var content: String
}

struct AlertsView: View {
    var alerts: [Alert]
    @Namespace var namespace

    var body: some View {
        VStack {
            ForEach(alerts) { alert in
                VStack {
                    AlertCellView(alert: alert)
                        .accessibilityElement(children: .combine)
                        .accessibilityRotorEntry(id: alert.id, in: namespace)
                    AlertActionsView(alert: alert)
                }
            }
        }
        .accessibilityElement(children: .contain)
        .accessibilityRotor("Warnings") {
            ForEach(alerts) { alert in
                if alert.isWarning {
                    AccessibilityRotorEntry(alert.title, id: alert.id, in: namespace)
                }
            }
        }
    }
}

struct AlertCell: View {
    var alert: Alert

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                if alert.isUnread {
                    Circle()
                        .foregroundColor(.blue)
                        .frame(width: 10, height: 10)
                }
                if alert.isFlagged {
                    Image(systemName: "exclamationmark.triangle.fill")
                        .foregroundColor(.orange)
                        .frame(width: 10, height: 10)
                }
                Text(alert.subject)
                    .font(.headline)
                    .fontWeight(.semibold)
                Spacer()
                Text("04/30/21")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            Text(alert.content)
                .lineLimit(3)
        }
        .padding(10)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .foregroundColor(Color(white: 0.9))
        )
    }
}

22:20 - TextEditor Rotors

struct ContentView: View {
    @State var note: Note

    var body: some View {
        TextEditor($text.content)
            .accessibilityRotor("Email Addresses", textRanges: note.addressRanges)
            .accessibilityRotor("Links", textRanges: note.linkRanges)
            .accessibilityRotor("Phone Numbers", textRanges: note.phoneNumberRanges)
    }
}

24:45 - AlertNotificationView

struct Notification: Equatable {
    enum Priority {
        case low, high
    }
    var content: String
    var priority: Priority
}

struct AlertNotificationView<Content: View>: View {
    @ViewBuilder var content: Content
    @Binding var notification: Notification?
    @AccessibilityFocusState var isNotificationFocused: Bool

    var body: some View {
        ZStack(alignment: .top) {
            content

            if let notification = $notification {
                NotificationBanner(notification: notification)
                    .accessibilityFocused($isNotificationFocused)
            }
        }
        .onChange(of: notification) { notification in
            if notification?.priority == .high {
                isNotificationFocused = true
            } else {
                postAccessibilityNotification()
            }
        }
    }

    func postAccessibilityNotification() {
        guard let announcement = notification?.content else {
            return
        }
        #if os(macOS)
        NSAccessibility.post(
            element: NSApp.accessibilityWindow(),
            notification: .announcementRequested,
            userInfo: [.announcement: announcement])
        #else
        UIAccessibility.post(notification: .announcement, argument: announcement)
        #endif
    }
}

struct NotificationBanner: View {
    @Binding var notification: Notification?
    @State var timer: Timer?
    @AccessibilityFocusState var isNotificationFocused: Bool

    var body: some View {
        if let notification = notification {
            Text(notification.content)
                .accessibilityFocused($isNotificationFocused)
                .onAppear { startTimer() }
                .onDisappear { stopTimer() }
        } else {
            EmptyView()
        }
    }

    func startTimer() {
        timer = Timer.scheduledTimer(
            withTimeInterval: 3,
            repeats: true) { _ in
            if !isNotificationFocused {
                notification = nil
            }
        }
    }

    func stopTimer() {
        timer?.invalidate()
    }
}

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

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

リソース

関連ビデオ

WWDC23

WWDC21

WWDC20