Unityゲームにアクセシビリティを追加する

Unityゲームにアクセシビリティを追加する

オープンソースのAccessibilityプラグインを使用して、AppleプラットフォームでUnityゲームにアクセシビリティ機能を追加する方法を紹介します。そして、サンプルのUnityゲームプロジェクトにVoiceOverやスイッチコントロールなどの支援技術も追加していきます。さらに、Dynamic Typeでテキストサイズを自動的に変更する方法をはじめ、透明度の低減やコントラストの向上など、インターフェイスの調整をサポートする方法も紹介します。

リソース
関連ビデオ

WWDC22
- プラグインと再生：AppleフレームワークをUnityゲームプロジェクトに追加する
♪ ♪
皆さんこんにちは Ericです Unityゲームにアクセスのしやすさを実現しましょう
これはすべての人が私たちの製品を使えるようにすることですそして今日ゲームのための大きな一歩を踏み出しました Appleアクセシビリティプラグインを導入しました Appleの3つの技術に焦点を当てます
VoiceOverは視覚障がい者を支援することができます画面上の項目を読み取りユーザーが操作するためのカスタムジェスチャーを提供します
運動機能に障がいがある方は外部スイッチを利用できるスイッチコントロールを使うことができますそして Dynamic Typeでは文字サイズを設定することができます
まずはリポジトリのクローンを作成します Appleのすべてのプラグインを構築しビルドスクリプトをリポジトリのルートに置いてくださいこれでビルトフォルダが作成され Unityプロジェクトに組み込むことができます最後に Unityパッケージマネージャを使用してプラグインをプロジェクトに追加します詳しくはリポジトリにあるドキュメントをご覧ください Unityプラグイン全般に関するビデオをご覧ください；プラグインと再生：AppleフレームワークをUnityゲームプロジェクトに追加するプラグインが用意できたので 3つのエリアを説明しますまずアクセシビリティについてですこれによって VoiceOverやスイッチコントロールのような支援技術をゲームでサポート可能です次はDynamic Typeですこの使いやすいユーティリティはユーザーの好みに合わせてテキストを拡大縮小するのに役立ちますそして UI適応設定このユーティリティは他のユーザーの設定を読み取るために役立ちますまずはアクセシビリティからスタートしましょう
コンセプトの説明用に簡単なカードゲームを作りました「Flip」ボタンをタップするとランダムに2枚のカードを引くことができますしかし VoiceOverでは画面上の文字が読めず外部スイッチではボタンが押せませんこれは単なるピクセルでしかないからですシステムが相互作用を理解する必要がありますアクセシビリティ要素は支援技術が相互作用できるものを定義します
画面上の文字カードボタンがアクセシビリティの要素であるべきですそして各要素をラベルで説明することができます VoiceOverがラベル読み上げることでユーザーは画面の内容を理解できます
そしてもしこのゲームが多言語に対応していればこのラベルもローカライズすべきですね
さて VoiceOverは画面の表示を説明することはできますがタップできるボタンを認識できません「traits」と呼ばれる別のプロパティを使用してシステムに要素のタイプを通知することができますここにボタンの特性を追加する必要がありますこれでVoiceOverは「Flip button」と読みます外部スイッチがこのボタンをコントロールできます
テキストに「Static Text」特性を追加もできます「Static Text」の特性はラベルやエリアに付与され VoiceOverがより良い相互作用体験を提供します
そして「Button」や「Static Text」を以外にもさらに多くの特徴があります
ではカードにはどのような特徴を持たせればいいでしょうか？すべてのアクセシビリティ要素に特徴を使う必要はありませんカードに特性は必要ありませんしかしそれぞれのカードにはまだVoiceOverが認識していない部分つまりカードフェイスがあるのですもうひとつ「Value」というプロパティがあります
各カードに「Value」を追加すると VoiceOverではカード1はクラブの3をカード2はクラブのエースの値を示します以上です基本を理解したところで Unityを開いてみましょうプロジェクトに追加する方法を確認します
このゲームの Unityエディタにいますすでに Appleアクセシビリティプラグインを追加しました
まずカメラのような通常のシーンオブジェクトがあリマス直射日光そしてUIキャンバスもありますキャンバスの下には 2つのテキスト要素とボタンがありますカード用ゲームオブジェクトを2つ用意しました
各2つのメッシュ部品で構成されています表と裏のテクスチャをそれぞれレンダリングしますまずアクセシビリティ要素を定義しましょうプラグインに構成要素が必要です
階層にあるすべてのアクセシブルにしたいオブジェクトを選択します
そして構成要素を追加してアクセシビリティ要素にします
次にラベルを追加しますカードオブジェクトを選択し右側の「Accessibility Node」構成要素をクリックし「Label」フィールドを探します
またラベルフィールドのチェックボックスがチェックされている
ことを確認します次に「Card 1」と入力します
そしてカード2も同様です
テキストやボタンにもラベルが必要ですが Unity UIの標準コントロールを使用する場合は明確なアクセシビリティラベルの提供は必要ありませんプラグインはすでにデフォルトで実装されています
次にボタンに特徴を追加します
フリップボタンを選択して「traits」を「None」から「Button」に変更します
2つのテキスト要素を選択…
そして「traits」を「Static Text」に変更します
素晴らしいですね最後にカードのアクセシビリティの値を設定しますカードはランダムに引くのでスクリプトを追加して動的に値を設定します
2枚のカードを選択し新しいスクリプトを追加します
まず他のCシャープのファイルの1つですでに Playing Cardというカードフェイスの列挙型があります AccessibleCardの MonoBehaviorスクリプトではカードの種類を表す変数としてカードが上向きか下向きかを表しています
ではアクセシビリティ値を追加してみましょう accessibilityNodeをこのgameObjectにアタッチします
次に accessibilityValue デリゲートをカードのフェイス値を動的に返す関数に設定します
この関数の内部でカードが覆われている場合 accessibilityValueの「covered」を返しますカバーされていない場合はカードフェイスを列挙しそれぞれについて「Ace of Spades」のような説明を返します以上ですではプロジェクトをビルドしてその動きを見てみましょうこれが私たちのゲームです VoiceOverをオンにしましょう
自動音声：VoiceOverオン Ericのゲームカード2 カバーあり Eric：右にスワイプで次の要素に移動できます自動音声：カード1 カバーあり
Ericのカードゲーム
カードをめくる
フリップボタン Eric：5つのオブジェクトがすべて VoiceOverでアクセスできるようになりましたボタンをタップしたい場合はダブルタップします自動音声：フリップ Eric；もう一度カードを確認しましょう
自動音声：カード1 クラブの2
カード2 クラブのエース Eric：VoiceOverで読み上げられるようになりましたかっこいいですね何百万人ものVoiceOverユーザーが私たちのゲームを届けましたねその人たちは今このゲームに恋をしているのです外部スイッチコントロールを使っていてもゲームをプレイできます以上がアクセシビリティ要素でした次に Dynamic Typeについて説明します
ゲームって難しいですよね多くの人にとって文字が小さくて読めないそこで iOSとtvOSでは誰もが設定で自分の読書能力に合った文字サイズを選べます
アクセシビリティプラグインではこの設定値を読み込むことで期待通りの大きさの表示が確認できます
Dynamic Typeの使い方をゲームの例を見てみましょう
DynamicTextSize.csというスクリプトを作ります最初にデフォルトの文字サイズを変数に格納します次にOnEnable関数の内部で設定変更イベントを受信します PreferredTextSizesChangedで AccessibilitySettingsを使用しますこれによりユーザーがテキスト設定を変更するとすぐにUIが更新されます
次に settingsChanged 関数の内部です PreferredContentSize Multiplierを最初に読み込み元の文字サイズに乗じてテキスト要素に割り当て直します Unityエディタ内では Text要素を持つゲームオブジェクトを全て選択します先ほど作成したDynamic TextSizeを追加します
これでDynamic Typeをサポートしました結果を実際に見る前にまず Dynamic Typeをゲームで素早くテストする方法を紹介します設定を開きコントロールセンターを探します
「Text size」が表示されるまで下にスクロールしてください
これでコントロールセンターを開いて文字サイズを変更することができます
素晴らしいですねリアルタイムにフォントサイズが調整されました
コントロールセンターで表示されるテキストパーセンテージ値は先ほどの倍率を読み取っていますこの設定はテキスト以外のオブジェクトにも採用できます例えばカードフェイスのアセットを入れ替えて Large Printに変更するとサイズが大きくなります
まず DynamicCardFacesというスクリプトを作成します先ほどのようにTextSizeChanged イベントにサブスクライブします
倍率を読み取る代わりにスライダーの目盛りにマッピングされた文字サイズカテゴリの列挙を読みます大きいサイズが選択されるといつでもアセットを入れ替えることができます
そして通常の素材と大判の素材のどちらかを選ぶだけですでは大きなサイズを選ぶと…
ユーザーは大判のカードを見ることになり弱視の人にとても読みやすい素晴らしいカードフェイスです
最後にこのプラグインからアクセスできる UI適応設定についてお話したいと思います
最初の設定は透明度を下げることですこの設定がオンの場合背景が不透明になりますぼかしや透明感のある効果ではなく読みやすさを向上させることができますこの設定を確認するには AccessibilitySettings IsRuceTransparency Enabledを呼び出します
次にコントラストを上げる設定ですダークグレーでスイッチ類を目立たせていますデバイス全体でコントロールを認識しやすくします
AccessibilitySettings. IsIncreaseContrastEnabled この設定を確認することでこれが有効なときにあなたのUIでコントラストを上げることができます
次に動きを抑える設定です動きに対して敏感な人もいます
このアニメーションは「Reduce Motion」がオンの時は削除する必要があります
これを実行するためのコードを見てみましょう
CardControllerスクリプトに Flip関数があります Reduce Motionがオンになっているかを確認しますオンではない場合コルーチンでアニメーションを起動しますそれ以外は回転を設定するだけですアニメーションはなしです以上ですこのように動きに敏感な方にも楽しんでいただけますまとめですまずApple Accessibility プラグインを使い始めるにはセッションにリンクされているGitHubのリポジトリをクローンします
アクセシビリティ要素の追加して VoiceOverやスイッチコントロールを使ってユーザーがゲームを楽しめるようにしましょう
Dynamic Typeで文字サイズを変更できます
そして UI適応設定についても確認しましたね誰もが素晴らしい体験ができるよう願っています
ご参加ありがとうございましたアクセシビリティに優れた誰もが楽しめるゲームをどのように実現するか楽しみにしています

