設計へのアクセシビリティの組み込み

学習の目的

この単元を完了すると、次のことができるようになります。

• 色を使用する際の 2 つの重要な考慮事項を挙げる。
• テキストとアイコンに適切な色、コントラスト、比率を適用する。
• アニメーションがユーザーの健康に与える可能性のある影響について説明する。

色の重要性

最初の単元では、さまざまなユーザーが UI を理解して操作する方法を概要レベルで学習しました。この単元では、設計の詳細について説明します。色は設計に欠かせない要素です。注意を引き付ける、ブランドを割り当てる、意味を伝える、要素をグループ化するなど、さまざまな目的で使用できます。色には多くの設計上の利点がありますが、適切に使用しなければ障害を持つユーザーにとって障壁になってしまうことがあります。

色とアクセシビリティについて考慮すべき主な領域は次の 2 つです。

• 意味を提供する色
• 隣接する色とのコントラスト

意味としての色

色は画面上で意味を伝える優れたツールとなりますが、色のみによって情報を提供したりアクションを要請したりすることは避ける必要があります。次の画像はチャットアプリケーションでのユーザーリストの悪い例です。このリストでは、ユーザーの連絡可能状況を示すために、アクティブ状態を緑の Wi-Fi アイコン、アイドル状態をオレンジの Wi-Fi アイコン、オフライン状態を赤の Wi-Fi アイコンで表示しています。

12 人に 1 人の男性と 200 人に 1 人の女性は色覚障害を持っていて、連絡先がアクティブ状態なのかアイドル状態なのかを区別できません。 

その代わりに、設計者は異なる状況に異なるアイコンを使用し、色によって各アイコンが伝える情報を補強することができます。緑の Wi-Fi アイコンがアクティブ状態、グレーのうたた寝アイコンがアイドル状態、赤のオフラインアイコンが退席状態を表すといった具合です。

色のコントラスト

色を使用した設計での 2 つ目の考慮事項は、テキストの色とテキストが表示されている背景とのコントラストです。設計者とコンテンツエクスペリエンスチームは素晴らしいコンテンツを作成しているのですから、大多数のユーザーがそのコンテンツを見ることができるようにしたいものです。それには視力が低いユーザーや高密度 Retina ディスプレイを使用していないユーザーが含まれます。 

「W3C Web Content Accessibility Guidelines (W3C の Web コンテンツのアクセシビリティに関するガイドライン) (WCAG) 2.0」によると、テキストとテキストの背景のコントラスト比は 4.5 対 1 以上にする必要があります。フォントが 24 px または太字の 19 px 以上であれば、最小比は 3 対 1 まで下がります。 

つまり、テキストが 24 px または太字の 19 px 以上であれば、白の背景に対して使用できる最も明るいグレーは #959595 になり、これは次のように表示されます。

それよりも小さなテキストの場合は、白の背景に対して使用できる最も明るいグレーは #767676 になります。これは、次のように表示されます。背景がグレーの場合は、テキストをさらに暗くする必要があります。

WCAG 2.0 では、その時点で無効状態になっているロゴや要素はこの基準から除外されます。これには、無効なボタンやメニュー項目が含まれます。フォーム項目のプレースホルダーテキストはこの基準から除外されません。 

WCAG 2.1 ルールでは、より多くの色のコントラスト要件が導入されたことに注意してください。これには、ユーザーインターフェースのコンポーネントと状態を識別するために必要な視覚的情報に関するコントラスト要件が含まれます。つまり、入力項目とボタンの境界線、フォーカス状態、グラフ上のビジュアル部分にまで 3:1 の比率要件が設定されるようになりました。下のデータ入力項目について考えてみます。

このテキスト入力の境界線にはページの背景に対して 3:1 以上のコントラスト比が必要です。この場合、ページは白なので境界線の色は #959595 以上の暗さにする必要があります。

コントラスト比を計算するために使用できるツールは、オンライン、設計ツール内、ブラウザー開発者ツール内などに多数あります。おすすめするツールの 1 つが www.AreMyColorsAccessible.com です。

塗りつぶし以外の背景上のテキスト

画像やグラデーションなどの塗りつぶしでない背景の上にテキストが表示されていると、読みにくくなりがちです。最低でも、テキストの色に最も近い画像の部分 (明るいテキストの場合は画像の最も明るい部分、暗いテキストの場合は画像の最も暗い部分) が色のコントラスト要件を満たすようにする必要があります。ただし、塗りつぶしでない背景上のテキストは、失読症などの認知障害のあるユーザーに悪影響を及ぼします。テキストを画像の塗りつぶし部分に配置するか、テキストと画像の間に塗りつぶしの背景を追加することをお勧めします。 

