アプリにアクセスできるようにする

App Maker アプリは、障がいのある人を含むすべての人が使用できる必要があります。アプリの使用に影響する一般的な障がいには、失明や弱視、色覚異常、難聴や聴覚障害、運動能力の制限などがあります。

ユーザー補助を念頭に置いてアプリを開発すると、障がいのある人だけでなく、すべてのユーザーのユーザー エクスペリエンスが向上します。

ユーザー補助の設計

ユーザー補助の設計には、アプリのレイアウト、サイズ、色、ナビゲーションに加え、アダプティブ テクノロジーおよび支援テクノロジーとのやり取りが含まれます。

あらゆる能力のユーザーがアプリを使えるようにするには、マテリアル デザインのユーザー補助に関するベスト プラクティスを使用してください。次の表に、ユーザー補助の考慮事項と設計の主な原則を示します。

ユーザー補助の設計のベスト プラクティス
明確で順応性のあるレイアウトとデザイン シンプルでわかりやすく整理されたレイアウトを使用して、ユーザーが簡単にアプリを使用できるようにします。具体的には次のようにします。
  • 高倍率でも要素がはっきりと見えるようにする必要があります。
  • レイアウトをさまざまな画面サイズに適応させるには、レスポンシブ デザインを使用します。
  • テキスト、ボタン、その他の要素が十分に大きく、高いコントラストが使用されている必要があります。色以外の方法も用いて、情報の伝達やコンテンツの識別を行う必要があります。
  • タイムアウト後にフェードする要素がアプリにある場合、タスクを完了するために必要な要素にはタイムアウトを設定しないでください。
  • ヘッダー、リスト、テーブルのマークアップを完了し、修正します。適切なマークアップは、アダプティブ テクノロジーがコンテンツを読み上げたり、拡大したり、コントラストを変更したり、その他の方法で適応させるのに役立ちます。
わかりやすいナビゲーション
  • ナビゲーションには、明確で短いタスクフローが必要です。
  • ナビゲーションは見つけやすく、ページ間で一貫している必要があります。たとえば、同じメニュー ナビゲーションと検索ボックスを含むヘッダー テンプレートを各メニューで使用します。
  • ページ要素を論理的な順序で整理します。
  • 関連するアイテムを説明ヘッダーの下にグループ化します。
わかりやすい UI 要素のラベル 各インタラクティブ要素の目的をユーザーに説明する、有用でわかりやすい固有のラベルを提供します。こうしたラベルにより、スクリーン リーダーを使用するユーザーに特定のコントロールの機能を適切に説明できます。
メディアの代替テキストまたは説明 情報を含まない画像または動画の場合、コンテンツを簡潔に説明する代替テキストを提供します。

グラフや図など、ユーザーが知る必要がある情報が画像に含まれている場合は、データの説明を含めます。

情報量の多い動画の場合は、キャプションを追加するか、全文の文字起こしを提供します。
サウンドと動画の制御 ユーザーが動画の一時停止または停止、音量の調整、キャプションのオンとオフの切り替え(該当する場合)を行えるようにする必要があります。
キーボードの制御 ユーザーがキーボード(通常は Tab キーまたは矢印キー)のみでアプリをナビゲートおよび使用できるように、アプリを調整します。

キーボード フォーカスが表示され、ページ全体を通して直感的でアクション重視のシーケンスに従うようにする必要があります。ユーザーがダイアログを閉じたり、フォームを送信したりしたときにフォーカスが失われないようにしてください。

