モーダルダイアログ
サンプル
使用の前に
非表示のモーダルダイアログ内に含まれるテキストはページ内検索で見つけることができず、ユーザビリティを損なう場合があります。さらに、モーダルダイアログは「アクセシビリティ上の考慮事項」が多いコンポーネントです。モーダルダイアログを使用する前に、以下のような選択肢も検討してください。
- 非表示にせずアンカーリンクで遷移させる
- スペースの省略のためであれば、アコーディオンコンポーネントを使用する
- 情報量が多い場合は別ページに分ける
デザイン上の考慮事項
特になし。
実装上の考慮事項
dialog要素を使用します。- 古いブラウザへの対応が不要な場合、ポリフィルのライブラリの削除と、記述の削除を行ってください。
-
ポリフィルを使用した場合
- フォーカスの挙動は問題なさそうです。
- 読み上げにはダイアログであることは伝わりません。
-
top-layerが作成されませんので、スタッキングコンテキストには注意してください。
-
button要素を使用する場合、基本的にtype="button"を指定します（type属性のデフォルトはsubmitであるため） - 背景オーバーレイをクリックして閉じられることを確認してください。
- モーダル内をスクロールしたときに、ページ全体がスクロールされないことを確認してください。
-
ハッシュ付きのリンクでアクセスすると、ページロード時に対象のダイアログを開きます。例えば、#dialog-1にリンクすると
idがdialog-1であるダイアログを開きます。（ただし、同一ページ内でのアンカーリンクではページロードが発生しないため、この例ではリロードが必要です。） -
data-dialog-push-state属性を付与することで、ダイアログを開いた後「ブラウザバックでも閉じる」ように設定できます。 -
data-dialog-await-animation属性を付与することで、ダイアログを閉じるときにCSS animationの完了を待ってから閉じるように設定できます。 -
data-dialog-scroll-lock属性を付与することで、ダイアログを開いているときにページ全体のスクロールをロックします。
ただし、スクロールロックは、もしモーダルを閉じる際にロックの解除の処理が失敗した場合にスクロールできなくなってしまうなど、危険が伴うため、可能な限り使用しないことをおすすめします。
アクセシビリティ上の考慮事項
-
キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）
なお、dialog要素を使用する限り（サポートされているブラウザにおいては）、これらの挙動はサポートされています。
- キーボードで開いたときに、フォーカスがモーダル内に移動することを確認してください。
- モーダルを開いている間は、モーダル以外の要素にフォーカスが映らないことを確認してください（フォーカストラップ）。
- キーボードでモーダルを閉じられることを確認してください。
- モーダルを閉じた後、フォーカストラップが解除されることを確認してください（達成基準 2.1.2 キーボードトラップなし (レベル A)）
- 特に、Escキーで閉じられることを確認してください。
- モーダルを閉じたときに、モーダルが開く前にフォーカスされていた要素にフォーカスが移ることを確認してください。
-
フォーカスインジケータが正しく表示されることを確認してください（達成基準 2.4.7 フォーカスの可視化 (レベル AA)）。（特に
overflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります） -
dialog要素にアクセシブルな名前をつけてください（達成基準 4.1.2 名前 (name)・役割 (role) 及び値 (value) (レベル A)）。 -
dialog要素内の最初に読ませたい要素に対してautofocusとtabindex="-1"を設定してください。
（ダイアログが開かれた時にフォーカスが当たる要素を指定します。）
dialog要素内にフォーカス可能な要素が他の要素より下部にある場合、ダイアログが開いた時にそのフォーカス可能な要素にフォーカスが当たり、そこから読み上げが始まってしまいます。
またフォーカス可能な要素がひとつもない場合は、dialog要素自体にフォーカスが当たりますが、ダイアログがスクロールを必要とした場合にスクロールすることができません。