エレベーション（アクセシビリティ）

エレベーションにおけるアクセシビリティ観点での留意点について説明します。

オーバーレイシェードに対する簡易非表示（Light Dismiss）の操作について

「コンポーネント: モーダルダイアログ」のガイドラインに記述予定です。

ダークモードのエレベーション

現行のデジタル庁デザインシステムは、直接的にダークモードを想定したスタイル例を含んでいないためガイドラインや作例等はありませんが、通常、ダークモードでは影の表現ができないためエレベーションのスタイルをライトモードからの色変更のみで定義することができません。

ダークモードを考慮したデザイン設計を行う場合は、あらかじめ、ダイアログなどのオーバーレイ要素の高さや、オーバーレイシェードのような視線遮断のための表現をどのようにするのかを、コントラストの考慮を含め、最初から策定しておく必要があります。

オーバーレイシェードの上に表示される要素であっても必ずボーダーをつける

オーバーレイシェードの上に表示される要素の背景色が白または準ずる色である時、多くの場合、オーバーレイシェードに対するコントラスト比が確保されていると考えられます。しかしオーバーレイシェードと要素間のコントラスト比に関わらず、要素にはボーダーをつけてください。強制カラーモードではオーバーレイシェードのような表現は無効となるため、オーバーレイシェード上の要素と、オーバーレイシェードの下にあったページ全体との境界がなくなります。オーバーレイシェード上の要素がボーダーを持っていることで、要素がページに表示上とけ込んでしまうのを防ぎます（透明のボーダーでも構いません）。