アクセシビリティ対応モバイルデザインガイドラインに従う

コンポーネントを作成してモバイル画面でテストを行う前に、デザインをアクセシビリティ対応にするためのベストプラクティスに従います。

ビューポートのサイズが小さく、処理能力が低下するモバイルの特性のために、レイアウト、制御メカニズム、ナビゲーションの設計が制約される可能性があります。これらの制約はモバイルユーザのアクセシビリティに影響します。たとえば、ユーザがアプリケーションを放棄する原因になるほど小さすぎるタッチ対象を想像してみてください。

利点は、モバイルデバイスはデスクトップと同様の Web テクノロジで動作し、通常はフル機能の Web サイトを処理できることです。モバイルでコンポーネントにアクセスできるようにするには、一般的な Web 設計とアクセシビリティのベストプラクティスに従います。モバイル画面のアクセシビリティガイドラインを設計の初期段階で考慮し、リリース時に想定外のことが起きないようにしましょう。

できる限り基本コンポーネントを使用します。基本コンポーネントには SLDS スタイル設定が実装されているため、Salesforce モバイルアプリケーションのデザインと一致させることができます。また、アクセス性の高い機能も組み込まれています。基本コンポーネントのスタイル設定を行うには、設計バリエーション、スタイル設定フック、および設計トークンを使用します。これらの技法が要件を満たしていない場合は、SLDS コンポーネントブループリントを使用して、独自のコンポーネントを作成してください。

一部の基本コンポーネントはモバイルに対応していません。たとえば、lightning-tabset と lightning-tab は Tabs の SLDS コンポーネントブループリントに基づいています。ただし、モバイルではタブは積み重ねずに、狭い画面に適応するようにします。デバイスサポートの詳細は、「コンポーネントの参照」を参照してください。

モバイルアプリケーションまたはページの設計に一貫性を持たせるには、SLDS トークンを使用します。小さい画面では読みづらいため、$font-size-4 (14 ピクセル) より小さいフォントサイズは使用しないでください。次のフォントガイドラインを考慮してください。

入力表示ラベルなどのセカンダリテキストには、$font-size-4 (14 ピクセル) を使用する
入力値などのプライマリテキストには、$font-size-5 (16 ピクセル) を使用する。
フォームのセクションなどのヘッダーには、$font-size-6 (18 ピクセル) を使用する
レコード名などのタイトルには、$font-size-7 (20 ピクセル) を使用する

パディングではコンテンツの周囲に余白が設けられます。一貫性のあるスペーシングシステムを使用して、アプリケーションページを見やすく整理します。アプリケーション全体で一貫したレイアウトを実現するには、SLDS パディングユーティリティを使用することをお勧めします。パディング以外にも、位置揃え、余白、テキスト、その他多くの SLDS ユーティリティを使用します。

モバイル画面の色は、ユーザがグレアや移動に対応しなければならないため特に重要です。テキストと情報アイコンには、適切な色のコントラストを設定する必要があります。色のコントラスト比は、通常サイズのテキストは 4.5:1 以上、アイコンと大きなテキストは 3:1 を目安にします。大きなテキストは 24 ピクセル以上、または太字は 18 ピクセルにします。

タブやカルーセル内のコンテンツは見落とされやすく、アクセシビリティや見つけやすさに問題があります。タブまたはカルーセルを使用する必要がある場合は、ユーザが 3 または 4 ステップで最後の項目に到達できるようにスワイプの使用を最小限にします。多数の項目を提示するには、リストビューを利用するなど、ビューポート内のコンテンツを縦方向に提示することをお勧めします。リストビューでは、ユーザはページの任意の項目に直接アクセスできます。または、lightning-card 基本コンポーネントを使用して関連する情報グループの周囲にコンテナを適用し、Salesforce モバイルアプリケーションのデザインに一致させることもできます。テーブルを使用してデータを表示する場合、狭い画面ではテーブルは応答的にタイルリストに折りたたまれます。「データの表示」を参照してください。

タップまたはスワイプなどのジェスチャにより、ユーザは画面の要素を操作できます。しかし、キーボード入力を必要とするユーザまたは支援技術を実行するユーザは、モバイル画面上でジェスチャを実行できません。ジェスチャを機能にアクセスする唯一の方法にすることは避けてください。ジェスチャを使用する場合は、ボタンまたはその他のコントロールを提供してアクションをトリガします。タスクを繰り返し実行するユーザのショートカットとしてジェスチャを有効にすることができます。カスタムジェスチャを使用する場合は、動作を説明するための補助テキストを含めます。

