3月のマテリアルデザインガイドの追加内容は以下になります。
- アクセシビリティの色やコントラスト、音、動き、階層周りの追加
- パスワード入力時のテキストフィールド表示方法追加
カラー＆コントラスト
色とコントラストは、ユーザーがコンテンツを理解する為のとても大切な役割を果たします。
カラーパレット
プライマリー、セカンダリー、アクセントカラーはユーザビリティーのキーポイントになります。なので、視力障害がある方でも見えるようコントラストをはっきりさせるのが重要です。
コントラストの割合
W3Cによると色と背景の輝度のコントラスト比は1~21で、通常このコントラスト比は1:1か21:1です。この比率が大きければ大きいほど、二つの色の輝度のコントラスト比が高く見えやすくなります。
以下は、W3Cがおすすめするボディーテキストとイメージテキストのコントラスト比です。
・小さいテキストは背景に対して最低4.5：1のコントラスト比を保つ
・大きいテキストは（14 ptのボールド、18ptレギュラー以上）背景に対して最低3：1のコントラスト比を保つ
また、アイコンなども同様に上記のコントラスト比を参考にして決めます。
ロゴや装飾的な要素
ロゴやイラストなどの装飾は、ブランディングなどに関わるものなので、上記のコントラスト比に対応する必要はありません。
他のビジュアルキュー
視覚障害の方は色の区別が困難な為、他のビジュアルキューを使って誘導できると良いでしょう。例えば、下線、サイン、パターン、テクスチャー、備考欄を設けて明確に誘導します。以下の画像では、エラーのところに下線が引かれ、その下に説明が補足されています。
音
もし音を流す場合は、クローズドキャプションなどをつけて視覚的に何が起こっているのかわかるようにします。
以下のサウンドは避ける
- スクリーンリーダーを無視して同時流れるバックグランドミュージックなど
- 余分なサウンドをネイティブ要素に追加（スクリーンリーダーが正確に読んでくれるので追加でサウンドを追加する必要はない）
モーション
モーションを使う事で大切な情報に焦点をあてる事が可能です。
快適なインターフェースを作るには
- もし5秒以上動いたり、スクロールしたり、点滅し続ける場合は、自動で一時停止やその動きを終えるようにする
- 点滅する場合は1秒で3回以内にする
- 画面の中央の領域を点滅させるのは避ける
階層とフォーカス
直感的に階層のわかりやすいデザインにすることで、ユーザーを効率良くナビゲートできるようになります。
階層
重要度によってアイテムの位置を決める。
・重要なアクション：スクリーンの上か下にレイアウトする
・関連しているアイテム：隣同士に配置する
以下の画像は、階層がわかりやすいレイアウトです。
こちらは、レイアウトがごちゃ混ぜで階層がわかりづらくなってしまっています。
パスワードの入力
パスワードの入力は、デフォルトでは楕円で表示されるようになっています。
可視化のオンオフ
目のアイコンでパスワードの可視化を切り替えます。
・可視化がオンな時：アイコンの透明度54％
・可視化がオフな時：アイコンの透明度38％
0コメント