🍎HIGざっくりまとめ Foundations編 vol.1 アクセシビリティ

　2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

Accessibility（アクセシビリティ）

Foundation編の１項目目で全体の中でもなかなかボリューミーなページです。重要視されていることが伺えます。

Accessibility - Foundations - Human Interface Guidelines - Design - Apple Developer

要点

• 「約 7 人に 1 人が、世界やデバイスとの関わり方に影響を与える障害を持っています。」手首の怪我や風邪で声が出ないなど、ほぼ全ての人が様々なタイミングで操作がしずらくなる可能性があります。
  （「うちのターゲット外だから関係ないわ」とは言い切れないのである）

• シンプルさ
  複雑なタスクをシンプルかつ簡単に実行できるように、身近に感じられて、一貫性のあるインタラクションであるべし。

• 知覚可能性
   視覚・聴覚・触覚いずれでも知覚できるようにすべし。どれかひとつだけに依存しない。

• パーソナライゼーションや支援技術を正しくサポートすべし
  向きの変更、文字サイズの変更、色域、分割ビューなどへの対応や、Voiceoverや音声入力などの機能＆支援技術を使えなくなることがないようにデザイン・実装しよう。

  • 標準コンポーネントを使用してインターフェイスを実装すると、いくつかのアクセシビリティ設定に自動的に適応できる。

• アクセシビリティの監査およびテストをしよう
  重要なフローをタスクに落とし込み、それぞれのアクセシビリティ機能を有効にした状態ですべてのタスクを問題なく完了できるかテストしよう。

「約 7 人に 1 人」障害を・・・思ったより多くない？
実は、今後もっと増えると予測されています😦
世界人口の約15%にあたる10億人が障害を持って暮らしている。彼らは世界最大のマイノリティである。
世界保健機関（WHO）によると、この数字は、人口増加、医学の進歩、および高齢化に従って増加する。

 障害を持つ人々に関するファクトシート | 国際連合広報センター

---

相互作用

支援技術やアクセシビリティ機能をアプリ内でも混乱なく使えるように、アプリでシステムのインタラクションを正しくサポートすることが不可欠。

ジェスチャー

• プラットフォームのジェスチャーをオーバーライドしないで！
  使用しているアプリに関係なくシステムジェスチャ（下にスワイプして通知センターを表示したりするなど）が機能することをユーザーは期待しています。

• 可能な限りジェスチャーは単純なものにしよう
  マルチフィンガー ジェスチャ、長押し、ボタンの繰り返し押しなど困難に感じる人がいます。

• ジェスチャーの代替方法も用意しておこう
  特定のジェスチャーを実行できないユーザーのための選択肢が必要。

• 可能な場合、アプリのコア機能には複数の種類の物理的操作でアクセスできるようにしましょう。
  握力や器用さが限られている可能性のある人たちの選択肢になります。
  例）iPhone や iPad のカメラでは、画面上のボタンをタップorデバイスの音量を下げるボタンで写真を撮れる

• iOS または iPadOS アプリでドラッグ アンド ドロップにアクセスできるようにします。

ボタンとコントロール

• すべてのタッチスクリーン コントロールとインタラクティブな要素に、少なくとも 44x44 pt のヒット ターゲットを設定します
  ポインターを使用している場合であっても小さすぎるとイライラするよ。

• カスタム要素のアクセシビリティを特徴付けます（属性をつけるみたいな意味？）。
  つけておけばVoiceOverの読み上げ時に「説明+ボタンだよ」というのがわかるように伝えてくれます。

• 一貫したスタイル階層を使用して、ボタンの相対的な重要性を伝えます
  一貫性があればユーザーはボタンの外観に基づいてボタンの重要性を把握できます。

• システム提供のスイッチ コンポーネントを優先します
  スイッチUIは色でON/OFFがわかるようになっているが、実は設定でラベルを表示できるようになっている。システム提供のスイッチを使っていればこれに対応できる（iOS、iPadOS、tvOS、および watchOS）。

• リンクを識別するための指標には色以外も検討しよう
  リンクを識別するために色を使用することは問題ありませんが、それを唯一の指標として使用すると、色覚異常や認知障害または状況注意障害のある人など、人々は区別を認識できない場合があります。

ユーザー入力

• タイピングする代わりに音声で情報を入力できるようにします

• 音声だけで重要なタスクを実行するための Siri またはショートカットをサポートします。

• プレーンテキストは選択可能にしておいてください。

ハプティクス

• ハプティクス（触覚技術）のフィードバックを得られるようにする技術をサポートします
  （ネイティブアプリのブブッと振動が伝わることで、タスクの成功/失敗やイベントを通知するあれです）システム定義のハプティクスをアプリで一貫して使用してください。

ハプティクスは触覚技術（haptic technology）とも言われています。 仮想モデルによって仮想的な触覚を実現し、機械的な刺激を力、振動、動きなどに変換し、皮膚の感覚をフィードバックする技術です。