ナビゲーションや入力にスクリーンリーダーまたは音声制御を使用する人もいます。アクセシビリティをサポートするには、ボタン、リンク、フォーム項目などの制御メカニズムがフォーカスされるようにします。ボタンは行動要請として幅広く使用されているため、使いやすく、アクセスしやすいものにすることが重要です。ボタンテキストは、ボタンが配置されている背景と比較して、ボタンの背景の色のコントラスト比を適切に設定する必要があります。ボタンについては、「MDN: アクセシビリティの考慮事項」を参照してください。

デフォルトでは、button、a、および input などのネイティブのインタラクティブ要素がフォーカス可能な要素であり、必要なセマンティックと動作が含まれています。div と span 要素を使用する必要がある場合は、tabindex 値を 0 に設定してキーボードでフォーカスします。基本コンポーネントにはアクセシビリティが組み込まれており、タブの順序が自動で処理されます。「フォーカスの処理」を参照してください。

リンクはユーザを現在のビューから移動させるため、リンクの内容にはリンク先を示す必要があります。たとえば、「ここをクリック」は「サービスについて」と比較すると役に立ちません。Salesforce モバイルアプリケーション全体での移動を最適化するには、lightning/navigation モジュールで使用可能なナビゲーションサービスを使用します。ナビゲーションサービスを使用すると、レコード、リストビュー、オブジェクトなどのさまざまなページ種別に移動できます。ナビゲーションサービスには、広範なルーティング、ディープリンク、およびログインリダイレクトが用意されています。ナビゲーションサービスは、アプリケーションのナビゲーション、状態の変更、および更新にも使用できます。「ページ、レコード、リストへの移動」を参照してください。

セキュリティ上の理由により、次のメソッドはサポートされていません: window.open、window.location、および location.href。外部 URL に移動するには、standard__webPage 属性で lightning/navigation を使用します。

モバイルユーザは、ビューポートサイズが小さくなると制約を受けます。ボタンやリンクのようなインタラクティブ要素の場合は、要素をタップしたり有効にしたりするのに十分な大きさの領域を設定します。モバイルユーザは間違った要素をクリックしたり有効にしたりしがちであるため、こうすることでインタラクティブ要素の間隔を空けて分離することもできます。

モバイルデバイスのアクション可能な項目のタップ対象の最小サイズは 44 x 44 ピクセルです。同じアクションを実行する画面上に複数の対象がある場合は、いずれか 1 つの対象のみを対象サイズの 44 x 44 CSS ピクセルに合わせる必要があります。リストビューピッカーやブレッドクラムリンクなどのセカンダリータップ対象の最小サイズは 32 ピクセルです。

次のタップ対象のガイドラインを考慮してください。

タップ対象の要素

タップ対象のサイズ: タップ対象は、視覚的な記号、コンテナ (ある場合)、内部または外部のパディングから構成されます。最小サイズは 44 ピクセルです。
内部パディング: 使用している視覚的な記号のサイズに応じて変更します。
視覚的な記号: アバター、アイコン、画像、またはテキスト。サイズは変更できますが、タップ対象を 44 ピクセル未満にすることはできません。

「WCAG ガイドライン」を参照してください。

通常、モバイルユーザはすばやく行動を起こしたり情報を使用したりします。このようなクイックアクションは平均で 1 分ほどの間で瞬時に集中して行われる行動であり、マイクロモーメントとして知られています。ユーザ入力を要求する場合は、モバイルユーザの入力数を最低限にします。

Salesforce レコードのユーザ入力を取得するには、lightning-record-form または lightning-record-edit-form 基本コンポーネントを使用することをお勧めします。または、lightning-input を使用してユーザ入力を取得し、lightning/ui*Api ワイヤアダプタと関数を使用して Salesforce データおよびメタデータを操作することもできます。基本コンポーネントを使用する場合、アクセシビリティのベストプラクティスを遵守するために、<label> と <input> 要素が自動的に設定されます。「基本コンポーネントを使用したレコードの操作」を参照してください。

すべてのフォーム項目に表示ラベルを設定します。モバイル上では長いラベルや切り捨てラベルを使用しないようにしてください。長いラベルを使用する場合は、ラベルを項目の横に並べるのではなく、項目の上部に配置することを検討してください。表示ラベルを含めることができない場合は、非表示のラベルを設定することで支援技術でも利用できるようにします。基本コンポーネントでは、項目のラベルは自動的に上揃えで配置されます。また、ラベルを視覚的に非表示にするオプションを使用して、支援技術でも使用できるようにすることができます。

関連トピック