WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Swan's Quest, Chapter 1: Voices in the dark

Swan's Quest, Chapter 1: Voices in the dark

Accessibility & InclusionSwiftSwift PlaygroundsVoiceOver
元の動画を見る

ハイライト

Swan’s Quest の第 1 章では、開発者が Swift Playgrounds の VoiceOver と AccessibilityHints を使用して、洞窟のトーチのグラフィックに読み取り可能なラベルを追加し、目に見えないレベルをナビゲート可能なプログラミングの課題に変えることができます。

主要内容

Swan’s Quest は、WWDC 2020 の 4 章からなる Swift Playgrounds チャレンジです。最初の章では、プレイヤーは暗い洞窟に入れられます。VoiceOver を使用して画面上の松明を見つけ、意味のあるラベルを追加しない限り、キャラクターは道が見えず、動くこともできません。 (00:41)

この設定により、アクセシビリティの問題がプレイ可能なタスクに変わります。ラベルがないと、VoiceOver はほとんどコンテキストのない「トーチ 2、グラフィック」のような情報しか読み取れません。講演者はこのエクスペリエンスをアプリ内の名前のないボタンの列に例​​えましたが、ユーザーには「ボタン、ボタン、ボタン」としか聞こえません。 (09:13)

Apple が提供する解決策は非常に簡単です。まず、VoiceOver の基本的なナビゲーションを学び、次に Swift Playgrounds コンテンツ SDK の Accessibility API を使用します。Graphic、Button、Sprite、Labelから継承されますBaseGraphic、これらの要素を渡すことができますaccessibilityHintsVoiceOver およびその他のアクセシビリティ サービスに公開されます。 (11:48)

最後の課題はコードにあります。不明瞭なトーチ名をわかりやすい名前に置き換える必要がありますaccessibilityLabel。 VoiceOver がトーチの上で停止すると、読み取った内容がプレイヤーに位置、危険、または手がかりを伝えるため、キャラクターは白鳥に会うために洞窟を通過するのに十分な情報を得ることができます。 (13:09)

詳細

プレイグラウンドのグラフィックスにアクセスできるようにする

(12:21) Swift Playground コンテンツ SDKGraphic、Button、SpriteそしてLabelから継承されますBaseGraphic。BaseGraphicオプションaccessibilityHints、これは画面要素を VoiceOver に引き渡すためのエントリ ポイントです。

//  Graphic.swift

open class BaseGraphic: InternalGraphic {

    public var accessibilityHints: AccessibilityHints?

    // ...
}

キーポイント:

  • BaseGraphicはこれらの画面要素の共通の基盤であるため、同じアクセシビリティのヒントのセットで複数の種類のコンテンツをカバーできます。
  • accessibilityHintsこれはオプションの属性であり、補助サービスに公開する必要がある要素にのみ設定する必要があります。
  • この講演では、このプロパティを設定すると画面要素が VoiceOver で読み取れるようになり、他のユーザー補助サービスでも表示できるようになると明示的に述べられています。

VoiceOver を残すかどうかと何を読むかを定義します

（12:32）AccessibilityHints少なくとも 2 つの情報が必要です。makeAccessibilityElementVoiceOver カーソルがこの要素上で停止するかどうかを決定します。accessibilityLabelVoiceOver が一時停止されているときに読み上げられるテキストです。

//  AccessibilityHints.swift

public struct AccessibilityHints: Codable {

   /// Indicates a graphic should be treated as a UIAccessibilityElement by VoiceOver.
   public var makeAccessibilityElement: Bool = false

   /// Label spoken by VoiceOver for the accessible graphic (a localized character name).
   public var accessibilityLabel: String?

   // ...

}

キーポイント:

  • makeAccessibilityElementに設定trueこの場合にのみ、VoiceOver はグラフィックを滞在可能な要素として扱います。
  • accessibilityLabelこれは開発者がデバッグするためではなく、ユーザーが聞くために書かれるべきです。洞窟の松明は、その位置と意味を説明する必要があります。
  • 構造はCodableこれは、プレイグラウンド ブックのコンテンツをパッケージ化し、ダウンロードし、使用のために検査する方法と一致しています。

プロンプトを特定のグラフィックにバインドする

(12:45) このスピーチでは、プロセスを説明するためにボタンのグラフィックの例を使用しています。 まず作成します。AccessibilityHints、再度作成しますGraphic、最後にプロンプ​​トをグラフィックに割り当てます。

// Make an Accessible Graphic

import SPCCore
import SPCAccessibility

