WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Accessibility design for Mac Catalyst

Accessibility design for Mac Catalyst

WWDC 2020AccessibilityMac CatalystUIKit
元の動画を見る

ハイライト

Mac Catalyst は iOS のアクセシビリティ情報を自動的に変換しますが、開発者は Mac 上でキーボード フォーカス、ショートカット キー、セマンティック グループ ラベルを完了し、アクセシビリティ インスペクターを使用して macOS 上の UIKit アクセシビリティ プロパティのマッピングを確認する必要があります。

主要内容

すでにアクセス可能な iPad アプリを Mac に導入しても、アクセシビリティの取り組みが終わったわけではありません。 UIKit は多くの iOS アクセシビリティ情報を Mac Catalyst に変換しますが、ユーザーが Mac でアプリを使用する方法は変わりました。キーボードが主な入力デバイスであり、VoiceOver は要素ツリー内を移動するのにキーボードに依存し、デスクトップ インターフェイスは多くの場合 iPad よりも高密度です。

セッションは、Roasted Beans コーヒー サンプル アプリを使用して拡張されます。このアプリは iOS でのアクセシビリティに合わせて調整されており、Mac Catalyst を通じて macOS 上で実行できるようになりました。 UIKit では最初から、ボタン、サイドバー、ツール ボタンがタブ フォーカス サイクルに入ることが可能でした。ユーザーが矢印キーを押してテーブル ビュー オプションを切り替える場合、一部のリストでは開発者が新しいオプションを明示的に有効にする必要があります。selectionFollowsFocus API。

キーボードは最初のレイヤーにすぎません。 Mac ユーザーは、共有、追加、評価などの一般的なアクションのためのショートカット キーも期待しています。支援技術に依存しているユーザーにとって、画面上のボタンを繰り返し検索するのは負担となる場合があります。高頻度の操作をメニュー バーとショートカット キーに配置すると、ナビゲーション コストを削減し、iOS のフル キーボード アクセスにフィードバックできます。

2 番目の層は、VoiceOver ナビゲーションの効率化です。 iOS では、ユーザーはタッチを使用して画面上の要素にすばやくジャンプできます。 Mac にはそのようなショートカットはなく、VoiceOver ユーザーはキーボードを使用してアクセシビリティ ツリー内を移動する必要があります。インターフェイスが 26 個のアクセス可能な要素を公開している場合、ユーザーは目標に到達するまでに多くのキーを押す必要がある場合があります。accessibilityContainerType関連する要素をグループ化することにより、Mac Catalyst はコンテナをツリー内の独立したノードとして扱い、ユーザーがグループ内の詳細を入力するかどうかを決定する前にグループ全体をスキップできるようにします。

ついにテストがやって来ます。開発者は依然として UIKit アクセシビリティ API を作成していますが、アプリは macOS 上で実行されます。 WWDC 2020 の Accessibility Inspector には新しい Catalyst エリアがあり、iOS 特性、コンテナ タイプ、オートメーション タイプ、UIKit ビュー コントローラ情報が表示されます。これは、変換された Mac アクセシビリティ ツリーが期待どおりであるかどうかを開発者が確認するのに役立ちます。

詳細

1. リストの選択がキーボードのフォーカスに従うようにします

(03:58) UIKit では、デフォルトで多くのコントロールがキーボード フォーカス サイクルに参加できるようになります。のためにUITableViewまたはUICollectionView、方向キーが選択を同期的に変更しない場合、セッションによって与えられる入り口は次のとおりです。selectionFollowsFocus。

myTableView.selectionFollowsFocus = true

キーポイント:

  • selectionFollowsFocusフォーカスを移動するときに、矢印キーを使用してテーブル ビューまたはコレクション ビューの選択を自動的に更新できるようにします。 -UISplitViewサイドバーのテーブル ビューは、UIKit によってこの動作を自動的に有効にします。
  • 通常のリストは、インターフェイスの意図に基づいて開発者が手動で開く必要があります。
  • この設定により、Mac での「フォーカスは合っているのに選択範囲が追従しない」という問題が解決されます。

2. 高頻度のアクションをメニュー バーとショートカット キーに統合する

(05:56) サンプル アプリは、共有操作に Command-I を追加したいと考えています。実装パスは上書きされますAppDelegate.buildMenu(with:)を作成します。UIKeyCommand、そしてそれを次のように扱いますUIMenu子がメニュー バーに挿入されます。

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() {
  }
}

