読み込み中...

JavaScriptでポップオーバーを実装する9つの方法

JavaScriptを使ってポップオーバーを実装する9つの方法 JS
この記事は約34分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●ポップオーバーとは？

ポップオーバーという言葉を聞いたことがある人も多いのではないでしょうか。

でも、具体的にどういうものなのか、どんな特徴があるのか、ちょっとわかりにくいですよね。

ポップオーバーは、Webサイトやアプリケーションでよく目にするUIコンポーネントの1つです。

ボタンやリンクをクリックしたり、マウスオーバーしたりすると、小さなオーバーレイウィンドウがふわっと表示されるあれです。

ちょうど、吹き出しのようにポップアップしてくるので、ポップオーバーと呼ばれています。

○ポップオーバーの特徴と用途

ポップオーバーの特徴は、何と言ってもその軽快さでしょう。

ページ全体を覆い隠すようなモーダルウィンドウとは違い、ポップオーバーは小さくてコンパクト。

必要な情報だけを表示するので、ユーザーの操作を妨げることなく、スムーズにインタラクションできるんです。

そんなポップオーバーは、様々な用途で活躍します。

例えば、ボタンの説明文を表示したり、画像のサムネイルを拡大表示したり、フォームの入力ガイドを提示したり。

ユーザーの目的に合わせて、さっと情報を補足できるのが魅力ですね。

○ポップオーバーとモーダルウィンドウの違い

ここで、ポップオーバーとよく似たUIコンポーネントであるモーダルウィンドウとの違いについても押さえておきましょう。

モーダルウィンドウは、ポップオーバーよりも大きく、ページ全体を覆うように表示されます。

ユーザーはモーダルウィンドウ以外の操作ができなくなるため、重要な選択肢を提示するときなどに使われます。

一方、ポップオーバーはあくまで補助的な役割。

メインコンテンツを邪魔せず、ユーザーの操作を妨げないように設計されています。

使い分けのポイントは、表示する情報の重要度と緊急度。

モーダルウィンドウほどの強制力は必要ないけれど、ユーザーに伝えたい情報がある時に、ポップオーバーは大活躍してくれるんです。

●JavaScriptでポップオーバーを実装する基本

さて、ポップオーバーの特徴や用途について理解が深まったところで、いよいよJavaScriptを使った実装の基本に踏み込んでいきましょう。

最初は、ごくシンプルなポップオーバーの実装から始めます。

HTML、CSS、JavaScriptを組み合わせて、ボタンをクリックするとポップオーバーが表示される仕組みを作ってみましょう。

○サンプルコード1：シンプルなポップオーバー

まずは、HTMLでポップオーバーを表示するためのボタンと、ポップオーバーの内容を記述します。

こんな感じですね。

<button id="popoverButton">ポップオーバーを表示</button>
<div id="popover" style="display: none;">
  <p>これはシンプルなポップオーバーです。</p>
</div>

次に、CSSでポップオーバーのスタイルを定義します。

ここでは、ポップオーバーの位置や見た目を調整しています。

#popover {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
}

最後に、JavaScriptでボタンのクリックイベントを監視し、ポップオーバーの表示/非表示を切り替えます。

const button = document.getElementById('popoverButton');
const popover = document.getElementById('popover');

button.addEventListener('click', function() {
  if (popover.style.display === 'none') {
    popover.style.display = 'block';
  } else {
    popover.style.display = 'none';
  }
});

このコードでは、ボタンをクリックするたびにポップオーバーのdisplayプロパティを'block'と'none'で切り替えることで、表示と非表示を制御しています。

実行結果は、こんな感じになります。

<button id="popoverButton">ポップオーバーを表示</button>
<div id="popover" style="display: none;">
  <p>これはシンプルなポップオーバーです。</p>
</div>

ボタンをクリックすると、ポップオーバーがふわっと表示され、もう一度クリックすると非表示になります。

シンプルですが、ポップオーバーの基本的な動作が実現できましたね。

○サンプルコード2：クリックで表示/非表示を切り替える

