Accessibility｜HIG Foundations 日本語訳まとめvol.2
Appleのアクセシビリティ機能を使用して、自分に合った方法でデバイスを操作する方法をパーソナライズします。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
■ Accessibility (アクセシビリティ)
アクセシブルなアプリまたはゲームは、設計によりアクセシビリティのパーソナライズをサポートし、機能やデバイスの使用方法に関係なく、すべてのユーザーに優れたユーザーエクスペリエンスを提供します。
約7人に1人が、世界やデバイスとのやり取りに影響を与える障害を持っています。人々は、年齢、期間、重症度のレベルを問わず、障害を経験する可能性があります。たとえば、転倒による手首の怪我や使いすぎによる声の喪失などの状況障害は、ほとんどすべての人がさまざまな時間にデバイスを操作する方法に影響を与える可能性があります。
ベストプラクティス
アクセシビリティを念頭に置いて設計します。アクセシビリティとは、障害を持つ人々が情報を利用できるようにすることだけではありません。能力や状況に関係なく、すべての人が情報を利用できるようにすることです。アクセシビリティを念頭に置いてアプリを設計するということは、シンプルさと知覚可能性を優先し、すべての設計上の決定を調べて、さまざまな能力を持っている人やさまざまな方法でデバイスを操作する人を除外しないようにすることを意味します。
シンプルさ—複雑なタスクをシンプルかつ簡単に実行できる、使い慣れた一貫性のある対話を可能にします。
知覚可能性—人々が視覚、聴覚、または触覚を使用しているかどうかにかかわらず、すべてのコンテンツが知覚できることを確認します。
パーソナライズをサポートします。デバイスの向き、画面サイズ、解像度、色域、分割表示などの環境の変化に適応するようにエクスペリエンスを設計しました。これは、サポートされているすべてのデバイスで、あらゆるコンテキストでユーザーに楽しんでもらいたいためです。最小限の追加作業で、ユーザーがデバイスとのやり取りの方法をパーソナライズするために使用するユーザー補助機能をサポートするようにアプリを設計できます。
標準コンポーネントを使用してインターフェイスを実装すると、テキストとコントロールは、太字のテキスト、大きなテキスト、色の反転、コントラストの増加など、いくつかのユーザー補助設定に自動的に適応します。
アプリまたはゲームのアクセシビリティを監査およびテストします。監査はあなたの経験のすべての要素を調べ、修正すべき問題の包括的なリストを提供します。テストは、デバイスとのやり取りに関係なく、すべての人がアプリで最も重要なタスクを完了できることを確認するのに役立ちます。
ユーザー補助機能をオンにして重要なユーザーフローをテストすると、さまざまな方法でデバイスを操作する際の課題を理解できます。また、アプリが優れたユーザーエクスペリエンスを提供できない可能性のある場所を発見します。
たとえば、ソーシャルメディアアプリの一般的なユーザーフローは、「コメントへの応答を投稿する」場合があります。このフローを構成するタスクには、次のものが含まれます。
投稿されたコメントを読む
回答のコメントを選択してください
応答ビューを開きます
応答を編集する
回答を投稿する
アプリまたはゲームの重要なユーザーフローごとに、VoiceOver、Reduce Motion、Large Text Sizeなどのユーザー補助機能をオンにして、フロー内のすべてのタスクを問題なく完了できることを確認します。発見した問題を修正したら、別のユーザー補助機能をオンにして、ユーザーフローをもう一度実行します。アプリやゲームの監査、テスト、修正を支援するために、Xcodeのアクセシビリティインスペクタを使用することを検討してください。
相互作用
VoiceOverのような支援技術、およびディスプレイの調整のようなアクセシビリティ機能は、人々がデバイスと対話する方法を拡張します。これらのテクノロジーと機能はシステムが提供するインタラクションと統合されるため、アプリでシステムのインタラクションを正しくサポートすることが不可欠です。
ジェスチャー
プラットフォームのジェスチャーを上書きしないでください。人々は、通知センターを表示するために下にスワイプしたり、システム設定で利用可能なmacOSトラックパッドジェスチャなどのシステムジェスチャが、使用しているアプリに関係なく機能することを期待しています。
一般的なインタラクションには簡略化されたジェスチャを優先します。マルチフィンガージェスチャ、長押し、ボタンの繰り返しプレスなどの複雑なジェスチャは、多くの人にとって難しい場合があります。可能な限り単純なジェスチャーを使用すると、アプリを操作するすべての人のエクスペリエンスが向上します。
ジェスチャベースのアクションを実行するための代替方法を提供します。特定のジェスチャーを実行できない可能性がある人のためのオプションを含めます。たとえば、スワイプしてテーブルの行を削除する場合は、編集モードを使用するか、アイテムの詳細ビューに[削除]ボタンを表示することで、アイテムを削除する別の方法を提供することもできます。
可能であれば、複数のタイプの物理的相互作用を通じてアプリのコア機能にアクセスできるようにします。たとえば、iPhoneとiPadのカメラでは、画面上のボタンをタップするか、デバイスの音量小ボタンを押すことで写真を撮ることができます。フォトキャプチャをすべての人にとってより便利にすることに加えて、これらの代替インタラクションは、握力や器用さが制限されている可能性のある人々にオプションを提供します。
iOSまたはiPadOSアプリでドラッグアンドドロップにアクセスできるようにします。アクセシビリティAPIを使用してアプリ内のドラッグソースとドロップターゲットを特定する場合、支援技術は人々が画面上のアイテムをドラッグアンドドロップするのに役立ちます。開発者向けガイダンスについては、accessibilityDragSourceDescriptorsおよびaccessibilityDropPointDescriptorsを参照してください。
ボタンとコントロール
すべてのタッチスクリーンコントロールとインタラクティブ要素に、少なくとも44x44ポイントのヒットターゲットを与えます。移動が制限されている人は、アプリを操作するために、より大きなヒットターゲットが必要です。人々がポインターを使用している場合でも、どのプラットフォームでも小さすぎるコントロールを操作するのはイライラする可能性があります。
カスタム要素のアクセシビリティを特徴付けます。システムAPIを使用して、コンポーネントがどのように動作するかを支援技術に伝えることができます。たとえば、ボタンまたはNSAccessibilityButtonを使用してビューをボタンとして特徴付けることは、VoiceOverがビューの説明の後にボタンという単語を話すことを意味します。これは、ビューがボタンのように動作することを人々に伝えます。
一貫したスタイル階層を使用して、ボタンの相対的な重要性を伝えます。ボタンスタイルの一貫した階層を使用すると、人々はボタンの外観に基づいてボタンの重要性を把握できます。たとえば、iOS、iPadOS、tvOSでは、ビューで最も可能性の高いアクションを実行するボタンに視覚的に目立つ塗りつぶしスタイルを使用し、重要度の低いアクションを有効にするボタンには目立たないスタイル（灰色やプレーンなど）を使用できます。 。（開発者向けのガイダンスについては、UIButton.Configurationを参照してください。）ボタンの形状をオンにして、アクティブなボタンと周囲のコンテンツを簡単に区別できるようにすることもできます。
システム提供のスイッチコンポーネントをお勧めします。SwiftUIは、ノブの位置と塗りつぶしの色で状態を示すスイッチを提供します。ただし、一部の人にとっては、ラベルを追加すると、スイッチがオンかオフかを簡単に識別できるようになります。システム提供のスイッチを使用する場合、iOS、iPadOS、tvOS、およびwatchOSは、ユーザーがオン/オフラベルをオンにすると、それらの中にオン/オフのグリフを自動的に表示します。
下線など、色に加えて視覚的なインジケーターをリンクに付けることを検討してください。リンクを識別するために色を使用することは問題ありませんが、それを唯一の指標として使用する場合、色覚異常や認知または状況的注意障害のある人などの人々は区別を認識できない可能性があります。
ユーザー入力
入力する代わりに話すことで情報を入力できるようにします。テキスト入力フィールドにディクテーションボタンを追加すると、ユーザーは好みの入力方法として音声を選択できます。カスタムキーボードを作成する場合は、口述用のマイクキーを必ず含めてください。
音声だけで重要なタスクを実行するためのSiriまたはショートカットをサポートします。アプリでSiriインタラクションを有効にする方法の詳細については、 Siriをご覧ください。
可能であれば、人々がプレーンテキストを選択するのを妨げないでください。多くの人々は、翻訳と定義の入力として選択されたテキストを使用することに依存しています。
触覚
システム定義の触覚をサポートします。多くの人は、画面が見えないときにアプリを操作するために触覚に依存しています。たとえば、システムアプリは触覚を再生して、タスクが成功または失敗したとき、またはイベントが発生しようとしているときに人々に通知します。人々を混乱させないように、アプリではシステム定義の触覚を一貫して使用するようにしてください。ガイダンスについては、触覚の再生を参照してください。
ボイスオーバー
VoiceOverは、画面上のコンテンツの音声による説明を提供し、人々が画面を見ることができないときに情報を取得してナビゲートするのに役立ちます。
コンテンツの説明
意味を伝えるすべての画像に代替の説明を提供します。コンテンツに意味のある画像を記述しないと、VoiceOverユーザーがアプリを完全に体験できなくなります。有用な説明を作成するには、画像を見ることができる人に自明であると思われることを報告することから始めます。VoiceOverは画像とキャプションを囲むテキストを読み取るため、画像自体によって伝えられる情報に説明を集中させます。
インフォグラフィックに完全にアクセスできるようにします。それが伝えるものを説明するインフォグラフィックの簡潔な説明を提供します。人々がインフォグラフィックを操作してより多くのまたは異なる情報を取得できる場合は、VoiceOverユーザーもこれらの操作を利用できるようにする必要があります。アクセシビリティAPIは、支援技術が人々の使用を支援できるように、カスタムのインタラクティブ要素を表現する方法を提供します。
画像が純粋に装飾的であり、何も伝えることを意図していない場合は、支援技術から画像を隠します。VoiceOverに純粋に装飾的な画像を記述させると、人々の時間を無駄にし、何の利益ももたらさずに認知的負荷を増大させる可能性があります。
各画面に一意のタイトルを付け、情報階層のセクションを識別する見出しを付けます。人々が画面に到着すると、タイトルは支援技術から受け取る最初の情報です。ユーザーがアプリの構造を理解しやすくするために、画面ごとに、その内容や目的を簡潔に説明する一意のタイトルを作成します。同様に、各画面の情報階層のメンタルマップを作成するには、正確なセクション見出しが必要です。
誰もがあなたのビデオとオーディオコンテンツを楽しむのを手伝ってください。クローズドキャプション、音声ガイド、トランスクリプトを提供すると、人々が自分に合った方法で音声とビデオのコンテンツから利益を得るのを助けることができます。
クローズドキャプションは、ビデオの可聴情報に相当するテキストを人々に提供します。クローズドキャプションを使用して、同じコンテンツに複数の翻訳を提供し、システムがデバイスの現在の設定に一致するバージョンを選択できるようにすることもできます。クローズドキャプションは常に利用できるとは限らないため、字幕を提供することも重要です。
音声ガイドは、視覚的にのみ提示される重要な情報の音声ナレーションを提供します。
トランスクリプトは、ビデオの完全なテキストによる説明を提供し、聴覚情報と視覚情報の両方をカバーするため、人々はさまざまな方法でビデオを楽しむことができます。
開発者向けガイダンスについては、字幕と代替オーディオトラックの選択を参照してください。
ナビゲーション
VoiceOverユーザーがすべての要素に移動できることを確認してください。VoiceOverは、画面上の要素からのアクセシビリティ情報を使用して、各要素の場所とその機能を理解できるようにします。システムが提供するUIコンポーネントには、デフォルトでこのアクセシビリティ情報が含まれていますが、VoiceOverは、情報を提供しない限り、ユーザーがカスタム要素を検出して使用するのに役立ちません。開発者向けガイダンスについては、アクセシビリティ修飾子を参照してください。
要素をグループ化、順序付け、またはリンクする方法を指定することにより、VoiceOverのエクスペリエンスを向上させます。近接性、配置、およびその他のコンテキストの手がかりは、目の見える人が画面上の要素間の関係を認識するのに役立ちますが、これらの手がかりはVoiceOverユーザーにはうまく機能しません。要素間の関係が視覚的なものにすぎない場所をアプリで調べ、これらの関係をVoiceOverに説明します。
たとえば、以下のレイアウトは、各フレーズがその上の画像のキャプションであることを意味する近接性と中央揃えに依存しています。ただし、VoiceOverに各画像をそのフレーズでグループ化するように指示しない場合、VoiceOverは次のように読みます。「さまざまなマンゴーを保持する大きなコンテナ。多くの緑のアーティチョークを保持する大きな容器。マンゴーは、マンゴー属に属する木から来ています。アーティチョークは、さまざまな種類のアザミに由来します。」これは、VoiceOverがデフォルトで要素を上から下に読み取るために発生します。開発者向けガイダンスについては、shouldGroupAccessibilityChildrenおよびaccessibilityTitleUIElementを参照してください。
画面上のコンテンツやレイアウトが変更されたときにVoiceOverに通知します。コンテンツやレイアウトの予期しない変更は、VoiceOverユーザーにとって非常に混乱を招く可能性があります。これは、画面のメンタルマップが正確でなくなったことを意味するためです。VoiceOverやその他の支援技術が人々が画面の理解を更新するのに役立つように、画面上の変更を報告することが重要です。開発者向けガイダンスについては、UIAccessibility.Notification（UIKit）またはNSAccessibility.Notification（AppKit）を参照してください。
コントロールが別のウェブページやアプリを開くタイミングを予測できるようにします。コンテキストの予期しない変更は混乱を引き起こし、人々が画面上の環境のメンタルモデルを突然再構築することを要求する可能性があります。コンテキストの潜在的な変更に注意を引く1つの方法は、ボタンのタイトルに省略記号を追加することです。システム全体で、タイトルの末尾の省略記号は、ボタンが別のウィンドウまたはビューを開いてユーザーがアクションを完了できることをボタンが伝えるための標準的な方法です。たとえば、iOSおよびiPadOSのメールは、[メッセージの移動]ボタンに省略記号を追加し、別のビューが開いたことを通知して、ユーザーが選択できる宛先を一覧表示します。
すべての重要なインターフェイス要素に代替テキストラベルを提供します。代替テキストラベルは画面に表示されませんが、VoiceOverで画面上の要素を音声で説明できるため、視覚障害を持つ人々のナビゲーションが容易になります。システム提供のコントロールにはデフォルトで便利なラベルがありますが、カスタム要素のラベルを作成する必要があります。たとえば、カスタム評価ボタンを表すユーザー補助要素を作成する場合、「評価」というラベルを指定できます。
必要に応じてVoiceOverローターをサポートします。VoiceOverユーザーは、ローターと呼ばれる画面上のコントロールを使用して、見出し、リンク、またはその他のセクションタイプでドキュメントまたはWebページをナビゲートできます。ローターは点字キーボードを起動することもできます。これらのアイテムをローターで識別することにより、VoiceOverユーザーがアプリ内の関連アイテム間を移動できるようにすることができます。開発者向けガイダンスについては、UIAccessibilityCustomRotorおよびNSAccessibilityCustomRotorを参照してください。
iPadOSおよびmacOSでは、ユーザーがキーボードを使用して、アプリ内のすべての画面上のコンポーネントをナビゲートおよび操作できることを確認してください。理想的には、ユーザーはフルキーボードアクセスをオンにして、キーボードのみを使用してエクスペリエンス内のすべてのタスクを実行できます。アクセシビリティキーボードショートカットに加えて、システムは、多くの人が常に使用する他の多数のキーボードショートカットを定義します。すべてのユーザーをサポートするには、アプリでシステム定義のキーボードショートカットを上書きしないようにすることが重要です。ガイダンスについては、キーボードを参照してください。
テキスト表示
iOS、iPadOS、tvOS、watchOSでは、ダイナミックタイプを使用して、アプリのレイアウトがすべてのフォントサイズに適応することをテストします。ダイナミックタイプを使用すると、ユーザーは自分に合ったフォントサイズを選択できます。デザインが拡大縮小できること、およびテキストとグリフの両方がすべてのフォントサイズで判読できることを確認します。たとえば、iPhoneまたはiPadでは、[設定]>[ユーザー補助]>[ディスプレイとテキストのサイズ]>[大きなテキスト]で[ユーザー補助のテキストサイズを大きく]をオンにして、アプリが快適に読みやすい状態に保たれるようにします。ダイナミックタイプのサイズ表は、プラットフォームごとにSketch、Photoshop、およびAdobeXDAppleデザインリソースでダウンロードできます。
フォントサイズが大きくなるにつれて、テキストの切り捨てを最小限に抑えます。一般に、最大の標準フォントサイズで表示するのと同じくらい多くの有用なテキストを、最大のアクセシビリティフォントサイズで表示することを目指します。別のビューを開いて残りのコンテンツを読むことができない限り、スクロール可能な領域でテキストを切り捨てないでください。有用な量のテキストを表示するために必要な数の行を使用するようにラベルを構成することにより、ラベルのテキストの切り捨てを防ぐことができます。開発者向けガイダンスについては、numberOfLinesを参照してください。
大きなフォントサイズでレイアウトを調整することを検討してください。フォントサイズが大きくなると、インラインアイテムとコンテナの境界がテキストを混雑させ、読みにくくなる可能性があります。たとえば、テキストをグリフやタイムスタンプなどの2番目の項目とインラインで表示する場合、テキストの水平方向のスペースは少なくなります。フォントサイズが大きい場合、インラインレイアウトを使用すると、テキストが切り捨てられたり、テキストとセカンダリアイテムが重複したりする可能性があります。この場合、テキストが2次アイテムの上に表示されるスタックレイアウトの使用を検討してください。同様に、テキストの複数の列は、各列が水平方向のスペースを制限するため、大きなフォントサイズでは読みにくくなる可能性があります。この場合、テキストの切り捨てを回避し、全体的な読みやすさを向上させるために、フォントサイズが大きくなったときに列数を減らすことを検討してください。開発者向けガイダンスについては、isAccessibilityCategoryを参照してください。。
フォントサイズが大きくなるにつれて、意味のあるインターフェイスアイコンのサイズを大きくします。インターフェイスアイコンを使用して重要な情報を伝達する場合は、大きなフォントサイズでも見やすいことを確認してください。SFシンボルを使用すると、動的タイプのサイズの変更に応じて自動的に拡大縮小されるアイコンが表示されます。
現在のフォントサイズに関係なく、一貫した情報階層を維持します。たとえば、フォントサイズが非常に大きい場合でも、主要な要素を画面の上部に配置して、人々がこれらの要素を見失わないようにします。
アプリでは通常のフォントの太さまたは重いフォントの太さを優先します。見やすいので、通常、中、半太字、または太字のフォントの太さを使用することを検討してください。超軽量、薄型、軽量のフォントの太さは避けてください。フォントの太さは見づらい場合があります。
ユーザーが太字のテキストを有効にしたときに、アプリが正しく応答し、見栄えがよいことを確認します。iOS、iPadOS、tvOS、およびwatchOSでは、太字のテキストアクセシビリティ設定をオンにして、テキストと記号が見やすくなります。それに応じて、アプリはすべてのテキストを太字にし、すべてのグリフにストロークの重みを増やす必要があります。システムフォントとSF記号は、太字のテキストアクセシビリティ設定に自動的に調整されます。
カスタムフォントが読みやすいことを確認してください。カスタム書体は読みにくい場合があります。ブランディングの目的や没入型のゲーム体験を作成するためなど、アプリにカスタムフォントが必要な場合を除いて、通常はシステムフォントを使用するのが最適です。カスタムフォントを使用する場合は、小さいサイズでも読みやすいことを確認してください。
全文の正当化は避けてください。完全に正当化されたテキストによって作成された空白は、多くの人がテキストを読んで集中することを困難にするパターンを作成する可能性があります。左揃え（または右から左への言語での右書き）は、失読症などの学習および識字能力の課題を持つ人々にフレーミングリファレンスを提供します。
テキストの長い文章には、斜体やすべて大文字を使用しないでください。イタリックとすべての大文字は時折強調するのに最適ですが、これらのスタイルを使いすぎるとテキストが読みにくくなります。
色と効果
オブジェクトを区別したり、重要な情報を伝達したりするために、色だけに頼らないでください。情報を伝えるために色を使用する場合は、誰もがそれを認識できるように、必ずテキストラベルまたはグリフの形を提供してください。
テキストにはシステムカラーを優先します。テキストでシステムカラーを使用すると、カラーの反転やコントラストの増加などのユーザー補助設定に正しく反応します。
2つの状態または値を区別する唯一の方法として、色の組み合わせを使用することは避けてください。多くの色覚異常の人は、青とオレンジを区別するのが難しいと感じています。他の問題のある組み合わせは、赤と緑、赤と黒、および赤または緑と灰色の組み合わせです。色の組み合わせを使用して状態や値を伝えることが理にかなっている場合は、追加の視覚的インジケーターを含めて、誰もが情報を認識できるようにします。たとえば、オフラインとオンラインを示すために赤と緑の円を使用する代わりに、赤の四角と緑の円を使用できます。一部の画像編集ソフトウェアには、色覚異常の証明に役立つツールが含まれています。
ビューが色の反転に正しく応答することを確認します。暗い背景でアイテムを表示したい場合は、色の反転をオンにすることができます。色の反転のスマート反転モードでは、画像、ビデオ、およびフルカラーアイコン（アプリアイコンや非テンプレート画像など）は反転せず、暗いUIは暗いままです。アプリやゲームをテストして、カスタムビューの写真などの画像が反転しないようにする必要がある場所を見つけます。
読みやすさを向上させるために、コントラストの強い色を使用してください。フォントのサイズと太さ、色の明るさ、画面の解像度、照明条件など、多くの要因が色の認識に影響を与えます。テキスト、グリフ、コントロールなどの視覚要素の色のコントラストを上げると、より多くの人がより多くの状況でアプリを使用できるようになります。UIの隣接する色のコントラストが最小許容レベルを満たしているかどうかを確認するには、XcodeのアクセシビリティインスペクタまたはWebコンテンツアクセシビリティガイドライン（WCAG）の色のコントラスト式に基づくオンライン色計算機を使用できます。一般に、テキストを小さくしたり軽量にしたりするには、読みやすくするためにコントラストを大きくする必要があります。ガイダンスとして次の値を使用してください。
アニメーションがあなたの経験に不可欠でない限り、アニメーションを要求することは避けてください。一般に、アニメーションに依存せずにアプリを使用できるようにします。
[モーションを減らす]がオンのときに、引き締められたアニメーションを再生します。ズーム、スケーリング、回転、周辺モーションなどの効果を含むアニメーションを表示しているときに、気が散ったり、めまいや吐き気を感じたりする傾向がある場合は、[モーションを減らす]をオンにすることができます。この設定に応じて、問題を引き起こすことがわかっているアニメーションをオフにするか減らす必要があります（詳細については、モーションのレスポンシブデザインを参照してください）。問題のあるアニメーションを使用して重要な情報を伝達する場合は、アニメーション化されていない代替案を設計するか、アニメーションの物理特性を強化して動きを減らすことを検討してください。例えば：
スプリングを締めてバウンス効果を減らすか、ユーザーの指で1：1を追跡します
z軸レイヤーで深度の変化をアニメートしないでください
ぼかしの内外でのアニメーション化は避けてください
動きを避けるために、スライドをフェードに置き換えます
人々にビデオやその他のモーションエフェクトを制御させます。ボタンやその他の制御方法を提供せずに、ビデオやエフェクトを自動再生することは避けてください。
動く要素や点滅する要素を表示するときは注意してください。微妙な動きやまばたきは人々の注意を引く可能性がありますが、これらの効果は気を散らす可能性もあり、視覚障害を持つ人々には役立ちません。さらに悪いことに、いくつかのまばたき要素はてんかん発作を引き起こす可能性があります。いずれの場合も、情報を伝える唯一の方法として動きやまばたきを使用することは避けてください。
[透明度を下げる]をオンにしたときに、ぼかしと透明度を変更します。たとえば、ぼやけたコンテンツと半透明の領域をほとんど不透明にします。最良の結果を得るには、不透明な領域で、領域がぼやけているか半透明であるときに使用した元の色の値とは異なる色の値を使用します。
プラットフォームに関する考慮事項
iOS、iPadOS、macOS、tvOS、またはwatchOSに関する追加の考慮事項はありません。
リソース
関連している
開発者向けドキュメント
ビデオ
■ その他の記事
この記事が気に入ったらサポートをしてみませんか？