SwiftUIにおけるアクセシビリティ

(音楽) (拍手) ようこそ マイケル･ゴルバーチです 本日は 私と同僚の ジョン･ネフルダが説明をします

SwiftUIで より速く簡単に― アプリケーションの構築が 可能になりました 特に お伝えしたいのは― SwiftUIが提供する アクセシビリティ機能です これを使えば 次世代のアプリケーションを― すべてのユーザに 届けられるでしょう

最初に アクセシビリティについての説明と― プラットフォームでの その機能を紹介します

次にSwiftUIで― いかに使いやすいアプリケーションが 作り出せるか説明します

その後 ジョンによる― アクセシビリティAPIの説明があります SwiftUIが生み出す― アクセシビリティツリーの 話もあります

では始めましょう そもそもアクセシビリティとは 何でしょうか？ 皆さんが作りたいと 思っているのは― 楽しくて役に立つ アプリケーションでしょう

さらに どんなカスタマーでも― 使用できるものにしたい それがアクセシビリティです 障がいのある人でも― アプリケーションを存分に 楽しめるということです カスタマーの満足が大事です

障がいのある方には 特に心強い機能になります MacやiPhone WatchやHomePodなど― 多くのデバイスに 支援機能を組み込んでいます 障がいのある人にも 可能性を開くものです

あなたのアプリケーションも その一部です あなたのアプリケーションが 人生を変えるのです そのために必要なのが アクセシビリティです

障がいのある人たちは― ビルトインのアクセシビリティ機能を 利用しています それは多くのプラットフォームに 搭載されています まずはVoiceOverを見ていきましょう

すべてのプラットフォームに 搭載された画面読み上げ機能です 視覚に障がいのある人も― デバイスの操作が可能になります

画面を読み上げるからです 画面上の要素を １つ１つ説明してくれます 例えば ボタンの種類や 画像の名前― それにテキストの内容などです iOSではジェスチャ Macではキーボードで― これらを操作することができます これはMacの計算機です VoiceOverの読み上げと同時に その内容が右下に現れます

今年 新機能が ２つ発表されました 最初はVoice Control 実演は ご覧になったでしょう

次が… (拍手) いい実演だった

次がフルキーボードアクセス iOSの新しい機能で Macでは機能が向上しました MacやiOSがキーボードのみで 操作可能になりました

迅速でスムーズな操作性を 実現しています アクセシビリティだけでなく― 生産性の向上にも 効果を発揮するでしょう 画面移動やコマンド指示が可能です こちらはiOSの フルキーボードアクセスで― ８にフォーカスをしたところです

これらの機能の開発で 分かったことがあります アクセシビリティは あらゆる人が活用できます だからアプリケーションにとって とても重要なのです

次はプラットフォームについてです 後ろの画面にある機能の多くは― 同じ技術を使っています アクセシビリティを実装すれば すべての機能で使えます

アプリケーションから プラットフォームに情報が集まり― 各機能は その情報を利用します この情報がアクセシビリティ ユーザインターフェイスです

どういう仕組みなのか そこで 計算機を例に見ていきましょう ユーザインターフェイスを 構成するのは― アクセシビリティ要素です 計算機の各ビューが アクセシビリティ要素となります

ここでは主にボタンを指します では詳しく見ましょう 左にXのボタン 右側がアクセシビリティ要素 ラベルはVoiceOver用です VoiceOverは ラベルを認識して読み上げます

ここでは“乗算”のラベルが― Xのボタンに付いています 次がタイプです iOSはトレイトを― macOSはロールを使います タイプはボタン 最後がデフォルトアクションです macOSが“押す” iOSが“タップ” 要素は このアクションに反応します

別の例を見ましょう これは計算結果の表示です ラベルは“メインディスプレイ” 重要な情報である値に入るのは― 表示される数字です デフォルトアクションはありません

要素が反応するのは― デフォルトアクションだけでは ありません アクションをカスタマイズできます 結果を消去する カスタムアクションを加えました

これが計算機のアクセシビリティ ユーザインターフェイスです 多くの場合は自動生成されますが― 手直しで さらによくなります

アプリケーションの ユーザインターフェイス同様― アクセシビリティの ユーザインターフェイスも大事です 本日 重要なことを３つ お伝えします

まずアクセシビリティ要素は 分かりやすくあるべきです 理解しやすいラベルと値 情報の記述です 計算機のXボタンに乗算の ラベルを付けたのが いい例でしょう

次がインタラクティブです 適切なデフォルトアクションと カスタムアクションを意味します 先ほど消去のアクションを 加えたのが一例です 最後がナビゲーションです アクセシビリティ要素の 配列とグループによって― アクセシビリティ機能の 使いやすさは決まります

AppKitとUIKitでの 同様の機能については― 別のセッションをご用意しています 今日はSwiftUIについてです