先ほどのサンプルコードでは、ボタンのクリックイベントを直接処理していましたが、もう少し汎用的な関数を作ってみましょうtogglePopover関数を定義し、ポップオーバーの表示/非表示を切り替えられるようにします。

function togglePopover(popoverId) {
  const popover = document.getElementById(popoverId);
  if (popover.style.display === 'none') {
    popover.style.display = 'block';
  } else {
    popover.style.display = 'none';
  }
}

この関数を使えば、HTMLでボタンのonclick属性にtogglePopover関数を指定するだけで、クリックイベントを処理できます。

<button onclick="togglePopover('popover1')">ポップオーバー1を表示/非表示</button>
<div id="popover1" style="display: none;">
  <p>これはポップオーバー1です。</p>
</div>

<button onclick="togglePopover('popover2')">ポップオーバー2を表示/非表示</button>
<div id="popover2" style="display: none;">
  <p>これはポップオーバー2です。</p>
</div>

実行結果は、こんな感じになります。

<button onclick="togglePopover('popover1')">ポップオーバー1を表示/非表示</button>
<div id="popover1" style="display: none;">
  <p>これはポップオーバー1です。</p>
</div>

<button onclick="togglePopover('popover2')">ポップオーバー2を表示/非表示</button>
<div id="popover2" style="display: none;">
  <p>これはポップオーバー2です。</p>
</div>

各ボタンをクリックすると、対応するポップオーバーが表示/非表示を切り替えます。

togglePopover関数を使うことで、複数のポップオーバーを簡単に管理できるようになりました。

○サンプルコード3：マウスオーバーで表示する

クリックだけでなく、マウスオーバーでポップオーバーを表示することもできます。

mouseenterとmouseleaveイベントを使って、要素の上にマウスが乗ったときにポップオーバーを表示し、マウスが離れたときに非表示にしてみましょう。

const element = document.getElementById('hoverTarget');
const popover = document.getElementById('popover');

element.addEventListener('mouseenter', function() {
  popover.style.display = 'block';
});

element.addEventListener('mouseleave', function() {
  popover.style.display = 'none';
});

HTMLでは、マウスオーバーの対象となる要素とポップオーバーを用意します。

<div id="hoverTarget">マウスオーバーでポップオーバーを表示</div>
<div id="popover" style="display: none;">
  <p>これはマウスオーバーで表示されるポップオーバーです。</p>
</div>

実行結果は、こんな感じになります。

<div id="hoverTarget">マウスオーバーでポップオーバーを表示</div>
<div id="popover" style="display: none;">
  <p>これはマウスオーバーで表示されるポップオーバーです。</p>
</div>

hoverTarget要素の上にマウスを乗せると、ポップオーバーが表示され、マウスを離すと非表示になります。

マウスオーバーでのポップオーバー表示は、ユーザーに追加情報を提供するのに便利な手法ですね。

●ポップオーバーのカスタマイズ

JavaScriptを使ってポップオーバーの基本的な実装ができるようになったら、次はポップオーバーをカスタマイズしてみましょう。

ポップオーバーにアニメーション効果を追加したり、外側をクリックしたときに閉じる機能を付けたり、複数のポップオーバーを管理したりと、様々な拡張が可能です。

ここからは、ポップオーバーのカスタマイズ方法について、サンプルコードを交えながら詳しく解説していきます。

実践的なテクニックを身につけて、より洗練されたポップオーバーを実装できるようになりましょう。

○サンプルコード4：アニメーション効果の追加

ポップオーバーが表示されるときや非表示になるときにアニメーション効果を加えると、より洗練された印象を与えることができます。

CSSのtransitionプロパティを使って、スムーズなフェードイン・フェードアウト効果を実装してみましょう。

まずは、CSSでポップオーバーの初期状態と表示状態のスタイルを定義します。

opacityプロパティを使って透明度を調整し、transitionプロパティでアニメーションの設定をします。

#popover {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#popover.show {
  opacity: 1;
}