キーポイント:

  • buildMenu(with:)Mac Catalyst メニュー バーのカスタマイズへの入り口です。 -UIKeyCommandのtitleメニュー項目に表示されるので、ローカライズされた文字列を使用してください。 -input: "I"そしてmodifierFlags: [.command]Command-I に対応します。 -action実際に共有を処理するセレクターを指します。 -UIMenu使用.displayInline、単一の共有コマンドがターゲット メニューの場所に直接表示されます。 -builder.insertChild(..., atEndOfMenu: .edit)コマンドを編集メニューの最後に置きます。

(07:16) セッションでは、iOS 13.4 以降で使用できることにも言及しましたUIPress元のキーコードを読み取ります。ゲームまたは低レベルのキーボード コントロールは、特定のキーストロークに直接応答できます。

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:
    }
  }
}

キーポイント:

  • pressesBegan(_:with:)キーを押すと応答者を入力します。 -presses.first?.key?.keyCode特定のキー位置を読み取ることができます。 -.keyboardLeftGUI左側のコマンドキーに対応します。 -.keyboardBBキーに対応します。
  • このタイプのプリミティブ イベントは、完全なキーボード コントロールを必要とするゲームやインターフェイスに適しています。通常のメニューコマンドが最初に使用されますUIKeyCommand。

3. accessibilityContainerType を使用して VoiceOver ナビゲーションのコストを削減する

(09:00) VoiceOver はアクセシビリティ ツリーに従ってインターフェイスを読み取ります。 iOS モデルでは、アクセス可能な要素は通常、リーフ ノードのレイヤーです。 Mac では、ユーザーはキーボードを使用して項目ごとに移動しますが、複雑なインターフェイスでは連続ノードが多すぎます。セッションのロースト Bean の例では、グループ化する前に 26 個の表示およびアクセス可能な要素があります。

（10:49）accessibilityContainerType要素同士が関係を確立できるようにします。 Mac Catalyst はコンテナ自体をアクセシビリティ ツリーに配置し、コンテナ内の要素がサブツリーになります。ユーザーは、最初にコンテナに焦点を当てることも、コンテナ全体をスキップすることも、コンテナ内のナビゲーションを続行することも選択できます。

(15:28) 標準UITableViewそしてUICollectionViewデフォルトはすでにsemanticGroup。開発者は、これらのコンテナに明確なローカリゼーション タグを追加する必要があります。

tableView.accessibilityLabel = NSLocalizedString("Coffee list", comment: "")

キーポイント:

  • UITableViewそれ自体がすでにセマンティック グループ化コンテナーです。
  • Mac Catalyst は、コンテナを独立したフォーカス可能なノードにします。
  • コンテナには独自のコンテナが必要ですaccessibilityLabelそうしないと、コンテナにフォーカスしたときに VoiceOver でコンテキストが失われます。
  • タグには「コーヒーリスト」など、グループの内容を記述します。

(15:50) コンテナーに状態がある場合、ラベルにはキーの状態も含まれている必要があります。例: コーヒーを選択した後、現在のブランド名をテーブル ビューのアクセス可能なラベルに書き込みます。

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)
    }

}

キーポイント:

  • didSelectRowAtコンテナのステータス ラベルを更新するのに適切な場所です。 -labelコンテナとは何かを説明します。 -selectedLabelコンテナが現在選択しているものを説明します。 -String(format: selectedLabel, data.coffee.brand)ビジネス ステータスをアクセス可能なコピーに関連付けます。
  • このようにすると、VoiceOver ユーザーは、リスト コンテナーに注目したときに、最初にリスト名と現在の選択内容を聞くことができます。

4. カスタム情報領域をセマンティック グループに手動でグループ化する

(16:21) Roasted Beans の右側にある詳細領域は、テーブル ビューでもコレクション ビューでもありません。利用可能な場所は垂直方向に実装されます。UIStackView、複数ありますUILabel。そのままにしておくと、VoiceOver ユーザーは一度に 1 つずつタブを操作することになります。セッション用accessibilityContainerType = .semanticGroupスキップ可能または入力可能なグループにします。

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