我々はアクセシビリティの― 重要性と力を信じています 誰もが使いやすいアプリケーションを 簡単に作るための― フレームワークの提供に努めています

高度な宣言型コードを 使用するSwiftUIは― アクセシビリティの 自動機能を高めます SwiftUIを用いればアプリケーションが より使いやすくなり― 機能もさらに向上するでしょう

SwiftUIはNSViewや UIViewの生成と同じように― アクセシビリティ要素も 生成します ではコードを見てみましょう ここがVStack Stackにはボタン それをテキストで挟みます

ここで３つのアクセシビリティ要素が 生成されます テキスト２つと― ボタンです ここで生成されるのは UIViewやNSViewではなく― アクセシビリティ要素そのものです

標準コントロールでも 利用しやすいようにしようと― 我々は努力をしています シンプルな要素ですが―

必要な情報は含まれています ラベルがあるので分かりやすいです ボタンのアクションにより インタラクティブです 正しい配列で ナビゲーションしています

SwiftUIは アクセシビリティAPIを備えています まずはSwiftUIによって得られる― アクセシビリティについて 説明しましょう

SwiftUIの特徴は アクセシビリティ機能に― 最新の情報を伝えることです アクセシビリティ機能は アプリケーションが伝える― アクセシビリティ要素に 反応して作動します

VoiceOverは その要素の一覧を要求します 計算機の場合は 表示されている要素の一覧です 計算機のボタンに反応します

それから画面の要素もです 値も伝えます この場合は“5”です

では この情報が変わったら？ 例えば イコールの ボタンが押されると― 画面の値が変わります 今の値は“10”です VoiceOverに変更の通知が必要です そこで フレームワークが アクセシビリティ通知をサポートします VoiceOverに変更が通知されます

SwiftUIはステートドリブン型です アクセシビリティには 大きな利点です なぜならSwiftUIが アプリケーションの状態を― 常に把握しているからです 手動の更新は不要です (拍手) ありがとう

SwiftUIが どのように 状態を管理しているのか― 詳しく見ましょう トグルとボタンは 単一の状態にリンクしています これはブーリアン型です

右上の２つがアクセシビリティ要素 トグルのための アクセシビリティ要素です 正しいラベルとタイプです 最初の値は“0”

ボタンをクリックすると 状態が変わります “0”から“1” または“1”から“0”へ ボタンの名前は“反転”です

さて どうなるでしょう トグルの値が変わったので― VoiceOverへ通知します 値が変わると― SwiftUIはVoiceOverへ 自動的に通知します 特別なコードは不要です SwiftUIのアクセシビリティ通知も 気にする必要ありません

カスタムコントロールも改善されました 皆さん ユーザインターフェイスを カスタマイズしたいのでは？ 独自のビジュアルを 与えたいと思うことでしょう これまではカスタマイズをすると― アクセシビリティのための 作業に時間を取られました しかしSwiftUIなら アクセシビリティの設定は簡単で― ユーザインターフェイスの デザインに集中できます つまりユニークで美しく そして使いやすい― カスタムコントロールを 利用することができます

これはCustomButtonStyleです このAPIには ラベルやボタンの状態が含まれています ボタンのデザインも加えます この長方形の部分がラベルです 押された時のボタンの色を設定し― パディングを加え 文字の大きさなども設定します

その結果が右側です

では このボタンの定義を 活用しましょう 普通のボタンを作り― そこにbuttonStyleの 修飾子を用います これにより右上のような アクセシビリティ要素ができます カスタムのコードでも 正しい要素になりました ラベルとタイプとアクションが ありますね

特別なコードは使わずに できました

画像への直感的なアクセシビリティも 提供します 特に重要なイラストと グリフについて説明しましょう

例えば サインアップ完了の 緑色のチェックマークです

生成のためのシンプルな SwiftUIコードがあります この場合VStackのみです

サインアップが完了すれば チェックマークが出てきます しかし― VoiceOverでは“チェックマーク グリフ”と言われるだけです わけが分からない ただの画像の名前だからです グリフとは何か 分からないでしょう サインアップが完了したか分からず 混乱します 理解できないからです 明確なラベルが必要です SwiftUIによる アクセシビリティ要素だとこうなります タイプは正しいがラベルがない

画像のファイル名かアセット名を― 参照しようとします そこが問題です そのような名称では ユーザには分かりません

ローカライズした アクセシビリティ情報を― SwiftUIでは使います

ラベルベースの イニシャライザを使うだけです 個別のコード修正が不要になります これで分かりやすいアクセシビリティ ユーザインターフェイスになります

アクセシビリティ要素に 正しいラベルが付きました “サインアップ完了”と 読み上げられます

画像が単なる装飾の時もあるでしょう 例えば チェックマークの下に― “サインアップ完了”の文字があります SwiftUIコードは こうなります VStackには画像とテキストです