次に、JavaScriptでポップオーバーの表示/非表示を切り替えるときに、showクラスの付け外しを行います。

function togglePopover(popoverId) {
  const popover = document.getElementById(popoverId);
  popover.classList.toggle('show');
}

実行結果は、こんな感じになります。

<button onclick="togglePopover('animatedPopover')">アニメーション付きポップオーバーを表示/非表示</button>
<div id="animatedPopover">
  <p>これはアニメーション効果のあるポップオーバーです。</p>
</div>

ボタンをクリックすると、ポップオーバーがフェードインで表示され、もう一度クリックするとフェードアウトで非表示になります。

アニメーション効果によって、ポップオーバーの表示・非表示がより自然で洗練された印象になりました。

○サンプルコード5：外側クリックで閉じる機能

ポップオーバーを表示しているときに、ポップオーバーの外側をクリックしたら自動的に閉じるようにすると、ユーザーにとって使いやすいインターフェースになります。

documentオブジェクトのclickイベントを監視し、クリックされた場所がポップオーバーの外側かどうかを判定して、外側なら非表示にする処理を追加しましょう。

document.addEventListener('click', function(event) {
  const popover = document.getElementById('popover');
  const target = event.target;
  if (!target.closest('#popover') && !target.closest('#popoverButton')) {
    popover.style.display = 'none';
  }
});

このコードでは、documentオブジェクトのclickイベントを監視し、クリックされた要素が#popoverや#popoverButtonの内部ではない場合に、ポップオーバーを非表示にしています。

実行結果は、こんな感じになります。

<button id="popoverButton" onclick="togglePopover('popover')">ポップオーバーを表示/非表示</button>
<div id="popover" style="display: none;">
  <p>これは外側クリックで閉じられるポップオーバーです。</p>
</div>

ポップオーバーが表示されている状態で、ポップオーバーやボタンの外側をクリックすると、ポップオーバーが自動的に閉じます。

この機能によって、ユーザーはポップオーバーを簡単に閉じることができ、使い勝手が向上します。

○サンプルコード6：複数のポップオーバーを管理する

Webサイトやアプリケーションでは、複数のポップオーバーを使用することがよくあります。

そんなときは、ポップオーバーを一括で管理できると便利ですね。

ポップオーバーの表示・非表示を切り替える関数を拡張して、複数のポップオーバーに対応できるようにしてみましょう。

function togglePopover(popoverId) {
  const popover = document.getElementById(popoverId);
  const popovers = document.querySelectorAll('.popover');

  popovers.forEach(function(p) {
    if (p !== popover) {
      p.classList.remove('show');
    }
  });

  popover.classList.toggle('show');
}

この関数では、querySelectorAllメソッドを使って'.popover'クラスを持つ要素（ポップオーバー）をすべて取得し、クリックされたポップオーバー以外のものは'show'クラスを外して非表示にしています。

そして、クリックされたポップオーバーの'show'クラスを切り替えて表示・非表示を切り替えています。

実行結果は、こんな感じになります。

<button onclick="togglePopover('popover1')">ポップオーバー1を表示/非表示</button>
<div id="popover1" class="popover">
  <p>これはポップオーバー1です。</p>
</div>

<button onclick="togglePopover('popover2')">ポップオーバー2を表示/非表示</button>
<div id="popover2" class="popover">
  <p>これはポップオーバー2です。</p>
</div>

<button onclick="togglePopover('popover3')">ポップオーバー3を表示/非表示</button>
<div id="popover3" class="popover">
  <p>これはポップオーバー3です。</p>
</div>

各ボタンをクリックすると、対応するポップオーバーが表示され、他のポップオーバーは自動的に非表示になります。

複数のポップオーバーを一括で管理することで、ユーザーが同時に複数のポップオーバーを開いてしまうような状況を防ぐことができます。

●よくあるエラーと対処法

JavaScriptでポップオーバーを実装していると、思わぬところでエラーに遭遇することがあります。