こちらでは、「Einstein (10+)」の見出しテキストが雲の画像の上にあります。

より良い解決策は、「Einstein (10+)」の見出しテキストを雲の画像の上ではなく画像の青い塗りつぶしの部分に移動することです。

塗りつぶし以外の背景の上にテキストを配置する場合は、次のガイドラインに従って、ユーザーの視覚的負荷と認知的負荷を最小限に抑えるようにします。

• 塗りつぶしでない背景上には見出しテキストのみを表示します。テキストは 18px 以上で、理想的には 1 行のみにします。各単語や行の背景が若干異なっている場合、テキストの文字列が長くなると読みにくくなります。
• グラデーションの背景は縦方向 (上部の色が下部の色と異なる) のみ可能です。横方向、斜め方向、放射状のグラデーションでは、文字列内の各文字の背景色が変化する可能性があるため、これらのグラデーションは避けます。
• 必ずバックアップ背景色を定義します。アクセシビリティの懸念のために背景画像を無効にするユーザーもいるため、背景画像が無効になった場合にもテキストを読むことができ、コントラスト要件 (4.5:1) を満たしていることを確認します。

フォントの太さ、テキストの影のぼかし、その他の技術的な推奨事項については、『Salesforce Lightning Design System (SLDS) guideline (Salesforce Lightning Design System (SLDS) ガイドライン)』の「Text on Backgrounds (背景上のテキスト)」を参照してください。

アニメーションによるユーザーエクスペリエンスの向上

アニメーションを使用することで認知障害のあるユーザーのエクスペリエンスが向上することがあります。また、UI 内でユーザーを案内したり、行動要請に導いたり、ページ内の要素間のリレーションや階層を作成したりすることもできます。ただし、アニメーションは諸刃の剣です。うまく設計しないと、前庭障害のあるユーザーに頭痛、吐き気、めまいを引き起こす可能性があります。また、光過敏性てんかんのあるユーザーはアニメーションによって発作が起きる場合もあります。 

覚えておくべき最も重要なことは、アクセシブルでない機能を使用するとユーザーは情報の入手や商品の操作ができなくなる可能性がありますが、アクセシブルでないアニメーションを使用するとユーザーの健康に悪影響を及ぼす可能性があるということです。WCAG ガイドラインでは、Web 全体が従うべき 2 つの重要な要件が定められています。

• 閃光または点滅。WCAG 2.3.2 の「Three Flashes (点滅 3 回)」によると、1 秒間に 3 回を超える閃光や点滅が含まれるアニメーションを避けます。そうしないと、高速に点滅するアニメーションによって一部のユーザーに発作が起きる可能性があります。
• 5 秒以上。WCAG 2.2.2 の「Pause, Stop, Hide (一時停止、停止、非表示)」によると、5 秒以上のアニメーションや 5 秒以上にわたって繰り返されるアニメーションには、アニメーションを一時停止、停止、または非表示にする方法を含める必要があります。

アニメーションがどんなに素晴らしくてアクセシブルなものであっても、最も重要なことはユーザーが無効にできるようにすることです。SLDS カルーセルは、一時停止ボタンが付いたアニメーションコンポーネントの良い例です。 

めまいの誘発を避ける

一部のユーザーのめまい、頭痛、その他の形の不快感の誘発に関与する 3 つの要因があります。

• 画面サイズに対する動きの大きさ。アニメーションは大きいですか? それとも小さいですか? 大きなアニメーションは小さなアニメーションよりも影響が大きくなります。
• 動きの方向の不一致。アニメーションの中には、物が逆方向に動くものがあります。一般的な例は、ユーザーがページを下にスクロールすると背景が上にスクロールする視差効果です。このようなアニメーションスタイルではユーザーが方向感覚を非常に失いやすくなります。
• ユーザーが認識する距離感。大きな風景など、奥行きがあるアニメーションでも、ユーザーが方向感覚を失うことがあります。

まとめ

色、アニメーション、動きは重要な設計手法です。色やアニメーションを使用するときには、これらの手法で提供する情報を視覚的に伝える代替手段も提供するようにします。アニメーションを使用するときには、一部のユーザーの健康に悪影響を及ぼすアニメーションスタイルを避けるようにします。

リソース

• 記事: Contrast and Color Accessibility Understanding WCAG 2 Contrast and Color Requirements (コントラストと色のアクセシビリティ: WCAG 2 のコントラストと色に関する要件について)
• 記事: Text on Backgrounds (背景上のテキスト)
• 記事: Designing Safer Web Animation for Motion Sensitivity (動きに対する過敏症に安全な Web アニメーションの設計)
• Web サイト: Color Blind Awareness - Color Blindness (色覚障害)