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

定義

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

構造とセマンティクス

<dialog> は、aria-modal="true" を組み込みでサポートしており、アクセシビリティを向上させるため、モーダルウィンドウにはこの要素の使用が推奨されます。

<dialog>がbody以外のコンテナ内でレンダリングされる場合、競合するプロパティの継承を防ぐためにposition: static;が設定されます。ドキュメントのルートでは、オーバーレイに対して標準的な絶対位置指定または固定位置指定が使用されます。SafariおよびEdgeでは、**「ゴムのような」スクロールを防ぐためにoverscroll-behavior-block: none;を使用する必要があります。を指定して「ゴムのような」**スクロールを防ぐ必要があります。また、モバイルデバイスでキーボードが開いている場合は、入力フィールドが視認範囲内に留まるよう、ウィンドウを上端に揃える必要があります。

モーダルウィンドウは、ウィンドウが呼び出されたときにのみDOMに追加すべきです。また、メインページのスクロールをブロックした際にインターフェースがずれるのを防ぐため、html要素に scrollbar-gutter: stable; を設定することを推奨します。

アクセシビリティ

モーダルウィンドウは、ユーザーがモーダルウィンドウから離れることなくTabキーを使ってインタラクティブな要素間を移動できるよう、フォーカスをローカルに管理する必要があります。複数のレイヤーが存在する場合は、z-indexとフォーカスを適切に管理し、スクロールをブロックし、フォーカスを当てるのは最上部のアクティブなレイヤーのみとする必要があります。

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

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

モーダルウィンドウは、Escキー、閉じるボタン、backdropへのクリックという、3つの一般的な閉じ方すべてに正しく反応する必要があります。フォームの送信に成功すると、モーダルウィンドウは閉じられ、リクエストが成功したことを伝える短いメッセージが表示されます。このような終了シナリオは、予測可能で快適なユーザー体験をもたらします。

モーダルウィンドウの表示・非表示は、スムーズな遷移を伴うCSSクラスを使用して実装することを推奨します。これにより、インターフェースに完成度と視覚的な滑らかさが加わります。また、モーダルウィンドウが画面の端に張り付くのを防ぐために、内部パディングを追加することをお勧めします。さらに、モーダルウィンドウがviewportよりも高くなる可能性があることを考慮し、 そのため、内部スクロールを用意する必要があります。