せっかく作ったポップオーバーが表示されなかったり、意図した位置に表示されなかったりと、悩みの種は尽きません。

でも、安心してください。そんなエラーにも、必ず原因があり、解決方法があるはずです。

ここからは、ポップオーバーの実装でよく遭遇するエラーとその対処法について、具体的に見ていきましょう。

○ポップオーバーが表示されない場合

まず、ポップオーバーが表示されないというエラーから始めましょう。

このエラーに遭遇したときは、HTMLの要素やCSSのスタイルが正しく設定されているか、JavaScriptのコードに誤りがないかを確認する必要があります。

例えば、HTMLでポップオーバーの要素が正しく記述されていない場合、JavaScriptからその要素を取得できず、ポップオーバーが表示されないことがあります。

<!-- 誤った記述 -->
<div id="popover">
  <p>これはポップオーバーです。</p>
</div>

<!-- 正しい記述 -->
<div id="popover" style="display: none;">
  <p>これはポップオーバーです。</p>
</div>

また、CSSでポップオーバーの初期状態がdisplay: none;になっていないと、ページ読み込み時からポップオーバーが表示されてしまいます。

/* 誤ったスタイル */
#popover {
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
}

/* 正しいスタイル */
#popover {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScriptのコードにも注意が必要です。getElementByIdなどのメソッドで要素を取得する際、IDの指定が間違っていると、ポップオーバーが表示されません。

// 誤ったID指定
const popover = document.getElementById('popover-id');

// 正しいID指定
const popover = document.getElementById('popover');

これらの点を確認し、修正することで、ポップオーバーが表示されるようになるはずです。

○ポップオーバーが正しい位置に表示されない場合

次は、ポップオーバーが表示されるものの、意図した位置に表示されないというエラーです。

このエラーは、主にCSSのpositionプロパティと、JavaScriptでのポップオーバー位置の計算に関連しています。

CSSでposition: absolute;を指定している場合、ポップオーバーは親要素を基準に絶対位置で配置されます。

この際、親要素がposition: relative; などの相対的な位置指定になっていないと、ポップオーバーが意図しない位置に表示されてしまいます。

<div>
  <button id="popoverButton">ポップオーバーを表示</button>
  <div id="popover">
    <p>これはポップオーバーです。</p>
  </div>
</div>
/* 誤ったスタイル */
#popover {
  position: absolute;
  top: 0;
  left: 0;
}

/* 正しいスタイル */
div {
  position: relative;
}

#popover {
  position: absolute;
  top: 30px;
  left: 0;
}

JavaScriptでポップオーバーの位置を動的に計算する場合は、要素の寸法やウィンドウのサイズを正確に取得する必要があります。

getBoundingClientRectメソッドやwindow.innerWidthなどを活用しましょう。

const button = document.getElementById('popoverButton');
const popover = document.getElementById('popover');

button.addEventListener('click', function() {
  const buttonRect = button.getBoundingClientRect();
  const popoverWidth = popover.offsetWidth;
  const windowWidth = window.innerWidth;

  let left = buttonRect.left;
  if (left + popoverWidth > windowWidth) {
    left = windowWidth - popoverWidth;
  }

  popover.style.top = buttonRect.bottom + 'px';
  popover.style.left = left + 'px';
  popover.style.display = 'block';
});

このコードでは、ボタンの位置とポップオーバーの幅、ウィンドウの幅を取得し、ポップオーバーがウィンドウからはみ出ないように位置を調整しています。

状況に応じて適切な計算を行うことで、ポップオーバーを意図した位置に表示できます。

○z-indexの問題でポップオーバーが隠れてしまう場合

最後は、ポップオーバーが他の要素に隠れてしまうというエラーです。

これは、要素の重なり順を制御するz-indexプロパティが適切に設定されていないことが原因です。

ポップオーバーは、通常、他の要素よりも手前に表示されるべきです。

しかし、z-indexの値が小さいと、他の要素に隠れてしまいます。

<div class="content">
  <p>このコンテンツは、ポップオーバーよりも手前に表示されます。</p>
