Mac Catalyst用のアクセシビリティの設計

Mac Catalyst用のアクセシビリティの設計

Mac Catalyst Appをすべてのものにアクセスできるようにし、その改良を iPad Appに取り込みましょう。優れたアクセシビリティを持つiPad Appが、Mac Catalystのサポートを追加すると自動的に優れたアクセシビリティを持つMac Appになる仕組みをご紹介します。マウスとキーボードのアクションやアクセシビリティエレメントのグループ化とナビゲーションのサポートによってエクスペリエンスをさらに強化する方法をご覧ください。また、Appをテストし、あらゆる人にとって真に優れたエクスペリエンスを創造するためのイテレーションを行う新しいAccessibility Inspectorフィーチャの使用方法もご覧ください。本セッションの前に、Mac Catalyst、UIKit、およびiOS向けの基本的なアクセシビリティAPIを理解しておくことをお勧めします。まずは“Introducing iPad apps for Mac”と"Auditing your apps for accessibility"をチェックしてください。

リソース
関連ビデオ

WWDC19
ダウンロード

こんにちはようこそWWDCへ “Mac Catalyst用のアクセシビリティの設計” 私はエリックです後ほど同僚のネイサンも加わり― Mac Catalyst用のアクセシビリティの設計についてお話します Mac CatalystはAppleにとって大きな成功となっています驚くほど簡単に利用でき開発者たちは本当に気に入っています App StoreにはMac Catalystで作られた最高のアプリケーションが既にありますすべての顧客がすばらしいアプリケーションを使えるようにすることが重要です今日はアクセシビリティについて話します Appleにおいてアクセシビリティは核となる価値の１つです身体障害を持つ人々を支援するの支援技術がすべてのプラットフォームに揃っていますアクセシビリティチームは iOSのために実施してきた成果が確実にMac Catalystに変換されるよう努めていますそのためiOSアプリケーションでアクセシビリティが対応可能な場合 Macでも自動的に対応できるようになりましたつまりMac Catalystのアプリケーションに取り組む際 iOSの観点で考え続けられるということです最初にキーボードを使用するためにアプリケーションを最適化する方法を説明しますフォーカス行動を改善しキーボードのショートカットを加えます次に障害者支援技術のためのナビゲーション効率を向上させるために何ができるかを簡単に説明しますそして最後は Mac Catalystアプリケーション用に macOS上でアクセシビリティをテストするためのヒントですそれではキーボードの使い方から始めましょう macOSのキーボードは iPadOSのように単なる補助的な役割ではありませんむしろユーザがアプリケーションとやり取りするための主な手段です目標はできるだけ多くのアプリケーションの機能にキーボードでアクセスすることです最初にできることはキーボードのフォーカスをチェックすることですどのUI要素が　現在キーボードからの入力を受け付けているのかを特定しますそしてユーザがやり取りできるアプリケーションのすべてのUI要素にフォーカスできるかを確かめます実演するため Roasted Beansと呼ばれるサンプルを見てみますこれは昨年アクセシビリティ対応にした Peanut Butterアプリケーションの副産物です Peanut Butterが功を奏した時に多くの人がピーナッツバタートーストと一緒に飲むコーヒーを探していましたそこでiOSのアプリケーションを立ち上げアクセシビリティ対応にし終えてから Mac Catalystを使って macOSに対応させたいと考えましたこのアプリケーションとキーボードを通してその方法を見てみましょうまず最初にコントロールを使ったキーボードでのやり取りを可能にする― システム設定をオンにする必要がありますこれはシステム環境設定のアプリケーションにありますキーボードの部分のショートカットメニューの下です “キーボードナビゲーションでコントロール間でフォーカスを移動”をチェックしますアプリケーションに戻り tabボタンを押して何が起こるか見てくださいナビゲーションバーの右側にある追加ボタンの周りにフォーカスの輪がついているのがお分かりでしょうこれは追加ボタンにキーボードフォーカスがあることを意味していてスペースバーを押すとそのボタンが有効になります次にtabを押すとサイドバーの最初の項目が強調されますユーザは上下の矢印キーを押してテーブルビューの選択肢を変えることができます
次に続くtabで残りのやり取り可能なコントロールが強調されます共有ボタンお気に入りボタンそしてギフトボタンです
すばらしいですね UIKitは既にキーボードでアクセス可能なすべてのコントロールを作っています tabキーでコントロールの間をループし矢印キーでテーブルビューの中の選択肢を選びます
今アプリケーション内のどこかに UITableViewか UICollectionViewがあるならば矢印キーで選択肢を動かせないことに気づいたかもしれません矢印キーで選択肢を変えられるようにするためにはこの新たなAPIでUITableViewか CollectionViewにて selectionFollowsFocusを trueにするだけですサンプルアプリケーションでは tableViewが UISplitViewのサイドバーであるため UIKitはこれをtrueにするのでこの手順を取る必要はありません
キーボードを更にカスタマイズする方法はサンプルアプリケーションを調べていただき “Mac Catalystの新情報”のセッションをご覧くださいこれでアプリケーションとやり取り可能なコントロールはすべてフォーカスできることが分かりましたキーボードの使い方に関して次にできることを説明しますキーボードのショートカットの追加ですユーザが今すぐ新しいコーヒーを追加またはコーヒーを評価したい時は画面上でクリックするだけで完了しますしかし障害者支援技術を使う人たちにとって画面上のUIを見つけることは面倒な場合があります素早いキーボードショートカットで動作できたらよいでしょうそれでは友達に焙煎豆を共有するキーボードショートカットを追加してみましょうまずは使うキーボードのベストな組み合わせを見つけ出す必要があります顧客にとってできるだけ直感的に分かりやすいものにしたいからです最初によく使われるショートカットについて Appleのガイドラインを確認しますアプリケーションに似たような機能があればそのようなキーボードの組み合わせを考慮できるでしょうなぜならユーザは既に慣れているからです私たちが欲しい“共有”はここのリストにはありませんもう１つの方法は Macの既存のアプリケーションに似たようなものがあるかどうかチェックすることですそこでみんなが大好きな Mac上のSafariアプリケーションを調べました Safariでは共有のショートカットとして Command Iが使われていましたこれと同じようにしてみます
最初にAppDelegateにて buildMenu関数を上書きする必要がありますキーボードショートカットに応答する UIKeyCommandを作ることが必要ですタイトルとしてローカライズされた文字列を割り当てますこれはメニューバー上に現れますそれからそのコマンドをきっかけにするアクションを割り当てますキーボードショートカットに応答する UIKeyCommandを作ることが必要ですタイトルとしてローカライズされた文字列を割り当てますそれからそのコマンドをきっかけにするアクションを割り当てますそしてmodifierFlagsコマンドのため入力を“I”の文字に設定しますそれからメニューの子としてのみ shareCommandをとるUIMenuを作りますそしてメニューバーの適当な場所にこの新たなメニュー項目を挿入しますこのデモでは編集メニューの終わりに挿入します今編集メニューを開くと新しいキーボードショートカットの共有が編集メニューの下にうまく現れ Command Iを押すことでアクセスできます
Mac Catalyst向けに最適化しているすべてのすばらしい成果が iOS上でのフルキーボードアクセスも最適化することを忘れないでくださいそれがユーザがキーボードだけでデバイスを使えるようになるという特徴です加えてアプリケーションはiOS 13.4で始まった UIPressオブジェクトから正確なkeyCodeを得ることができますこれはゲームを開発するのに便利ですなぜならこのAPIでキーボードのフルコントロールが可能になるからですサンプルアプリケーションも忘れずに調べてください要約するとキーボード用に設計されたすばらしいアプリケーションはアクセシビリティ用のすばらしいアプリケーションだということです重要なのはやり取り可能なコントロールがキーボードフォーカスでアクセス可能かを確かめることですそして便利なキーボードショートカットをアプリケーションに追加することをお勧めします
キーボードの使い方については以上です続いては同僚のネイサンが障害者支援技術のためのナビゲーション効率を改善する方法についてお話します
ありがとうエリックアクセシビリティチームのソフトウェアエンジニアのネイサンです私たちはmacOSの障害者支援技術があなたのCatalystアプリケーションとやり取りする方法を改善できるよう努めています前にも触れましたがアクセシビリティを対応させるということは誰もがアプリケーションを使えるということですアプリケーションを使えるということはユーザが効率的にコンテンツにアクセスできるということです今日はVoiceOverに焦点を当てましょうこれはすべてのプラットフォーム上にある画面読み上げ機能ですコンテンツを読み上げることによって低視力や視力を失っているユーザがアプリケーションを使うことができます VoiceOverはユーザインタフェースに基づくアクセシビリティ要素のツリーを通して実現されます macOS上の追加画面で大きなユーザインタフェースでもっと複雑なアプリケーションを提供する場合があるかもしれませんより複雑なインタフェースは VoiceOverが伝えるべきアクセシビリティ要素が増えますユーザを困惑させないために効果的な方法が必要ですそこで今日はアクセシビリティグループについてお話ししますこれはVoiceOverユーザに向けたナビゲーションを改善するための戦略ですグループ化によってより自然なmacOS体験を提供できるようになりましたしかしナビゲーションの効率性について話す前に VoiceOverがあなたのアプリケーションをどう認識しているかを理解しましょうこれはVoiceOverがアプリケーションを認識する方法ですアクセシビリティのツリーと呼んでいますすべての障害者支援技術により見える要素を集めたものですアクセシビリティ要素であるビューは isAccessibilityElementプロパティにより決定されます各要素は葉のノードで結果として単一レベルのツリーの要素になっていますこのモデルがiOSではうまく機能していますユーザはタッチスクリーンで見て回りますつまり画面のタップで要素を１つ１つ見て行くか要素に素早くジャンプすることができますしかしmacOSでは VoiceOverユーザはキーボードを使いますタッチスクリーンがないと要素間を素早くジャンプすることはできませんそのため同じモデルを使おうとするとすべてのアクセシビリティ要素を１つ１つ見て回らなければなりませんこの課題を説明するため Roasted Beansアプリケーションでアクセシビリティ要素を見てみましょうここに目に見えるアクセシビリティ要素が 26個あることが分かりますすなわちユーザはどんな時でも最低26個の要素を見る必要があります Xcodeでコンパイルボタンにたどり着くまで 26回キーを叩くのです恐らくプログラミングがかなり大変でしょうキーボードショートカットを１つ加えると要素を見て回ることが不要になる一方ですべてのユースケースが解決されるわけではありませんそれではこれを改善するには何ができるでしょうか？ディナーメニューを見てみましょう長いリストを載せたメニューの代わりに関連した区分ごとにサラダメインコース付け合わせ料理と分けられていますこれならばVoiceOverユーザはグループの個々の要素を見て回る前にグループ間を見て回ることができます同じ考えをアクセシビリティのツリーに適用できますアクセシビリティコンテナを使うことで要素間の関係を定義できます１つの要素にaccessibilityContainerTypeを設定するとそこに含まれるアクセシビリティ要素によりよいナビゲーション体験を提供するため障害者支援技術はその情報を使えるようになりますアクセシビリティコンテナAPIが iOSユーザに対しどう役立つのかを既にご存知かもしれません例えばタッチジェスチャーで次のコンテナの中の最初のアクセシビリティ要素を見に行くことができます VoiceOverはこのような要素に焦点を当てます
ここでの目標はMac Catalystのナビゲーション効率を改善することです macOS上のVoiceOverは同じAPIを活用しますが動作を適応させます macOS上のアクセシビリティコンテナは１つのアクセシビリティ要素として動作しますこれはVoiceOverがコンテナ自身へのフォーカスをナビゲートできるということですここからユーザはコンテナを超えて飛び次の要素に行くかコンテナのアクセシビリティ要素の独占的なナビゲーションを許してコンテナとやり取りするかを選べますそのためアクセシビリティコンテナがアクセシビリティ要素として動作するというのは Mac Catalystアプリケーション用のアクセシビリティツリーを作るとコンテナが自身のノードをツリー上に作るからですそしてアクセシビリティ要素がその自身のサブツリーになるのですこの構造はAppKitを中心にして築かれたアクセシビリティAPIと密接に一致していますそのモデルは見て回る必要のあるアクセシビリティ要素の数を著しく減らすので macOSではうまく機能します
ここで重要なことはアクセシビリティコンテナが Mac Catalyst上でのアクセシビリティ要素であることですそのためコンテナ上のアクセシビリティラベルのような標準のアクセシビリティプロパティを必ず設定します Roasted Beansアプリケーションに戻りますではアクセシビリティコンテナがアクセシビリティツリーの中の独立したノードとして動作するとしたら何が分かりますか？
劇的な効率性の改善が見られますこれにより見えている要素の数が 26個から８個に減りますナビゲーションする上でのアクセシビリティコンテナの影響力を見たので違うタイプとそれを使うタイミングについて少し説明しましょう dataTableはグラフのようなコンテナが UIAccessibilityContainerDataTable プロトコルを採用する時のためのものです Listは順序付けられたコンテンツですこれはWebページやPDFの目次などで主として使われます Landmarkは特にWebページとtvOSで使われるコンテナです最後にsemanticGroupは iOS上の一般的なコンテナ型です iOSではVoiceOverユーザが最初にそのコンテナの中の要素にフォーカスした時にアクセシビリティラベルが読まれます macOSではVoiceOverがそのコンテナ自身にフォーカスした時にそのラベルが読まれます
この場合ではナビゲーション体験を改善するため semanticGroup方を使いたいと思いますグループ分けでナビゲーション体験は大いに改善できます多すぎるグループ分けはアプリケーションのナビゲーションを必要以上に複雑にします各アクセシビリティコンテナはアクセシビリティツリーのノードなので VoiceOverユーザが明示的にグループとやり取りしなければコンテナ内の要素は発見できませんではいくつか例を見て要素をグループ分けするタイミングを確認しましょうまず初めに同じ機能部分に属している要素はグループ分けすべきですしかしこれらの機能部分をどのように見つけるのでしょう？
最近のMac Catalystアプリケーションの１つ Swift Playgroundsを見てみましょうコードの書き方を勉強し始めたばかりの友人がいるとします友人はSwift Playgroundsの最初のレッスンの問題で行き詰まりましたしかし幸運なことにあなたに電話をかけることができます友人との電話の会話を想像してくださいどうやって友人をナビゲートしますか？こう尋ねるかもしれません “左側に章のリストが見える？” “どの章で君のキャラクターであるバイト君はどのタイルに立っているの？” またはコードの書き方を教えるかもしれませんこの場合真ん中を２つの機能グループに分けることができます上側はコードを書くためのエディターで下側にはオートコンプリートの提案ですアプリケーションを口頭で説明することにより１つのアクセシビリティコンテナに置くべき機能部分を簡単に割り出すことができますアクセシビリティコンテナを使うタイミングについての別の事例は型や機能目的に関連する場合です例えば UINavigationBar や UITabBar UICollectionView や UITableView はデフォルト設定でsemanticGroup型のアクセシビリティコンテナである― 一部の標準UIKitビューですタブバーやナビゲーションバーとして動作する自身のカスタムUI要素を作ったならばアクセシビリティコンテナとして設定することで予想される― デフォルトの動作に従ってくださいさて Roasted Beans アプリケーションの例に移りナビゲーション体験をいかに簡単に改善できるか見てみましょう左のUITableViewから始めますデフォルト設定でsemanticGroup型のアクセシビリティコンテナですアクセシビリティコンテナは Mac Catalystアプリケーションにとって独立したアクセシビリティ要素ですつまり他のアクセシビリティ要素と同じくそのコンテナにローカルのアクセシビリティラベルをつけてくださいこの場合には “コーヒーリスト”が適切でしょう UITableViewは選択されたコーヒーについてその状態を保持するため選択されたコーヒーをラベルに追加することでラベルを更によくすることができますここですばらしいアクセシビリティラベルを加えることの重要性を思い出してくださいよいアクセシビリティラベルを作るために 2019年のプレゼンをお勧めします私たちのアプリケーションに戻ります右の詳細なビューはどうでしょうか？選んだコーヒーに関連するすべての情報を示している機能です詳細ビューはまだグループ化されておらず UITableView や UICollectionViewを使っていないので手動でアクセシビリティコンテナを定義しなければなりません今日はアベイラビリティUIでそれをいかに簡単にコンテナにできるかをお見せします私たちは縦のUIStackViewの中で UILabelsの並びとして実装しましたこれはユーザが各要素を見て回らなければならないことを意味していますアクセシビリティコンテナを加えることでナビゲーションをよりよくすることができましたそしてVoiceOverユーザは全体のリストを素早く見て回ることができます
ここから数行だけでUIStackViewをアクセシビリティコンテナにしグループを示すアクセシビリティラベルをそこに与えることができます
これらはアプリケーションに対するすばらしい改善です関連要素をグループに置くことで Mac Catalystアプリケーションを見て回る方法を大幅に改善できますご自身のアプリケーションに対してもアクセシビリティコンテナを加えるという重要性を忘れないでくださいそれはmacOSとiOS上でのナビゲーションを大幅に改善できる小さな変更なのですあなたのアクセシビリティコンテナがグループを示す簡潔なローカルのラベルを持ちコンテナの状態に関する重要な詳細を含めるようにしてください
ナビゲーションの効率性に関して私が話すことは以上ですこの後はエリックがアクセシビリティに関して Mac Catalystアプリケーションをテストする方法をお見せしますありがとうネイサンアクセシビリティに関したアプリケーションを改善するためのすばらしい成果に対する macOSプラットフォーム上でのテストについてお話ししますアプリケーションを iOSからMac移行する際内部からはiOSのアプリケーションだと見なしますしかし外部ではmacOSプラットフォーム上で動いているため Macのアプリケーションだと考えますするとUIKitからのアクセシビリティAPIで作業をする時私たちがiOSのアクセシビリティコードを macOSへ自動的に変換しますそのためiOSのことを考え続けることができます内部で起こっていることをもっと理解していただくため Mac Catalystアプリケーションのためのアクセシビリティインスペクターを改良しましたでは macOSで走らせた時の iOS APIをお見せします以前にアクセシビリティインスペクターを使ったことがなければ２つのビデオをぜひご覧ください “アクセシビリティのためのアプリケーション監査”と “アクセシビリティインスペクター”ですこれはアクセシビリティインスペクターがどう役立つかについての完全ガイドですすべてのAppleのプラットフォームにわたりアクセシビリティの問題を見つけて解決するための助けになりますではアクセシビリティインスペクターを使い Mac Catalyst上でのあなたのアプリケーションのアクセシビリティを監査してみましょうセルの要素を調べるためにインスペクターを使えばその要素がコーヒーのタイトルを示す適切なラベルを持っているかまた評価を示す適切な値を持っているかが分かりますまたiOSからのアクセシビリティの特徴やコンテナタイプを示す新たな Catalystの項があることも分かりますもしCommand Control Upを使うならインスペクターはコンテナとして役目を果たすセル要素の親を調べます要素のクラスをチェックし調べるべき正しい要素かを確かめられますこの場合クラス名がtableViewクラスに変換された要素であることを示しています UIKitからのすべてのクラスは次第に Macプラットフォームの要素に変換されます加えてインスペクターはそのビューのビューコントローラがあることを伝えてくれますこの場合それはアプリケーションからの RBListViewControllerです VoiceOverがコンテナを読むことを確かめるため tableViewコンテナがローカルのコーヒーリストである― 適切なラベルを持っているか確かめることができますまたsemanticGroupという正しいコンテナ型を持っています
そして今年からアクセシビリティインスペクターはすべての要素のためにオートメーション型を伝えてくれますこの場合それはテーブルなので XCUIテストでそれがどう見つかるか正確に分かりますこれがMac Catalystアプリケーションのためにアクセシビリティインスペクターでできるいくつかの追加事項に関する概要でした楽しんでいただけたと思います
Mac Catalystのアクセシビリティについて今日は多くのことを取り上げましたまとめるとアクセシビリティにとってキーボードアプリケーションが優れていることを説明しましたそのためにキーボードフォーカスとキーボードショートカットを追加しコントロールをアクセシビリティ対応可能にしました
それからMac Catalystアプリケーションへの障害者支援技術に関するナビゲーションの効率性の改善についてお伝えしました既存のiOS APIの accessibilityContainerTypeが Macに与える大きなインパクトとアプリケーションへの採用について話しましたそして最後のアドバイスはアクセシビリティインスペクターを使うことですこれは私たちが開発者の助けとなるように開発したすばらしいツールですそれではご参加いただきありがとうございましたこのプレゼンが Mac Catalystアプリケーションにおいてよりよいアクセシビリティ体験を作り出す助けになることを願っています