キーポイント:

  • UIStackView視覚的に関連した利用可能な場所のセットをホストする責任を負います。
  • それぞれUILabelまだ自分のものを持っていますaccessibilityLabel, グループに入ると項目ごとに読むことができます。 -stackView.accessibilityLabelグループ全体に概要を伝えます。
  • ユーザーがエリアのサイズを知る前にすべての場所を聞くことを防ぐために、概要内の場所の数を使用します。 -.semanticGroupiOS の一般的なコンテナ タイプです。 Mac Catalyst はそれをフォーカス可能なグループ ノードにマップします。
  • グループが多すぎると、内部要素を見つけるのが難しくなる可能性があるため、口頭で説明したときに自然にグループ化されるリボン、類似のアイテム、または領域を使用すると効果的です。

5. アクセシビリティ インスペクターを使用して Catalyst マッピングを検査します。

(18:48) セッションでは、最後にアクセシビリティ インスペクターのデモを行います。 Mac Catalyst アプリは macOS 上で実行されますが、開発者は UIKit アクセシビリティ API を使用してそれを作成しました。新しいインスペクターは、Catalyst エリアに iOS API 側の情報を表示します。

セルを検査するとき、インスペクターは要素のラベルと値を表示できます。 Command-Control-Up を使用して親の検査を続けると、テーブル ビュー コンテナに移動し、コンテナ タイプ、UIKit クラスに変換された Mac プラットフォーム要素、それに含まれるビュー コントローラ、およびオートメーション タイプが表示されます。開発者はこの情報を使用して確認できます。accessibilityLabelそしてaccessibilityContainerType実際に macOS アクセシビリティ ツリーに入ったかどうか。

重要ポイント

  • 何をすべきか: Mac Catalyst アプリでキーボード フォーカス監査を実行します。 実行する価値がある理由: セッションでは、キーボードが macOS の主な操作方法であり、すべての対話型コントロールがキーボード フォーカスを取得できる必要があると明確に述べています。 開始方法: システム設定で「キーボード ナビゲーションを使用してコントロール間でフォーカスを移動する」をオンにし、Tab、矢印キー、スペースを使用してコア ページを移動します。フォーカスによって変化しない項目を選択するUITableViewまたはUICollectionView設定selectionFollowsFocus = true。

  • 対処方法: 高頻度の操作をメニュー コマンドとキーボード ショートカットに変換します。 価値がある理由: 支援技術ユーザーの場合、画面上のボタンを検索すると動作が遅くなる可能性があります。ショートカット キーを使用すると、共有、追加、評価などのアクションに直接アクセスできます。 開始方法:AppDelegate.buildMenu(with:)作成年UIKeyCommand、ローカリゼーションを設定しますtitle、action、inputそしてmodifierFlags、その後パスしますUIMenuBuilder適切なメニューを挿入します。

  • やるべきこと: 複雑な詳細ページのアクセシビリティ グループを設計します。 実行する価値がある理由: Mac の VoiceOver ユーザーは、キーボードを使用して項目ごとに移動します。グループ化により、長いリスト形式のアクセシビリティ ツリーを AppKit に近い階層ツリーに変えることができます。 開始方法: 概要の詳細、利用可能な場所、フィルターなど、機能分野ごとに自然なグループを特定します。コンテナのローカリゼーションを設定するaccessibilityLabel、 またaccessibilityContainerTypeに設定.semanticGroup。

  • 内容: コンテナーのラベルに現在の状態を含めます。 実行する価値がある理由: Mac Catalyst ではコンテナが独立してフォーカス可能なノードになり、ユーザーはフォーカスするときにグループ名とキーのステータスを聞く必要があります。 開始方法: 選択の変更、フィルターの変更、またはデータの更新後にコンテナーを更新しますaccessibilityLabelたとえば、リスト名と現在選択されている項目をローカライズされた文に結合します。

  • 内容: Mac Catalyst 回帰テストにアクセシビリティ インスペクターを追加します。 実行する価値がある理由: Inspector は、Catalyst にマッピングされた特性、コンテナー タイプ、オートメーション タイプ、および UIKit ビュー コントローラーを表示できます。これは、macOS 上の UIKit アクセシビリティ API の実際の結果を確認するのに適しています。 開始方法: コア ページの子要素と親コンテナを確認し、セルにラベル/値があり、テーブル ビューまたはカスタム コンテナにラベルと値があることを確認します。semanticGroup、UI テストの配置の自動化タイプを記録します。

関連セッション

コメント

GitHub Issues · utterances