</div>
<div id="popover">
  <p>これはポップオーバーです。</p>
</div>
/* 誤ったスタイル */
.content {
  position: relative;
  z-index: 10;
}

#popover {
  position: absolute;
  z-index: 1;
}

/* 正しいスタイル */
.content {
  position: relative;
  z-index: 1;
}

#popover {
  position: absolute;
  z-index: 10;
}

このように、ポップオーバーのz-index値を他の要素より大きくすることで、ポップオーバーが手前に表示されるようになります。

ただし、z-indexを使いすぎると、コードの管理が複雑になるので、必要最小限の使用にとどめましょう。

●ポップオーバーの応用例

さて、ポップオーバーの基本的な実装方法や、よくあるエラーへの対処法について理解が深まったところで、実際の応用例を見ていきましょう。

ポップオーバーは、Webサイトやアプリケーションのあらゆる場面で活用できる、とても便利なUIコンポーネントなんです。

ここからは、ポップオーバーを使ったちょっと発展的な事例を、サンプルコードとともに紹介していきます。

実務ですぐに役立つテクニックが満載ですよ。

○サンプルコード7：画像のサムネイルにポップオーバーを追加

まずは、画像のサムネイルにポップオーバーを追加する方法から始めましょう。

画像ギャラリーなどで、サムネイル画像にマウスオーバーしたときに、画像の説明文をポップオーバーで表示するといった使い方ができます。

HTMLでは、サムネイル画像とポップオーバーを用意します。

<div class="thumbnail">
  <img src="image1.jpg" alt="サムネイル画像1" data-description="これは画像1の説明文です。">
  <div class="popover">
    <p></p>
  </div>
</div>

ポップオーバーの内容は、画像のdata-description属性から取得することにしました。

次に、JavaScriptでmouseenterとmouseleaveイベントを監視し、ポップオーバーの表示・非表示を切り替えます。

const thumbnails = document.querySelectorAll('.thumbnail');

thumbnails.forEach(function(thumbnail) {
  const img = thumbnail.querySelector('img');
  const popover = thumbnail.querySelector('.popover');
  const description = img.getAttribute('data-description');

  thumbnail.addEventListener('mouseenter', function() {
    popover.querySelector('p').textContent = description;
    popover.style.display = 'block';
  });

  thumbnail.addEventListener('mouseleave', function() {
    popover.style.display = 'none';
  });
});

実行結果は、こんな感じになります。

<div class="thumbnail">
  <img src="image1.jpg" alt="サムネイル画像1" data-description="これは画像1の説明文です。">
  <div class="popover">
    <p>これは画像1の説明文です。</p>
  </div>
</div>

サムネイル画像にマウスオーバーすると、ポップオーバーが表示され、画像の説明文が表示されます。マウスを離すと、ポップオーバーは非表示になります。

画像ギャラリーなどで、画像の補足情報を提供するのに便利な手法ですね。

○サンプルコード8：フォーム入力のバリデーションメッセージをポップオーバーで表示

次は、フォームの入力バリデーションで、エラーメッセージをポップオーバーで表示する方法を見ていきましょう。

フォームの入力欄の近くにポップオーバーを表示することで、ユーザーにエラーを明確に伝えることができます。

HTMLでは、フォームの入力欄とポップオーバーを用意します。

<form>
  <div>
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" required>
    <div class="popover">
      <p></p>
    </div>
  </div>
  <div>
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" required>
    <div class="popover">
      <p></p>
    </div>
  </div>
  <button type="submit">送信</button>
</form>