4:11 - Ensuring selection automatically triggers when focus moves to a different cell
```
myTableView.selectionFollowsFocus = true
```

extension AppDelegate {
  override func buildMenu(with builder: UIMenuBuilder) {
    super.buildMenu(with: builder)
    let shareCommand = UIKeyCommand(title: NSLocalizedString("Share", comment: ""),
                                    action: #selector(Self.handleShareMenuAction),
                                    input: "I",
                                    modifierFlags: [.command])
    let shareMenu = UIMenu(title: "",
                           identifier: UIMenu.Identifier("com.example.apple-samplecode.RoastedBeans.share"),
                           options: .displayInline,
                           children: [shareCommand])
    builder.insertChild(shareMenu, atEndOfMenu: .edit)
  }
  
  @objc func handleShareMenuAction() {
  }
}

7:20 - Responding to raw key codes

extension MyViewController {
  override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
    switch presses.first?.key?.keyCode {
    case .keyboardLeftGUI:
      // Handle command key pressed
    case .keyboardB:
      // Handle B key pressed
    default:
    }
  }
}

15:45 - Adding accessibility labels to containers, such as UITableView and UICollectionView
```
tableView.accessibilityLabel = NSLocalizedString("Coffee list", comment: "")
```

15:50 - Making great accessibility labels that include state

extension RBListViewController {
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let data = tableData[indexPath.row]
        let label = NSLocalizedString("Coffee list", comment: "")
        let selectedLabel = NSLocalizedString("%@ selected", comment: "")
        tableView.accessibilityLabel = label + ", " + String(format: selectedLabel, data.coffee.brand)
    }

}

16:45 - Adding accessibility containers to improve the navigation experience

let stackView = UIStackView()
stackView.axis = .vertical
stackView.translatesAutoresizingMaskIntoConstraints = false

let locationsAvailable = viewModel.locationsAvailable

let titleLabel = UILabel()
titleLabel.font = UIFont.preferredFont(forTextStyle: .body).bold()
titleLabel.text = NSLocalizedString("Availability: ", comment: "")
stackView.addArrangedSubview(titleLabel)

for location in locationsAvailable {
  let label = UILabel()
  label.font = UIFont.preferredFont(forTextStyle: .body)
  label.text = "• " + location
  label.accessibilityLabel = location
  stackView.addArrangedSubview(label)
}

stackView.accessibilityLabel = String(format: NSLocalizedString("Available at %@ locations", comment: ""), String(locationsAvailable.count))
stackView.accessibilityContainerType = .semanticGroup

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

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

リソース

関連ビデオ

WWDC19