画像が装飾であると― 正しいイニシャライザで定義します これで画像は読み上げられません アクセシビリティ要素は テキストだけになりました VoiceOverは 正しくナビゲートされます

もう１つ SwiftUIによって 向上したのが― ラベルです システム環境設定で使っている コントロールを見てみましょう 音声を選択します

右上にあるのが アクセシビリティ要素です ラベルはなく 値は“アレックス”です これでは VoiceOverは― “アレックス”としか言いません VoiceOverユーザには 何か分かりません ではコンテキストを見てみましょう

SwiftUIコードに注目します これはポップアップボタンとして 表示されるPickerです

Pickerにビルドインラベルがあります この場合は“システムボイス”です 多くのコントロールのラベルも同様です

アクセシビリティ要素を見てみましょう ラベルがあります 読み上げる内容は― “アレックス　システムボイス ポップアップボタン”

SwiftUIで できることは他にもあります ラベルを１つに 統一することもできるのです ラベルの作成は 左側のようになります するとアクセシビリティが設定されます 左のラベルと右のポップアップボタンを 関連づけます VoiceOverは その関連を認識し― そして先ほどと 同じように読み上げます

これらはSwiftUIが 自動で行うことです 重要な特徴が２つあります すべてがSwiftUIの プラットフォームに共通です そして これらのための 特別なコードは不要です どんなに優れた自動機能でも 不十分かもしれません そこでアクセシビリティAPIを 提供します ここからはジョンが説明を ジョン (拍手)

どうも SwiftUIが提供する ビルトインアクセシビリティは― すばらしいエクスペリエンスを 届けます しかし完璧なものではありません

アクセシビリティAPIによって より良い体験になるでしょう

APIの使用例を紹介します 計算機の例に戻りましょう 乗算のボタンは “エックス”と読まれます

ラベルのパラメータに 修飾子を適用すると― ボタンは“乗算”と読まれます

ボタンの状態も知りたいですね 選択すると白色に変わります

こんな時 トレイトが役立ちます トレイトは要素の種類や 働きを定義します ボタンにはisButtonの トレイトが自動で付きます VoiceOverは まずラベルを認識します ここでは isSelectedの状態と― パラメータのaddTraitsを加えます これで“選択”と読まれます

次に計算結果です

ラベルを“結果”に変え 値を加えます VoiceOverは値を読み上げます

単位を加える場合も あるでしょうが― 今回は数字だけで十分です

最後にカスタムアクションを加えます “消去”というカスタムアクションを 作ってみましょう

これでVoiceOverが認識します このように情報と アクションを加え― アクセシビリティをSwiftUIに 組み込みます ではAPIとアプリケーションでの その使用について見てみましょう

アプリケーションに求められるもの

それは分かりやすさ インタラクティブ ナビゲーションです

これに関した質問です

文字列の情報は十分か

カスタムアクションは インタラクションをシンプルにしてるか

素早いナビゲーションか

VoiceOverのビデオを お見せしましょう その間 今の質問を 心に留めておいてください

このアプリケーションは テキストと 背景色のコントラスト比を計算します 上段は現在のコントラスト比 下段では背景とテキストの色を それぞれ調整できます ダブルタップで色が反転します

ではVoiceOverを使います

“11.7 1”

“11.7 1　11.7 1”

“色をリセット ボタン” “背景” “赤 76” “30％　調整可能” “緑 217” “85％　調整可能” “青 100” “39％　調整可能” “39　100％”

気になることが いくつかありました

まず読まれなかった記号があった 記号を読ませる設定が必要です この場合は― 比率の記号であることを VoiceOverに教えます “11.7対１”と読むように

次に 数字の説明がない ラベルを付けるのがいいでしょう “コントラスト比”と

ContrastRatioViewに記述します ラベルと値です

スライダの情報も気になりました 値はパーセンテージでした しかし ここは 0～255の色の成分値です

パーセンテージのラベルは隠して 色の成分値を読み上げます 情報を１つの要素にします

まずラベルを隠します visibilityがパラメータです hiddenが要素を隠します

次にラベルの情報を加えます 色名と0～255が範囲の色の成分値です

次にダブルタップです iOSのジェスチャは アクセシビリティ製品に向いていません ビルトインジェスチャのメニューが 内蔵された製品もありますが― 別の方法も カスタムアクションを作成します 利点が２つ アクション名から 何が起こるか分かります そしてiOSでも 他のアクセシビリティ製品でも使えます

修飾子を呼び出し “色を反転”を加えましょう

最後にナビゲーション

ビューは３つに分かれています コントラスト比

背景色

テキストの色

これらをisHeaderに適用します するとヘッダ間の移動が速くなります

このトレイトを３つのビューに加えます

では修正した結果を見ましょう

