見出し画像

Material Design 3 要点まとめ #1 Accessibility

パジェロ｜COMPASS

Material Design 3 ガイドラインの要点をまとめたものです。
第1回はAccessibilityの章。ここはMDやM3特有の内容というよりはアクセシビリティに関する概論みたいな話が多いです。


Overview

要点

・MDのコンポーネントはデフォルトでアクセシビリティに対応している
・このガイドラインには暗黙的なものと明示的なものがある
・ユニバーサルな体験だけではすべての人のニーズを満たせない
・WCAGの要件を出発点にしよう

MDのコンポーネントはデフォルトでアクセシビリティに対応している

  • MDのコンポーネントにはあらかじめ基本的なアクセシビリティの要素が組み込まれているので、これを使用することでコストのかかる再設計をしなくても済む。

  • MDのコンポーネントに組み込まれたアクセシビリティ基準は、インクルーシブな製品設計のための基盤を提供するように設計されている。

  • アクセシビリティに配慮することで、弱視、失明、聴覚障害、認知障害、運動障害、状況的障害（腕の骨折など）を含むすべてのユーザーにとっての使いやすさを向上させることができる。

このガイドラインには暗黙的なものと明示的なものがある

  • このガイドラインに書いてある内容は大きく2種類に分けられる。
    暗黙的なもの：
    コンポーネントの設計やコードに組み込まれているもの。
    明示的なもの：
    判断が必要な場合に考慮すべき事項。

ユニバーサルな体験だけではすべての人のニーズを満たせない

  • デフォルトのユニバーサルな体験がすべての人のニーズを満たすことはほとんどない。一日、一年、一生の間に、個人の状況、知識、ニーズは変化し続ける。

  • そのため、カスタマイズ可能な機能を導入することで個人に適応できるようになる。

WCAGの要件を出発点にしよう

WCAGというのは、アクセシビリティに関する国際的な基準のことです。

アウトラインはこの記事などがわかりやすいでしょうか。

弊社COMPASSが社内プロダクト向けに作ったアクセシビリティガイドラインも、このWCAGを主な参照元にしています。

Accessibility basics

要点

・アクセシビリティ対応のための基本的な要素を紹介するセクション
・UIの階層構造やグラフィックを明瞭にする
・タッチ、クリック対象要素のサイズと間隔
・フォーカス順序を整理する
・画像の内容をテキストで補う
・要素のカラーコントラスト比を一定以上にする
・実装時は標準的なコンポーネントを使う

UIの階層構造やグラフィックを明瞭にする

  • ナビゲーションが簡単だと、ユーザーはアプリ内のどこにいて、何が重要かを理解できるし、構造が整理されているとスクリーンリーダーでも理解しやすい順序で読み上げられる。

  • どの情報が重要かを強調するために、色、形、テキスト、動きなど、複数の視覚的・文字的な合図を用意する。

  • 頻繁に使用するタスクには、特別なフォーカス制御を実装することができる。

UIを理解しやすくするポイント

  • 視認性の高い要素

  • 十分なコントラストとサイズ

  • 重要性の階層を明確にする

  • 一目でわかる重要な情報

項目の相対的な重要度を伝えるためのポイント

  • 重要なアクションは画面の上部または下部に配置する

  • 同じような階層にある項目は隣り合わせに配置する

タッチ、クリック対象要素のサイズと間隔

  • タッチターゲットを少なくとも48 x 48dpにする。そうすることでスクリーンサイズに関係なく、物理的なサイズが約9mmになる。

  • ポインターターゲット（マウスやスタイラスなどでクリックする要素）は最小で44×44dp。

  • ターゲット同士の間隔は8dp以上。

フォーカス順序を整理する

  • フォーカスの順序は、画面の上から下へ、最も重要な項目から最も重要でない項目へ進むようにする。

画像の内容をテキストで補う

  • スクリーンリーダーなどは画像をそのままでは認識できないため、テキストで補う必要がある。または周辺のテキストが情報を得るためのヒントになる。（アクセシビリティテキストと呼ぶ）
    代替テキスト、キャプション、隣接テキストなど。

  • スクリーンリーダーは画像に埋め込まれたテキストを読み取ることができないので、代替テキストに必要な情報を記載する。

要素のコントラスト比を一定以上にする

  • コンテンツの内容を理解するのに必要な情報は一定のコントラスト比にする。
    大きな文字や図像などは3:1、小さな文字は4.5:1。

  • 純粋な装飾などは対象外。

実装時は標準的なコンポーネントを使う

  • 標準的なコンポーネントには支援技術がうまく動作するために必要な実装があらかじめ含まれているので、なるべく標準のものを使ったほうがアクセシビリティに対応しやすい。

Patterns

要点

・テキストのコントラスト比を一定以上にする
・複数の要素がグループになっている場合のコントラスト比は3:1以上
　・FABは例外

テキストのコントラスト比を一定以上にする

  • WCAGの基準をわかりやすくpxで書くと、

    • 30px未満（太字の場合24px未満）のテキストに、4.5:1 以上のコントラスト比がある。

    • 30px以上（太字なら24px以上）のテキストに、3:1 以上のコントラスト比がある。

複数の要素がグループになっている場合、各要素の境界のコントラスト比は3:1以上、FABは例外

  • 複数要素がグループになっている場合は、各要素とそれ以外の要素とはっきり区別できる必要があるため、ボタンの境界と背景のコントラスト比は3:1以上にする必要がある。

  • ただしFABは例外で、コントラスト比の制限はない。画面上の他の要素から離れて独立していることがはっきりわかるため。

Design to implementation

要点

・ユーザージャーニーを基準にフォーカス順序を決める
・（ラベルとランドマークの話は割愛）

ユーザージャーニーを基準にフォーカス順序を決める

  • ユースケースの優先順位は、ユーザーフローの優先
    順位の決定に影響する。

  • 例えばGoogleのトップ画面では、最初にフォーカスがいくのは画面中央の検索フィールド。上部や周囲に他のリンクやボタンもあるけど、最も一般的なユーザーの目的に沿った要素にフォーカスされる。

  • ある要素がユーザーによって活性化されたときや、ユーザーがコンテキストを変更したときも要注意。（ダイアログを開いたときとか）

  • これはあんまり発想なかったので面白かったです。

この記事が気に入ったらサポートをしてみませんか？