【アクセシビリティ】アクセシビリティを意識したモーダルの作り方 #CSS

はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところにrole属性を記述したり、tabキーでフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「モーダル」に焦点を当てて、アクセシビリティを意識したモーダルの実装方法とモーダルで意識した方がいいアクセシビリティを解説しようと思います。

アクセシビリティを意識したモーダルの仕様

⚪︎ モーダルとは？

モーダルは、通常のウインドウにオーバーライドする形で表示するウインドウです。
そのため、モーダル以外の要素は、操作できなくなります。

またダイアログと同様に、モーダル外にフォーカスが移動しないようにしないといけません。
モーダル外にフォーカスを移動させるには、モーダルを閉じるための要素をアクティブにする必要があります。

⚪︎ キーボードインタラクション

Tabキー
- モーダル内の次のフォーカス可能な要素にフォーカスを移動する
- モーダル内の最後のフォーカス可能な要素であった場合、最初のフォーカス可能な要素に移動する
Shiftキー + Tabキー
- モーダル内の前のフォーカス可能な要素にフォーカスを移動する
- モーダル内の最初のフォーカス可能な要素であった場合、最後のフォーカス可能な要素に移動する
Escapeキー
- モーダルを閉じる

⚪︎ WAI-ARIA の役割、状態、プロパティ

ダイアログコンテナの要素には、role="dialog" を設定する
- ダイアログを操作する要素は、role="dialog" 子孫要素に入れる
ダイアログに目に見えるタイトルがある場合、タイトル要素を参照する aria-labelledby を設定する
- メッセージダイアログに目に見えるタイトルがない場合、aria-label を設定する
ダイヤログの目的を説明しているコンテンツが含まれている場合は、ダイアログコンテナの要素に、コンテンツのIDを参照する aria-describedby を設定する

アクセシビリティを意識したモーダルの完成形

See the Pen Alert and Message Dialogs Accessibility by でぐぅー | Qiita (@sp_degu) on CodePen.

アクセシビリティを意識したモーダルの作り方

1. HTMLを実装する

sample.html

<button type="button" id="dialog-trigger" popovertarget="dialog">Modalを表示する</button>

<dialog popover id="dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog_desc">
  <img alt="" width="52" height="52" src="https://drive.google.com/uc?export=view&id=1OJIikCT7Pit4SPz6WsF97KTa4sRU27y2"/>
  <h3 id="dialog-title">Qiitaと連携する</h3>
  <p id="dialog_desc">Qiitaと連携しますか？</p>
  <hr/>
  <button popovertarget="dialog" popovertargetaction="hidden" class="dialog-button">連携する</button>
  <button popovertarget="dialog" popovertargetaction="hidden" class="dialog-button">キャンセル</button>
</dialog>

２. CSSを実装する

sample.css

body {
  background-color: #212529;
  color: #fff;
  display: grid;
  gap: 24px;
  height: calc(100vh - 40px);
  margin: 0;
  padding: 20px 0;
  place-items: center;
  width: 100vw;
}

button {
  align-items: center;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
}

#dialog-trigger {
  background: linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.06);
  background-blend-mode: color-dodge, lighten;
  border-radius: 100px;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  width: 200px;
  padding: 8px 16px;
  position: relative;
}

#dialog-trigger::before {
  background: linear-gradient(135deg, rgb(255 255 255 / .4) 0, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .1) 100%);
  border: 1.4px solid transparent;
  border-radius: 24px;
  content: "";
  inset: 0;
  position: absolute;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  z-index: -1;
}

#dialog-trigger:hover {
  background: radial-gradient(101.08% 100% at 50% 100%, rgba(94, 94, 94, 0.32) 0%, rgba(94, 94, 94, 0.00) 73.85%), radial-gradient(100.02% 100% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 68.75%), linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.06);
  background-blend-mode: color-dodge, normal, color-dodge, lighten;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
}


#dialog {
  background-color: rgb(128 128 128 / .3);
  border: none;
  border-radius: 24px;
  color: #ffffff;
  gap: 8px;
  padding: 20px;
  position: relative;
  text-align: center;
  background-blend-mode: luminosity;
  backdrop-filter: blur(15px);
  width: 320px;
}

#dialog::before {
  background: linear-gradient(135deg, rgb(255 255 255 / .4) 0, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .1) 100%);
  border: 1.4px solid transparent;
  border-radius: 20px;
  content: "";
  inset: 0;
  position: absolute;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  z-index: -1;
}

h3 {
  font-size: 20px;
  margin: 16px 0 0;
}

p {
  color: rgba(255, 255, 255, 0.60);
  margin: 4px 0 0;
}

hr {
  border: 1px solid;
  border-color: rgb(255 255 255 / .07);
  margin: 16px 0 12px;
}

.dialog-button {
  justify-content: center;
  background: none;
  border-radius: 100px;
  font-weight: 600;
  padding: 12px 16px;
  width: calc(100% - 32px);
  margin: 8px 16px 0;
}

.dialog-button:hover {
  background: radial-gradient(101.08% 100% at 50% 100%, rgba(94, 94, 94, 0.32) 0%, rgba(94, 94, 94, 0.00) 73.85%), radial-gradient(100.02% 100% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 68.75%), linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.06);
  background-blend-mode: color-dodge, normal, color-dodge, lighten;
}

まとめ

この記事では、「モーダル」に焦点を当てて、アクセシビリティを意識したモーダルの実装方法とモーダルで意識した方がいいアクセシビリティを解説しました。

ぜひこの記事をストックして、モーダルを実装する時にアクセシビリティについて思い出してもらえると嬉しいです。

Advent Calendar 2023では、他のコンポーネントにも焦点を当てて、アクセシビリティについても解説しているので、ぜひ購読していてください。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。