ハプティクスとは？ 技術・専門用語解説 | SCOPEdia

---

VoiceOver（ボイスオーバー）

コンテンツの説明

• 意味を伝えるすべての画像に代替説明をつけましょう
  画像の周囲のテキストとキャプションも読み上げるので、説明は画像自体によって伝えられる情報だけにしよう。

• インフォグラフィックを完全にアクセシブルにします

• 純粋な装飾のための画像で、何かを伝えることを意図していない場合は、支援技術から隠します

• 各画面に固有のタイトルを付け、情報階層のセクションを識別する見出しを付けます
  タイトルは支援技術から受け取る最初の情報です。コンテンツや目的を簡潔に説明する一意のタイトルをつけましょう。同様にセクションの見出しも正確に。

• 誰もがビデオとオーディオ コンテンツを楽しめるようにします

  • クローズド キャプション
    ビデオ内の可聴情報に相当するテキストを人々に提供します（常に利用できるとは限らないため、字幕も提供することが重要）

  • オーディオディスクリプション
    視覚的にしか表現できない重要な情報を音声で説明するもの

  • トランスクリプト
    映像の音声と映像の両方をカバーする完全なテキスト記述

ナビゲーション

• VoiceOverのユーザーがすべての要素にナビゲートできるようにします
  画面上の要素から得られるアクセシビリティ情報を使って、各要素の場所とその機能を理解できるようにします。（システム提供のUIコンポーネントには、デフォルトでこのアクセシビリティ情報が含まれています）

• 要素のグループ化、順序付け、リンクの方法を指定することで、VoiceOverの操作性を向上させることができます
  要素間の関係が視覚的なもの（余白やレイアウトなど見た目でグループ化がされてるのがわかる状態など）だけになっている箇所を調べ、その関係をVoiceOverで表現してください。

• 画面上のコンテンツやレイアウトが変わったら、VoiceOverに伝えてください

• 別のウェブページやアプリが開かれることを予測できるようにする
  例）ボタンのタイトルに省略記号（ellipsis ３点リーダーみたいなやつ）を付加する。別のウィンドウまたはビューを開き、そこでユーザーがアクションを完了できることを伝えるための標準的な方法です。

• 重要なインターフェース要素には、すべて代替テキストラベルを付けてください
  代替テキストラベルは画面には表示されないけど、VoiceOverが要素を音声で説明できるため、視覚障害のある人のナビゲーションが容易になります。

• 必要に応じてVoiceOverのローターをサポートします
  ローターという画面上のコントロールを使って、文書やウェブページの見出しやリンク、その他のセクションの種類をたどりながら移動することができます。また、ローターは点字キーボードを表示させることもできます。

点字キーボード
iPhone、iPad、iPod touch では、物理的な点字キーボードがなくても、デバイスの画面に直接点字を入力できます。

iPhone、iPad、iPod touch で点字を直接入力する - Apple サポート (日本)

実際に利用されてる方の動画がありました（40秒くらいのとこで点字キーボードを操作されています）

I thought I would share how I, as someone who is visually impaired use my iPhone.☺️ pic.twitter.com/wPI9smOIq0

— Kristy Viers (@Kristy_Viers) July 26, 2020

• iPadOSとmacOSでは、アプリ内のすべての画面コンポーネントをキーボードで操作できるようにしましょう。
  理想的には、キーボードだけですべてのタスクを実行できるようにすることです。すべてのユーザーをサポートするには、アプリでシステム定義のキーボードショートカットを上書きしないようにすることが重要です。

---

テキスト表示

• Dynamic Type（iOS、iPadOS、tvOS、watchOS）
  ユーザーは自分に合ったフォントサイズを選ぶことができます。デザインが拡大縮小できること、そしてすべてのフォントサイズでテキストとグリフの両方が読みやすいことを確認しましょう。

Dynamic TypeはiOS上でデフォルトの文字の大きさを変更する機能です。対応しているアプリの文字サイズを一度に全部変えられます。
（eytyetさんのQitaより。文字サイズ一覧表などもあり参考になりました）

iOSのDynamic Typeについて - Qiita

• フォントサイズが大きくなっても、テキストの切り捨ては最小限にとどめるようにします
  一般に、アクセシビリティの最大フォントサイズでも、標準の最大フォントサイズと同程度の有用なテキストを表示することを目指します。

• 大きなフォントサイズではレイアウトを調整することを検討しましょう
  フォントサイズが大きい場合、インラインレイアウトでは、テキストが切り捨てられたり、テキストと二次的アイテムが重なったりすることがあります。このような場合は、スタックレイアウトを使用することを検討してください。
  同様に、テキストを複数カラムにすると、各カラムで水平方向のスペースが制限されるため、フォントサイズが大きくなると読みにくくなることがあります。この場合、フォントサイズが大きくなったときに列の数を減らすことで、テキストの切り捨てを防ぎ、全体的な読みやすさを向上させることを検討してください。

