赤と緑だけで伝えていない？文字と形を足して状態を分けよう

一覧の右に、赤と緑の丸が並んでいる。どちらが完了で、どちらが確認待ちだろう？ 色の見え方には個人差があり、色の意味を知らない人もいる。意味を伝える情報を、色だけへ預けないようにしよう。

今回は、二つの架空の申請の状態を見分けられることが目標。デザインソフトは不要で、記事下の作例をブラウザで切り替えて確認できるよ。これは色覚の再現装置ではなく、色以外の手掛かりが残るかを見るための比較だよ。

色があることと、色だけが頼りであることは違う

色を使ってはいけない、という話ではない。緑の背景に「承認済み」、赤の背景に「修正が必要」と書いてあれば、文字も状態を伝える。色は目に入りやすくする補助として使えるよ。

W3CのWCAG 2.2の達成基準1.4.1は、情報、動作、応答の促し、視覚的な区別を伝える唯一の視覚的手段として色を使わないことを求めている。文字や形など、色以外の手掛かりも用意しよう。

二つの表示を比べよう

作例には「デザイン案A」「デザイン案B」が並んでいる。最初は、状態が色付きの丸でしか表されていない。

1. まず丸の色だけを見て、それぞれの状態を説明できるか考える。
2. 「文字と形を足す」を押す。「✓ 承認済み」「! 修正が必要」が加わる。
3. 「色を外す」を押す。二つの色が同じ灰色になる。
4. 色を外しても、文字と記号から状態が分かるか確認する。
5. 「文字と形を足す」をもう一度押して手掛かりを消すと、色も文字もない丸だけでは区別できないことが分かる。

ボタンは切り替え式で、押した状態をaria-pressedでも伝える。作例の「最初から試す」で色だけの初期状態へ戻せるよ。編集部では、文字の有無と色の有無を四通り切り替え、表示が対応することを確認した。

記号だけに任せない

チェックや感嘆符は便利だけれど、何を意味するかがいつも共通とは限らない。「承認済み」「修正が必要」のような、具体的な言葉も添えると分かりやすい。

この作例では、同じ状態の文字と記号を重ねているため、記号は読み上げ用の情報から外し、文字で意味を伝えている。画面読み上げソフトの実機検証まで行ったという意味ではない。実際の部品では、名前や状態が支援技術へどう伝わるかも確認してね。

フォームでは、直す内容も書く

入力欄の枠を赤くするだけでは、何が起きているか、どこを直すかが分からないことがある。項目名の近くに「メールアドレスを入力してください」などの説明を置こう。

また、色を外して見えることと、文字が読みやすいことは別の確認だよ。薄い灰色の小さな文字では、言葉を足しても読みにくい。文字のコントラストの確認も合わせて見直そう。

自分の画面で見直す順番

状態一覧、グラフ、入力エラーなど、色で区別している場所を探す。色を取り去ったつもりで、ラベルや形だけでも意味が分かるか確認しよう。グラフなら凡例の色だけでなく、線の種類や直接のラベルを使う方法もある。

色を外す比較は、アクセシビリティ全体の合格判定ではない。文字の大きさ、キーボード操作、読み上げ、エラーの通知など、部品ごとの確認は続けよう。まずは一つの状態表示から、色以外の手掛かりを足してみてね。