たとえば、[App Maker](https://appmaker.google.com/){:.external target="_ blank"} を開き、キーボードのみを使用してアプリ内を移動します。
エラーに関するヘルプ 可能であれば、問題の解決方法を示すエラー メッセージの説明テキストを提供します。

重要なアクションを元に戻せるようにしたり、続行する前の確認を必須にしたりします。たとえば、データを削除することを確認してから続行するようにユーザーに依頼します。
データ収集の自動化 クライアント スクリプトを使用すると、ユーザーのユーザー名、メールアドレス、レコードが作成された日付などのセッション情報を自動的に取得できます。たとえば以下のスクリプトでは、ユーザーのメールアドレスが取得され、[ユーザー] フィールドに保存されます。日付データも取得されて [日付] フィールドに保存されます。

    record.user = Session.getActiveUser().getEmail();
    record.date = new Date();
    

App Maker ユーザー補助ツール

App Maker を使用すると、いくつかの方法でユーザー補助アプリを設計できます。

  • 組み込みのマテリアル デザインのテーマは、コントラストとサイズの推奨事項を満たしています。
  • App Maker 要素には ariaLabel プロパティがあります。デフォルトのスクリーン リーダーの動作をオーバーライドするか、カスタム ウィジェットの ARIA ラベルを追加する必要がある場合は、このプロパティを WAI-ARIA(Accessible Rich Internet Applications)のセマンティクスに使用します。
  • ユーザー アクションの結果(テーブル行の削除など)がスクリーン リーダーによって自動的にアナウンスされない場合、app.accessibility.announce() クライアント API 関数を使用して、スクリーン リーダーにテキストを提供できます。詳細については、ユーザー補助をご覧ください。

ARIA ラベルを使用して UI の説明をカスタマイズする

App Maker ページの各要素には、ARIA ラベル プロパティがあります。ariaLabel プロパティでは、視覚障がいのあるユーザーにウィジェットの目的を伝えるために支援テクノロジーによって使用される ARIA ラベル HTML 属性を設定します。

スクリーン リーダーは、HTML マークアップからコンテキストとラベルを直接取得するように設計されています。ほとんどの場合、ARIA ラベルを明示的に入力する必要はありません。

次の場合に ARIA ラベルを設定します。

  • 要素のデフォルト名をオーバーライドする場合(スクリーン リーダーのユーザーにボタンのよりわかりやすい名前を提供する場合など)
  • スクリーン リーダーが検出できないアクションを持つカスタム ウィジェットを作成する場合。たとえば、表示 / 非表示の切り替えが可能な折りたたみ可能パネルを作成する場合などです。この場合、パネルの状態を説明するテキストを提供し、キーボード フォーカスをパネル内で移動させる方法、パネル内に移動させる方法、およびパネルから離れさせる方法を指定する必要があります。

ウィジェットの ariaLabel プロパティを設定するには:

  1. ウィジェットを選択し、そのプロパティ エディタ タブに移動します。
  2. [その他] をクリックします。
  3. テキストの値を入力するか、値をバインドします。

    • テキストを入力するには、[ariaLabel] ボックスをクリックします。
    • 値をバインドするには、下矢印アイコンをクリックしてソースを選択します。

スクリーン リーダーにテキストを提供する

スクリーン リーダーは、ダイアログ、ポップアップ、メニューが開くときなど、アプリの UI に関する多くの変更をアナウンスします。テーブル行の作成やスピナー ウィジェットの起動など、ユーザー アクションの結果としてアプリのインターフェースが変更された場合、視覚障がいのあるユーザーはその変更に気付かないことがあります。

こうした変更をユーザーに知らせるには、関数 app.accessibility.announce を使用するスクリプトを追加できます。これにより、アクションの一部としてアナウンスを行うようにスクリーン リーダーに指示できます。

たとえば、テーブルを持つアプリを作成するとします。テーブルのレコードを削除するには、アプリのユーザーがボタンをクリックして行を削除します。行が削除されたこと(またはアクションが機能しない場合は行が削除されなかったこと)をスクリーン リーダーにアナウンスさせるには、ボタンの onClick アクションを次のように設定します。

widget.datasource.deleteItem({
      success: function (record) {
        app.accessibility.announce(‘Record was deleted and removed from the table.');
        console.info('Record with ID ' + record.id + ' was deleted from the database.);
      },
      failure: function (error) {
        app.accessibility.announce("The record wasn't deleted. Please try again");
        console.info('Record with ID ' + record.id + ' couldn't be deleted.');
      }
    });
    

このサンプルでは、非同期コールバック関数を使用して、アクションの成功または失敗をユーザーにアラートしています。