SSMW - モーダルウィンドウの統一標準

定義

SSMW標準は、モーダルウィンドウのセマンティクス、アクセシビリティ、動作ロジックに関する要件を定義します。

配置とスクロール：

• Safariでは、「ゴムのような」スクロールを防ぐために overscroll-behavior-y: none; を使用する必要があります；

• モバイルデバイスでキーボードが開いている場合、入力フィールドが視認範囲内に留まるよう、ウィンドウは上端に揃えられます。

構造とセマンティクス

<dialog> は、モーダルウィンドウに推奨される要素です。

• aria-modal="true" をネイティブにサポートしており、アクセシビリティを向上させます。

CSS 配置:

• <dialog> が body 以外のコンテナ内でレンダリングされる場合、競合するプロパティの継承を防ぐために position: static が設定されます。

• ドキュメントのルートでは、オーバーレイに対して標準的な絶対配置または固定配置が使用されます。

最適化:

• モーダル要素は、ウィンドウが呼び出されたときにのみ DOM に追加する必要があります；

• メインページのスクロールをブロックした際にインターフェースがずれるのを防ぐため、html要素に scrollbar-gutter: stable; を指定することを推奨します。

アクセシビリティ

フォーカスとナビゲーション:

• モーダルウィンドウはローカルでフォーカスを管理する必要があります；

• ユーザーはモーダルを離れることなく、Tabキーを使用してインタラクティブな要素間を移動できます。

モーダル内のフォーム：

• ウィンドウを開いた後に最初の入力フィールドに自動的にフォーカスを合わせることで、データ入力がスムーズになります。

ネストされたモーダルウィンドウ：

• 複数のレイヤーが存在する場合、z-indexとフォーカスを適切に管理する必要があります；

• スクロールのロックとフォーカスのロジックは、最上部のアクティブなレイヤーにのみ適用されます。

インタラクティブ性と視覚的な反応

閉じる操作と制御：

• モーダルウィンドウは、Escキー、**「閉じる」**ボタン、backdropへのクリックという、3つの一般的な閉じる方法すべてに正しく反応する必要があります。

フォームと終了時の動作：

• フォームの送信に成功すると、モーダルウィンドウが閉じ、成功を知らせる短いメッセージが表示されます。

  このような終了シナリオは、予測可能で快適なユーザー体験を提供します。

アニメーション：

• モーダルウィンドウの表示と非表示は、滑らかな遷移を伴うCSSクラスを使用して実装することを推奨します。

  これにより、インターフェースに完成度と視覚的な滑らかさが加わります。

余白とレスポンシブ対応：

• 内部パディングを設定することで、モーダルが画面の端に張り付くのを防ぎます；
• 小さなviewportでも、縦スクロールが快適に行えるようにする必要があります。