let hints = AccessibilityHints(makeAccessibilityElement: true,
                               accessibilityLabel: "Activate button to start the party")

let graphic = Graphic(name: "Let's get it Started")
graphic.accessibilityHints = hints

キーポイント:

  • SPCCore供給Graphicなど コンテンツ SDK タイプ。
  • SPCAccessibility供給AccessibilityHints。
  • AccessibilityHints(makeAccessibilityElement: true, accessibilityLabel: ...)フォーカス露光と文字設定の読み取りを同時に完了します。
  • graphic.accessibilityHints = hintsは、このシェイプを実際に VoiceOver パスに入れるアクションです。

抽象的な例を洞窟のトーチに落とします

(13:51) 第 1 章の実際のタスクは、洞窟内のトーチのラベル​​を書くことです。ラベルは装飾的なコピーライティングではありません。これらは、プレーヤーが暗いシーンで自分の現在位置を理解できるかどうかを直接決定します。

// activate torch1 and torch2

cave.torch1.accessibilityHints = AccessibilityHints(makeAccessibilityElement: true,
        accessibilityLabel: "Torch next to a stairwell, where dripping water can be heard.")
cave.torch2.accessibilityHints = AccessibilityHints(makeAccessibilityElement: true,
        accessibilityLabel: "Right before the edge of the platform—be careful!")

キーポイント:

  • cave.torch1そしてcave.torch2これはレベル内の特定のグラフィック オブジェクトです。
  • 両方のトーチがセットされていますmakeAccessibilityElement: true, そのため、VoiceOver は 1 つずつ一時停止できます。
  • 最初のラベルには階段と水の滴る音が記載されており、プレイヤーに場所の手がかりを与えます。
  • 2 番目のラベルはプラットフォームの端を示し、プレイヤーにアクションのリスクを与えます。
  • このコードは、スピーチの終わりの要件に対応しています。ラベルを耳で確認し、役に立たない名前を説明的な内容に変更します。

重要ポイント

  • VoiceOver の最初のレベルを作成: プレーヤーが視覚的なキューをオフにして、VoiceOver タグのみを介して移動できるようにします。実行する価値がある理由: セッションは暗い洞窟をアクセス可能な訓練場に直接変えます。プレイヤーは説明的なタグに頼って先に進む必要があります。開始方法: キーを入れますGraphicオブジェクトの設定accessibilityHints、次に使用しますaccessibilityLabel場所、危険、目的を説明します。

  • カスタム コントロールの 1 分間の削除テストを実行します: アプリを開いた後、最初の画面を参照するためにのみ VoiceOver を使用し、「ボタン」、「グラフィック」、またはファイル名のみを読み取るすべての要素を記録します。実行する価値がある理由: 講演者らは、名前のないボタンを使用するとユーザーは最初の 1 分でオフになると述べています。開始方法: 最も一般的なプロセスから始めて、すべてのボタン、画像、カスタム グラフィックに実行可能または理解可能なラベルを追加します。

  • Swift Playgrounds ブックをリミックス可能な教材に変える: 各練習ページにダウンロード可能な開始点を提供し、学習者がコンテンツ SDK を開いた後にその使用法を直接確認できるようにします。実行する価値がある理由: Swan’s Quest とテンプレートはどちらも Developer アプリからダウンロードできるため、開発者はそれらを分解して、Apple がどのように課題を構築するかを確認できます。開始方法: 最小限の遊び場の本を用意し、それを 1 ページにまとめます。GraphicそしてAccessibilityHintsタスク。

  • 音と環境の合図にタグを付ける: オブジェクトの名前だけでなく、プレイヤーが決定を下すために必要な情報も書きます。実行する価値がある理由: 洞窟の例にある水滴の音、階段、プラットフォームの端はすべて、プレイヤーが空間を理解するのに役立ちます。開始方法: デザイン内のすべての主要な視覚的手がかりに対応する VoiceOver コピーを用意します。

  • アクセシビリティ チェックを公開ステップに含める: Playgrounds コンテンツを公開する前に、iPad または Mac で VoiceOver をオンにして、チャレンジを完了してください。実行する価値がある理由: このセッションでは、まず VoiceOver と基本的なジェスチャーをオンにする方法を教え、次にレベルを完了するためにそれを使用する必要があります。開始方法: アクセシビリティ ショートカットまたは Command-F5 キーを押して VoiceOver をオンにし、フォーカスの順序とタブのコンテンツを順に操作します。

関連セッション

コメント

GitHub Issues · utterances