JavaScriptでは、フォームのsubmitイベントを監視し、バリデーションエラーがある場合にポップオーバーを表示します。

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.getElementById('username');
  const email = document.getElementById('email');
  const usernamePopover = username.nextElementSibling;
  const emailPopover = email.nextElementSibling;

  if (username.validity.valueMissing) {
    usernamePopover.querySelector('p').textContent = 'ユーザー名は必須です。';
    usernamePopover.style.display = 'block';
  } else {
    usernamePopover.style.display = 'none';
  }

  if (email.validity.valueMissing) {
    emailPopover.querySelector('p').textContent = 'メールアドレスは必須です。';
    emailPopover.style.display = 'block';
  } else if (email.validity.typeMismatch) {
    emailPopover.querySelector('p').textContent = '正しいメールアドレスを入力してください。';
    emailPopover.style.display = 'block';
  } else {
    emailPopover.style.display = 'none';
  }
});

実行結果は、こんな感じになります。

<form>
  <div>
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" required>
    <div class="popover">
      <p>ユーザー名は必須です。</p>
    </div>
  </div>
  <div>
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" required>
    <div class="popover">
      <p>メールアドレスは必須です。</p>
    </div>
  </div>
  <button type="submit">送信</button>
</form>

フォームの送信ボタンをクリックすると、バリデーションが実行され、エラーがある場合は対応する入力欄の近くにポップオーバーが表示されます。

ユーザーにとって、エラーメッセージが見やすく、入力の修正がしやすくなりますね。

○サンプルコード9：ツールチップとしてポップオーバーを使う

最後は、ポップオーバーをツールチップとして使う方法を紹介します。

ツールチップは、要素にマウスオーバーしたときに表示される小さな説明文で、ユーザーにヒントを提供するのに便利です。

HTMLでは、ツールチップを表示したい要素とポップオーバーを用意します。

<button data-tooltip="このボタンをクリックすると、何かが起こります！">
  マウスオーバーしてみてね
</button>
<div id="tooltip" class="popover">
  <p></p>
</div>

JavaScriptでは、要素のmouseenterとmouseleaveイベントを監視し、ツールチップの表示・非表示を切り替えます。

const tooltip = document.getElementById('tooltip');
const tooltipTargets = document.querySelectorAll('[data-tooltip]');

tooltipTargets.forEach(function(target) {
  target.addEventListener('mouseenter', function() {
    const tooltipText = target.getAttribute('data-tooltip');
    tooltip.querySelector('p').textContent = tooltipText;

    const targetRect = target.getBoundingClientRect();
    const tooltipRect = tooltip.getBoundingClientRect();
    const top = targetRect.bottom + 10;
    const left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;

    tooltip.style.top = top + 'px';
    tooltip.style.left = left + 'px';
    tooltip.style.display = 'block';
  });

  target.addEventListener('mouseleave', function() {
    tooltip.style.display = 'none';
  });
});

実行結果は、こんな感じになります。

<button data-tooltip="このボタンをクリックすると、何かが起こります！">
  マウスオーバーしてみてね
</button>
<div id="tooltip" class="popover">
  <p>このボタンをクリックすると、何かが起こります！</p>
</div>

data-tooltip属性を持つ要素にマウスオーバーすると、ツールチップが表示されます。マウスを離すと、ツールチップは非表示になります。

ツールチップは、要素の説明や使い方のヒントを提供するのに最適ですね。

●アクセシビリティに配慮したポップオーバー

さて、ポップオーバーの実装方法やカスタマイズ、応用例について解説してきましたが、もう一つ忘れてはいけない大切な視点があります。

それは、アクセシビリティへの配慮です。

Webアクセシビリティとは、障害のある人もない人も、誰もがWebサイトやアプリケーションを快適に利用できるようにすることを指します。

ポップオーバーを実装する際にも、アクセシビリティを意識することが重要なんです。

ここからは、キーボード操作への対応とスクリーンリーダーへの配慮という、2つのアクセシビリティ向上のポイントについて見ていきましょう。

○キーボード操作への対応

マウスを使えない人もいます。

そんな人でも、キーボードだけでポップオーバーを操作できるようにしておくことが大切ですね。

具体的には、tabキーでポップオーバーにフォーカスを移動し、enterキーやspaceキーでポップオーバーを開閉できるようにします。

まずは、HTMLでポップオーバーの開閉を制御するボタンと、ポップオーバー自体にそれぞれtabindex属性を設定します。