“コントラスト比　11.7対１” “ヘッダ” 適切なコンテキストが加わりました

次にスライダを見てみましょう

“色をリセット ボタン” “背景” “ヘッダ” “赤 76” “調整可能”

“１本指でスワイプして 値を調整してください” “緑 217” “調整可能” “青 100” “調整可能”

“スワイプ… 100” “140… 250… 255”

VoiceOver ローターを使って 操作性を確かめます “値を調整” “ヘッダ”

“テキスト” “ヘッダ” “背景” “ヘッダ” “コントラスト比　13.0対１” “ヘッダ” “アクション” “色を反転”

(拍手) 数週間で アクセシビリティを改善できます APIの基本でした さらに その概念を少し説明します アクセシビリティツリーです アクセシビリティ要素の生成は 説明したとおりです さらに要素のツリー構造と― より良いエクスペリエンスにする方法を お伝えします まずはツリー構造から

コードでできたビューのツリーです 左側はテーブルセルビューの SwiftUIコード ラベル１つ　スペーサー１つ ボタン２つです HStackに水平に連結 それが右側のツリー構造です HStackが親で ラベルとスペーサーとボタンが子です

テキストから１つ ボタンから２つの― アクセシビリティ要素が生成されます

これらの要素は ホストビューの子となり― アクセシビリティ製品に伝わります

これはUIKitやAppKitの 要素も含まれる― アクセシビリティツリーの一部です UI/NSViewRepresentableを使った プラットフォームは― SwiftUIツリーの下です

ツリーの階層は 段々複雑になるように見えますが― ナビゲーションは向上されます 例で説明します

テーブルセルの アクセシビリティ要素は３つです セルが１つなら VoiceOverのナビゲートは簡単です しかしアプリケーションの セルは多いでしょう 要素も無数にあります フォローや共有ボタンの 反復情報も多い このフォローボタンは― コンテキストがないので 誰のものか分かりません 修正しましょう

上のレベルに新しい アクセシビリティ要素を作ります

今あるアクセシビリティ要素の 親のビューです ここではHStack

HStackを使ってcombineが― 要素を１つにまとめ 新しい要素を生成します すると テキストビューが ラベルを提供し― ボタンはカスタムアクションに 変換されます

これで VoiceOverは １つの要素だけで作動します

(拍手) この方法で ツリーの要素数は減りました 思いどおりにナビゲートでき― カスタムアクションで ボタンも作動します

関連するユーザインターフェイスを まとめるとナビゲーションが向上します

ナビゲーションとアクセシビリティには 配列も重要です

デフォルト配列の修正が 必要な場合もあるでしょう 色をリセットするボタンは ２番目に配列されています

しかしZStackでは 後ろから配列されるので― ボタンがコントラスト比の上に出ます

これを入れ替えます

sortPriorityを使用しましょう

デフォルトは“0”です 優先度の高いものからソートします 修飾子を呼び出し sortPriorityを設定します

コントラスト比は“0”のままで ボタンを“1”にすると― ボタンが先にスキャンされます

アクセシビリティAPIで分かりやすい アプリケーションになります ラベルや値やヒントから コンテキストが加えられます

さらにアクションを加えて インタラクティブにできます

アクセシビリティ要素をまとめると ナビゲーションが向上します

ビルトインのアクセシビリティと アクセシビリティAPIによる強化で― より早く簡単に アプリケーションにアクセスできます ではマイケルに (拍手)

そろそろ終わりの時間です 最後に１つ あなたのアプリケーションの アクセシビリティは― きちんと機能していますか？ 確認方法があります アプリケーションを使ってみるのです VoiceOverやフルキーボードアクセスを 実際に使ってみましょう 例えば VoiceOverを使います 声で操作できなかったり― 画面を見てしまうようなら 修正が必要です Voice Controlや フルキーボードアクセスも― 声やキーボードで操作できないなら 修正が必要です

次にAccessibility Inspectorです Xcodeに入っている アクセシビリティチェック機能です 実際にアプリケーションを 使ってみるのとは異なり― アクセシビリティツリー構造の理解や デバッグに非常に役立ちます それに関するセッションも 用意しています

では今日の内容をまとめましょう まずアプリケーションを デフォルトで― 使いやすいものにしたいと 考えています SwiftUI開発当初から それを念頭に置いていました

ユーザインターフェイスについては― 分かりやすさ インタラクティブ ナビゲーションを忘れずに

さらなる向上のために― SwiftUIは優れた アクセシビリティAPIを提供します APIは全プラットフォーム共通なので 一度の学習で済みます (拍手) お知らせが２つ まずコードのサンプルが こちらのリンクにあります そして この後すぐ アクセシビリティのラボを開催します 皆さん　ぜひご参加ください お待ちしています

SwiftUIを使ったアプリケーションを 楽しみにしています ありがとう (拍手)