• フォントサイズが大きくなるにつれて、意味のあるインターフェイスアイコンのサイズも大きくします。
  SFシンボルを使用すると、Dynamic Typeのサイズ変更に伴ってアイコンも自動的に拡大縮小されます。

• フォントサイズに関係なく、一貫した情報階層を維持する
  フォントサイズが非常に大きい場合でも、主要な要素は画面の上部に配置し、ユーザーがこれらの要素を見失うことがないようにします。

• アプリでは、レギュラーまたはヘビーフォントのウェイトを優先してください
  Ultralight、Thin、Lightのフォントは見づらいので避けてください。

• ユーザーが太字を有効にしたときに、アプリが正しく反応し、見栄えが良くなるようにします
  太字のアクセシビリティ設定をオンにした時、アプリはすべてのテキストを太くし、すべてのグリフにストロークウェイトを増加させる必要があります。システムフォントとSF記号は、太字のアクセシビリティ設定に自動的に調整されます。

• カスタム書体は、読みにくくなることがあります
  ブランディングや没入感のあるゲーム体験の実現など、カスタムフォントの必要性が高い場合を除き、通常はシステムフォントを使用するのがベストです。カスタムフォントを使用する場合は、小さいサイズでも読みやすいことを確認してください。

• 完全な両端揃えを避ける
  左揃え（右から左への言語では右揃え）は、失読症など、学習や読み書きに困難がある人のためのフレーミングの基準になります。

• 長い文章には、斜体や全角文字を使わないようにしましょう
  時折強調するのには適していますが、これらのスタイルを使いすぎると、テキストが読みづらくなります。

---

色と効果

• オブジェクトの区別や重要な情報の伝達を色だけに頼らないようにしましょう
  情報を伝えるために色を使用する場合は、誰もがそれを知覚できるようにテキストラベルやグリフ形状（太字や下線など）も提供するようにしてください。

• テキストにシステムカラーを優先的に使用する
  色の反転やコントラストの増加などのアクセシビリティ設定に正しく反応します。

• 2つの状態や値を区別する唯一の方法として、色の組み合わせを使用することは避けてください
  色の組み合わせで状態や価値を伝えることが理にかなっている場合、誰もがその情報を知覚できるように視覚的な指標を追加すること。
  例えば、オフラインとオンラインを赤と緑の丸で表現する代わりに、赤の四角と緑の丸で表現することもできます。

• Invert Colors（色反転）に正しく対応するようにします
  色の反転のスマート反転モードでは、画像、ビデオ、フルカラーアイコン（アプリアイコンやテンプレート以外の画像など）は反転されず、暗いUIは暗いままです。アプリやゲームをテストして、カスタムビューの写真など、画像の反転を防ぐ必要がある場所を探してください。

• 読みやすさを向上させるために、コントラストの強い色を使用する
  視覚的要素の色のコントラストを高めると、より多くの人がより多くの状況でアプリケーションを使用できるようになります

• 体験に不可欠なものでない限り、アニメーションを必要としないようにしましょう
  一般的には、アニメーションに頼らずにアプリを使用してもらうようにしましょう。

• モーションの低減がオンの場合、タイトにしたアニメーションを再生します
  アニメーションを見ると、気が散ったり、めまいや吐き気を感じたりする傾向がある人は、［モーションを減らす］をオンにすることができます。重要な情報を伝えるために問題のあるアニメーションを使用する場合は、アニメーションを使用しない代替案を設計するか、アニメーションの物理特性を強化して動きを抑えることを検討してください。

• ビデオやその他のモーションエフェクトを操作できるようにする
  動画やエフェクトをボタンなどで操作せずに自動再生することは避けてください

• 動く要素や点滅する要素を表示する場合は、注意が必要です

• [透明度を下げる]をオンにすると、ぼかしや透明度を変更できます

---

(感想)

WEBデザイナーをしていた頃、アクセシビリティ対応は知ってはいるものの、正直なところ公共のサイトなどの話で関係ないと思っていました。

プロダクトのアクセシビリティを高めると社会モデルから見た「障害を感じる人」を減らすことができると言われています。
普段は健康な自分でも突発的な怪我や病気、またはマシントラブルでマウスが使えない状況になることもあります。先日も友達に「眼が悪くなって文字が読みづらい」と相談されDynamic Typeで文字サイズを大きくできると案内しました。意外と身近なのだと実感。

ガイドラインのように網羅性のあるものを読むことで、自分の知らない機能が沢山あることに気づいたし、様々なユーザーさん、利用シーンを想像するきっかけになりました。
完全対応は大変かもしれませんが、「特別な対応」ではなく普通にみんなが使いやすいUIを目指すために必要なことなのですね。