ARIA属性を活用したアクセシブルなモーダル実装

概要

アクセシブルなモーダルを実装する際、適切なARIA属性の設定が必要になります。これらの属性を正しく使用することで、スクリーンリーダーなどの支援技術を利用するユーザーにとっても使いやすいインターフェースを提供できます。

今回は、次回実装時に迷わないように、ARIA属性について整理してみました。

実装内容

<button
  id="openModal"
  aria-expanded="false"
  aria-controls="modal"
  aria-haspopup="dialog"
>
モーダルを開く
</button>

<dialog
  id="modal"
  aria-labelledby="modalTitle"
  aria-describedby="modalDesc"
  aria-modal="true"
>
  <h2 id="modalTitle">モーダルのタイトル</h2>
  <p id="modalDesc">モーダルの説明</p>
  <div>モーダルの内容</div>
  <button id="closeModal">閉じる</button>
</dialog>


<script>
  const openButton = document.getElementById('openModal');
  const closeButton = document.getElementById('closeModal');
  const modal = document.getElementById('modal');

  openButton.addEventListener('click', () => {
    modal.showModal();
    openButton.setAttribute('aria-expanded', 'true');
  });

  closeButton.addEventListener('click', () => {
    modal.close();
    openButton.setAttribute('aria-expanded', 'false');
  });

  modal.addEventListener('cancel', () => {
    modal.close();
    openButton.setAttribute('aria-expanded', 'false');
  });
</script>

ARIA属性の解説

1. aria-expanded
   • 意味: 対象要素が展開されているかどうかを示します。(対象要素を操作するトリガーとなる要素に付与します。)
   • 詳細: この属性はボタンがクリックされたときにモーダルが開閉するかどうかを示すために使用します。初期状態では閉じているためfalseと設定します。
2. aria-controls
   • 意味: 対象要素のIDを指定し、このボタンがどの要素を制御するかを示します。
   • 詳細: この属性により、ボタンがid="modal"の要素を開閉することを支援技術に伝えます。
3. aria-haspopup
   • 意味: ボタンがポップアップ（モーダル、メニューなど）を開くことを示します。
   • 詳細: dialogの値を設定することで、このボタンがモーダルダイアログを開くことを明示します。dialogの他にmenu, listbox, tree, gridなどが指定できますが、対象要素のrole属性に合わせることが求められます。
4. aria-labelledby
   • 意味: 対象要素のラベルを指定し、その要素のIDを指定します。
   • 詳細: id="modalTitle"の要素がこのモーダルのタイトルであることを示し、モーダルが開いた際に支援技術がこのタイトルを読み上げます。
5. aria-describedby
   • 意味: 対象要素の説明を指定し、その要素のIDを指定します。
   • 詳細: id="modalDesc"の要素がこのモーダルの説明であることを示し、モーダルが開いた際に支援技術がこの説明を読み上げます。
6. aria-modal
   • 意味: モーダルダイアログが親ページと分離されていることを示します。
   • 詳細: この属性は、モーダルが開いているときに他のページ要素が操作不能であることを示し、フォーカスをモーダル内に限定します。逆にモーダルが開いていても他のページ要素にアクセスできる場合(モーダレスダイアログ)はaria-modalは不要になります。

参考文献

• aria-modal - MDN
• aria-expanded - MDN
• aria-haspopup - MDN
• aria-controls - MDN
• dialog role - MDN