Material3を読んでみた①【Accessibility】Designing


今月は何を書こうかなと考えていたのですが、新しくネイティブアプリ開発が始まりそうなのでそろそろ[Material Design](https://m3.material.io)を読もうと思います！
一度に読み切れる自信はないので今年度くらいを目処にじわじわ消化していきたいですね。

決して「一度は目を通した方がいい」とありがたいアドバイスをいただいたものの、日々ドタバタしていたら年末がじわじわ迫ってきたので重い腰を上げたなんてことではないです、ええ。

今回のゴール感はざっくり全体感を知ることなので、詳しく知りたいんだ！という方は公式からお読みください。

※画像はすべてMaterial Designのものを引用


# What's Material?
- Android、Flutter、ウェブ向けのUXガイダンスとUIコンポーネント
- material3が最新バージョン


# Foundations
このセクションは下記の8つから構成されます
- Accessibility
- Content design
- Custmizing Material
- Design tokens
- Interaction states
- Layout
- Material A-Z
- Product inclusion and equity

Accessibilityのボリュームがありそうなので、今回はそちらを見ていきます！
※量が多くなったので分けます……

# Accessibility
様々な人の経験や障害を想定することで、コストのかかる再設計を防ぐことができる。

#### accessible designのための原則
- 個人の尊重
    - ユニバーサルなデフォルトのデザインがすべての人のニーズを満たすことはないため、カスタマイズ性を与えることが個人の尊重につながる
    - 人の経験は人生を通して変化し続ける可能性があるため、個人の尊重は状況の変化に対応することにもつながる
- 事前の学習
    - ソリューションを考える前に、利用者のニーズを理解することに時間を費やすべきである
- 出発点としての要件
    - [WCAG（Web Content Accessibility Guidelines）](https://waic.jp/translations/WCAG22/)が最低限の要件を定義している
    - 🐈こっちもゆくゆく読みたいですね……

#### Assistive technology
- キーボード
    - キーボード、D-pad（十字キー？）、トラックボールといったハードウェアやソフトウェアの方向コントローラーにより利用者は項目ごとに直線的に移動できる
- スクリーンリーダー
    - 点字のディスプレイを使用するかテキストを読み上げるソフトウェアプログラムのこと
    - 目に見えるコンテンツを言語化し、音声で読み上げるため段落やボタンのテキスト、アイコンや見出しの代替テキストなどもその対象に含まれる
    - コンテンツにラベルを付けることでスクリーンリーダーを使用している人、テキストのみのUIを使用している人の体験を最適化できる
- スイッチ入力
    - 画面上の項目をスキャンし、選択するまで各項目を順番にハイライトする
    - 🐈スイッチボタンの話かと誤認しかけましたが、物理的なスイッチで操作する話のようです[参考](https://support.google.com/accessibility/android/answer/6122836?hl=ja)


## Designing
### 【色とコントラスト】
- 色はムードやトーン、重要な情報を伝えるのに有効である
- ユーザビリティをサポートするためにPrimary、Secondary、Accentカラーを選択できる
    - 要素間の十分なコントラストは弱視のユーザーをサポートするために必要

#### コントラスト比
|文字  |カラーのコントラスト  |
|---|---|
|大きい文字（14ptの太字/18pt以上の通常文字）、図表  |3:1  |
|小さい文字  |4.5:1  |

#### クラスタリング
- ボタンコンテナなどのコンテナ要素の色と背景色のコントラスト比を3:1にするものも効果的
- ただしFabのような画面上の他の要素から独立している要素は目立つため、必ずしも3:1のコントラストは不要



### 【構造】ヒエラルキー
- FBの種類
    - 視覚的なFB（ラベル、色、アイコンなど）と触覚的なFBはUIで何ができるのかを利用者に示す
- ナビゲーション
    - 以下の方法で単純化できる
        - 要素がはっきりと見えること
        - 十分なコントラストと文字の大きさ
        - 重要度が明確なヒエラルキー
        - 重要な情報の一覧性
        
- 重要度
    - アイテムの相対的な重要度を伝える
        - 重要なアクションを画面の上部/下部に配置
        - 同じような階層の関連アイテムを隣に配置

- 視覚的な階層
    - スクリーンリーダーが意図した順序でコンテンツを読み上げることができるようにするため、デザイナーと開発者の協力が重要。
    ※スクリーンリーダーはHTMLのトップダウン構造に依存


### 【構造】ウェブランドマークとヘディング
ウェブに限った話だが、ウェブランドマークとヘディングはassistive-technologyの利用者がウェブページを解釈するのに役立つ。また、ページのセクションを分類してラベル付けすることでレイアウト設計によって伝達される構造情報をコードで表現できる。

#### ウェブランドマークとヘディングの識別
①ランドマークの定義
    →レイアウトの大まかな構造を構成するコンテンツのブロック
    →ナビゲーション、検索、メイン、バナー、補足、コンテンツ情報、地域、フォームの8つのロールがある
        - W3C ARIAガイドラインで規定
- ナビゲーション：ナビゲーションリンクのリストを含む（複数ある場合はラベルで区別が必要）
- 検索：検索フィールド
- メイン：UXで定義されたメインコンテンツ。1つであるべき
- バナー：ページごとに繰り返されるコンテンツで、ナビゲーションやツールバーを含むことが多い。1つであるべき
- 補足：サイドバーやメインコンテンツの脇にあり、単独で成り立つもの
- コンテンツ情報：通常はフッター。サイトとコンテンツを説明する情報を含む。1つであるべき
    - 例：著作権情報の説明
- リージョン：メインのランドマークの中に入れ子にできるコンテンツブロック
- フォーム：ユーザー情報を受け取り、保存する

#### アクセシビリティラベルの追加
複数回表示されるランドマークのロールには具体的なラベルをつけることで、ユーザーが情報を区別しやすくする。
※ラベルの中でランドマークのロールを繰り返すのはNG

②ヘディングの定義
    →コンテンツのヒエラルキーに基づいて順番に見出しを設定
    ※H3を使用せずにH2からH4に移動することは避ける
    →ページタイトルにはH1を推奨
    
### 【構造】ターゲットサイズ
画面を見ることができないユーザーや小さなタッチターゲットが苦手なユーザーに役立つ

#### タッチとポインターのターゲットサイズ
- タッチターゲット：ユーザー入力に反応するスクリーン上の部分
    - 例：アイコンは24×24dpに見えても、それを囲むパディングは48×48dpのタッチターゲット
- ほとんどのプラットフォームでタッチターゲットを48×48dpにすることを推奨
    - スクリーンサイズに関係なく約9mmになる
    - iOSは44×44dpのターゲットを推奨

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/d626efc0-d4e7-3482-627b-a170f01a8545.png)



#### ポインターのターゲット
- タッチターゲットと似ているが、マウスなどのモーショントラッキングポインターデバイスによって実装
- 44×44dpを推奨


#### ターゲットの間隔
- 多くの場合ターゲットは8dp以上のスペースで区切る


### 【フロー】フォーカス順とkey traversal
ユーザーがマウスやタッチスクリーンを使用せずに操作できる必要がある。
そのためには以下の2つを意識するとよい
- 戦略的にtab stopsを並べる
- ページの複雑さを減らす

#### デフォルトの使用
- 定義済みのタブ順を利用することで実装負担を減らす
    - 一般的には左から右、上から下へと流れる

#### フローの決定
1. プロダクトのユースケースをグループ化する
    - primary、secondaryのユーザージャーニーに分類
2. 初期フォーカスとコンポーネントレベルのフォーカスを定義する
3. ページとコンポーネントを超えたtypical key traversalの定義
    - tabキー、矢印キー、ショートカットで移動する
    - tabはインタラクティブな要素間のフォーカス、矢印キーはコンポーネント間の移動
    - tab + shiftで方向が反転



### 【フロー】キーボードのショートカット
#### 要件
- キーボードのショートカット：2つ以上のキーを組み合わせ使用すること
- ショートカットが1つのキーで有効化される場合はユーザーに下記の少なくとも1つを実行する環境を提供
    - ショートカットを再マップして1つ以上の印字不可能なキーボードキーを含める←最もおすすめ✨
    - 関連するコンポーネントにフォーカスが当たったときのみショートカットを有効化←おすすめ
    - ショートカットをオフにする←一時的にのみしよう可


### 【要素】ラベリング
#### ラベルが必要な視覚的要素
- テキストが見えない、またはテキストに文脈がないアイコンやボタン
    - 例：鉛筆の編集アイコン
- インタラクティブな画像
- 視覚的な指示
    - 例：プログレスバーやエラーハンドリング
- 意味のあるアイコン
    - 例：ステータスアイコン
- 意味のある画像
    - 例：図、写真、イラスト

#### コンテキストを追加するためにテキストにはラベルが必要
- 一般的なリンク
    - 例：Learn more
- 一般的なテキストを持ったボタン
    - 例：「保存」

#### ラベルが不要な要素
- 非インタラクティブなUIテキスト
    - スクリーンリーダーが自動的に読み取る
- 十分なテキストを含むボタン
    - 例：「画像をダウンロードする」

#### ラベルに要素名は含めない
- ラベルに要素のロールである「ボタン」、「メニュー」を使用しない
    - この識別子は適切なロールを割り当てた時に自動で追加されるため

#### ラベルの言語スタイル
- コードで実行される際にプラットフォームで適切なタイプに翻訳される
※material3ではアクセシビリティラベルをARIAラベルやaltタグを含む異なるタイプを指すために用いる
※ロールは一般的なコンポーネントコントロールタイプとウェブアプリのARIAロールの両方をカバーするために用いる

#### ラベルの追加方法
①ラベル要素
- アクセシビリティラベルはプロダクトの視覚的なインターフェースに頼ることのできないユーザーをサポート
- ラベルは要素の内容、目的、動作を簡潔に説明する必要がある




②意味のある画像やインタラクティブな要素にラベルを追加する
- ラベルは簡潔に画像の内容とコンテキストを伝える必要がある



##### 画像を隠す
- 視覚障害のあるユーザーのエクスペリエンスを向上させない装飾的なアイコンや画像は、コード内で非表示にするための注釈をつける必要がある

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/433ee9d4-2678-581d-26bf-5f9dd65cea7c.png)

③インタラクティブ要素へのロール割り当て
- ARIAロールはウェブアプリに適用され、HTML上のウェブページのアクセシビリティを向上させる方法を指定する
    - ウェブの場合はすべてのインタラクティブな要素にARIAロールを割り当てる
    - ウェブ以外はデザインシステムコンポーネント（ボタン、スライダー、メニューなど）に基づいてロールを割り当てる
- ロールを割り当て、インタラクティブな要素をカテゴライズすることで、インタラクション時に何が起こるのかが予測しやすくなる


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/c5a1b196-f40e-c1e7-dbef-3cef56d5c844.png)