はじめに
Material Design 3を読んで学んだことを自分用に書いただけです。
アクセシビリティ以外セクションはまだ読んでいないので書いてありません。
コントラスト比
コントラストはとにかく3:1か4.5:1を意識しよう。
FABみたいなそもそもが独立して目立ってるヤツのコントラストはあんま意識しなくていいよ。
W3C(World Wide web )が定義しているコントラス比
AAの場合
| テキストの種類 | 色のコントラスト比 |
|---|---|
| 太字の14px以上 or 通常の18px以上 | 背景に対して3:1以上 |
| それ以下 | 背景に対して4.5:1以上 |
AAAの場合
| テキストの種類 | 色のコントラスト比 |
|---|---|
| 太字の14px以上 or 通常の18px以上 | 背景に対して4.5:1以上 |
| それ以下 | 背景に対して7:1以上 |
AA? AAA?
AA : betterAAA : best
デザイン構造
画像とか文字とかが増えるとめっちゃ見にくくなるからアイコンとか使ってできるだけ簡素にしよう。
もし無理ならサイズ変えたり色変えたりして大事なところが目立つようにしよう。
階層
スクリーンリーダーは以下図のように読み取るので気にした方がいいかもね。
ウェブランドマークと見出し
Web向けのページの場合以下のような構成にするといいよ
ランドマークの定義
ランドマーク
レイアウトの高レベルな構造を確立する大きなコンテンツブロックランドマークには8つ役割が存在する。
W3C ARIA ガイドラインの 8 つ
- ナビゲーション(Navigation) : ナビゲーション リンクのリストが含まれる(複数個ある場合はラベルで分ける)
- 検索エリア(Search) : そのまんまの意味
- メイン(Main) : そのページの一番中心となるエリア
- バナー(Banner) : ほぼHeaderのこと
- 補足エリア(Complementary) : メインコンテンツを補足するエリア
- コンテンツ情報(ContentInfo) : ほぼFooterのこと
- リージョン(Region) : メインには劣るけど重要な情報を載せるエリア。ユーザーが知覚可能である必要がある。
- フォーム(Form) : ボタンとかテキストエリアとかのこと
というかこれの"Show Landmarks"で見るのが一番わかりやすい。
アクセシビリティラベル
複数個同じランドマークを作る時はラベルを正しく使用しようね。
ランドマークと同じ名称のラベルはNG!!
label: primaryとかにすると良い。
見出しの定義
h1,h2など上から順に正しく使用しよう。
h1 -> h3 -> h4みたいな使い方はNG
ターゲットサイズ
タッチして反応するサイズが最低でも48dpが良いよね。
(物理的サイズとしては7~10mmぐらい)
各アイコンとのgapは8dp最低でも欲しいよね。
dp??
androidが定義してる独自のサイズ
詳しくはこれ
px = dp * (dpi / 160)らしいです。
ウェブアクセシビリティ基盤委員会(WAIC)曰く44*44 css ピクセルらしいです。
ラベル付け要素
機能の理解が深まるよ。
正しくラベル付けすることで技術支援が必要な人たちの混乱を軽減できるよ。
ラベル名はイラストの様子を表すのではなく機能について書こう。
ラベルが必要な時ってどんな時？
- アイコン、ボタン、テキストに十分なコンテキストがない
- インタラクティブ画像
- プログレスバー、エラーハンドリングなどの内部動作の視覚的手がかり
- ステータスアイコンなどの意味のあるアイコン
- 図やイラストなどの意味のある画像
ラベルがいらない時ってどんな時？
- デザイン的に用意しているアイコン的意味のないアイコン
終わりに
多分次はここやります。