大切なページや操作フローに
使いにくい箇所を確認し、操作中やエラー時の表示を設計・実装して、結果を検証します。
アクセシビリティとデザイン
誰もが使いやすい、ブランドらしさを生かしたデザインを。
使いやすさのために、サイトの個性を諦める必要はありません。ブランドと利用者の両方に合う操作を、デザインから実装まで一緒に整えます。
操作の細部も、デザインの一部です。
リンクだと分かる表示、キーボード操作中の位置が分かる枠、修正方法が伝わるエラー文。こうした使いやすさは、サイトらしいデザインと両立できます。
マウスまたは Tab キーで試せます
どちらも各例の下に記載したWCAGの達成基準を満たしています。「後付けの対応」は、監査後の修正でよく見られる形です。基準は満たしていても、サイトのデザインとちぐはぐになります。
文字組みになじむリンク
リンクは色だけに頼らず、マウスを重ねる前から下線などで示す必要があります。ブラウザ標準の下線は細く、p や y などの文字に重なります。下線の太さと位置を指定すれば、文字にかからず見つけやすい、文字組みになじむ下線になります。
満たしているWCAG 2.2の達成基準
- 1.4.1 色の使用：色だけでなく下線でリンクを示す
- 1.4.3 コントラスト（最低限）：背景に対してリンク文字は 7.7:1
- 2.4.7 フォーカスの可視化：Tab キーで移動するとリンク色の枠を表示
画面になじむフォーカス表示
キーボードで操作する人には、今どこにいるかが見える必要があります。ただし、すべての部品を太い黒枠で囲む必要はありません。Tab キーで移動してみてください。枠はボタンの形に沿ってブランドのアクセント色で表示され、ボタンとの間の余白で埋もれません。
満たしているWCAG 2.2の達成基準
- 2.4.7 フォーカスの可視化：どのボタンにフォーカスがあるか分かる
- 1.4.11 非テキストのコントラスト：フォーカスの枠はカードに対して 4.9:1
- 2.5.8 ターゲットのサイズ（最低限）：ボタンの高さは 44 ピクセル
- 4.1.2 名前（name）・役割（role）及び値（value）：保存ボタンは押された状態を伝える
リネンのマーケットトート
¥4,800
次に何をすればよいか分かるエラー
エラーは文章で示し、直し方を伝える必要があります。ただし、赤い警告帯である必要はありません。送信してみてください。エラー文は入力欄の下に表示され、フォーカスが入力欄に戻り、スクリーンリーダーでもエラーが一緒に読み上げられます。
満たしているWCAG 2.2の達成基準
- 3.3.1 エラーの特定：赤い枠だけでなく文章でエラーを示す
- 3.3.3 エラー修正の提案：正しい形式をエラー文で示す
- 3.3.2 ラベル又は説明：入力欄に見えるラベルがある
- 4.1.3 ステータスメッセージ：完了の表示はフォーカスを動かさずに読み上げられる
使いやすい部品を、サイト全体で使えるように。
重要な一つの画面から、複数ページで使う共通パターンまで対応します。
デザインシステムに
色、フォーカス、フォーム、コンポーネントのルールを整え、チームで再利用できるようにします。
使いやすさと、サイトらしさを両立。
サイトのこと、残したいデザイン、利用者が困っていることを教えてください。