public enum PlayingCard
{
    AceOfSpade,
    AceOfClubs,
    AceOfDiamonds
}

7:53 - AccessibleCard class

using Apple.Accessibility;
public class AccessibleCard : MonoBehaviour 
{
    public PlayingCard cardType;
    public bool isCovered;
    void Start()
    {
        var accessibilityNode = GetComponent<AccessibilityNode>();
        accessibilityNode.accessibilityValueDelegate = () => {
            if (isCovered) {
              return "covered";
            }
            if (cardType == PlayingCard.AceOfSpades) {
              return "Ace of Spades";
            }
        }
    }
}

10:35 - DynamicCardFaces

public class DynamicCardFaces : MonoBehaviour
{
    public Material RegularMaterial;
    public Material LargeMaterial;
    void OnEnable()
    {
        AccessibilitySettings.onPreferredTextSizesChanged += _settingsChanged;
    }

    void _settingsChanged() 
    {
        var shouldUseLarge = AccessibilitySettings.PreferredContentSizeCategory >= 
            ContentSizeCategory.AccessibilityMedium;
        GetComponent<Renderer>().material = shouldUseLarge ? RegularMaterial :
            LargeMaterial;
    }
}

10:36 - Dynamic Type

using UnityEngine.UI;
public class DynamicTextSize : MonoBehaviour
{
    int originalSize;
    void Start()
    {
        originalSize = GetComponent<Text>().textSize;
    }

    void OnEnable()
    {
        AccessibilitySettings.onPreferredTextSizesChanged += _settingsChanged;     }

    void _settingsChanged() 
    {
        GetComponent<Text>().textSize = (int)(originalSize *
            AccessibilitySettings.PreferredContentSizeMultiplier);
    }
}

14:54 - Reduce motion

using Apple.Accessibility;
public class CardController : MonoBehaviour
{
    public void Flip() 
    {
        var reduceMotionOn = !AccessibilitySettings.IsReduceMotionEnabled;
        if (!reduceMotionOn)
        {
            StartCoroutine(Animate());
        }
        else 
        {
            transform.rotation = Quaternion.identify;
        }
    }
    IEnumerator Animate()
    {
    } 
}

リソース

関連ビデオ

WWDC22