これにより、キーボードでフォーカスを移動できるようになります。

<button id="popoverButton" tabindex="0">ポップオーバーを表示</button>
<div id="popover" tabindex="-1">
  <p>これはキーボード操作可能なポップオーバーです。</p>
</div>

次に、JavaScriptでキーボードイベントを監視し、適切な処理を行います。

const button = document.getElementById('popoverButton');
const popover = document.getElementById('popover');

button.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    popover.style.display = 'block';
    popover.focus();
  }
});

popover.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    popover.style.display = 'none';
    button.focus();
  }
});

このコードでは、ボタンにEnterキーやSpaceキーが押されたときにポップオーバーを表示し、ポップオーバーにフォーカスを移動しています。

また、ポップオーバーにEscapeキーが押されたときは、ポップオーバーを閉じてボタンにフォーカスを戻しています。

実行結果は、こんな感じになります。

<button id="popoverButton" tabindex="0">ポップオーバーを表示</button>
<div id="popover" tabindex="-1">
  <p>これはキーボード操作可能なポップオーバーです。</p>
</div>

キーボードでボタンにフォーカスを合わせ、EnterキーやSpaceキーを押すとポップオーバーが表示されます。

Escapeキーを押すと、ポップオーバーが閉じてフォーカスがボタンに戻ります。

このように、キーボードでもスムーズにポップオーバーを操作できるようになりました。

○スクリーンリーダーへの配慮

視覚に障害のある人は、スクリーンリーダーを使ってWebサイトやアプリケーションを利用します。

スクリーンリーダーは、画面上のテキストを音声で読み上げたり、点字ディスプレイに表示したりするソフトウェアです。

ポップオーバーをスクリーンリーダーに対応させるには、適切な属性を設定し、ポップオーバーの開閉状態を明確に伝える必要があります。

aria-hidden属性とaria-expanded属性を使って、ポップオーバーの状態を切り替えましょう。

<button id="popoverButton" aria-expanded="false" aria-controls="popover">
  ポップオーバーを表示
</button>
<div id="popover" aria-hidden="true">
  <p>これはスクリーンリーダーに対応したポップオーバーです。</p>
</div>

JavaScriptでは、ポップオーバーの表示・非表示に合わせてaria-hidden属性とaria-expanded属性を切り替えます。

const button = document.getElementById('popoverButton');
const popover = document.getElementById('popover');

button.addEventListener('click', function() {
  if (popover.getAttribute('aria-hidden') === 'true') {
    popover.setAttribute('aria-hidden', 'false');
    button.setAttribute('aria-expanded', 'true');
  } else {
    popover.setAttribute('aria-hidden', 'true');
    button.setAttribute('aria-expanded', 'false');
  }
});

このコードでは、ボタンがクリックされたときに、ポップオーバーの aria-hidden 属性と、ボタンの aria-expanded 属性を切り替えています。

これにより、スクリーンリーダーがポップオーバーの状態を正しく認識し、ユーザーに伝えることができます。

実行結果は、こんな感じになります。

<button id="popoverButton" aria-expanded="false" aria-controls="popover">
  ポップオーバーを表示
</button>
<div id="popover" aria-hidden="true">
  <p>これはスクリーンリーダーに対応したポップオーバーです。</p>
</div>

ボタンをクリックすると、ポップオーバーのaria-hidden属性がfalseに、ボタンのaria-expanded属性がtrueに切り替わります。

スクリーンリーダーは、これらの属性の変化を検知し、ポップオーバーが表示されたことをユーザーに伝えます。

まとめ

JavaScriptを使ったポップオーバーの実装は、Webサイトやアプリケーションのユーザーインターフェースを向上させる上で欠かせない技術です。

基本的な実装から、カスタマイズ、エラー対処、応用例、アクセシビリティへの配慮まで、ポップオーバーに関する幅広い知識を身につけることができたかと思います。

この知識を活かして、ユーザーにとって使いやすく、魅力的なWebサイトやアプリケーションを開発していきましょう。