React のポータルでモーダル作成！アクセシビリティを向上させるUI設計

フォーカストラップの実装

モーダルが開いた時、最初のフォーカス可能な要素へフォーカスを移し、Tab／Shift+Tab 操作でモーダル内部を循環させ、外部の要素へ逸脱しないようにします。React フックを使った実装が一般的で、キーボードユーザーの混乱を防ぎます。先頭要素、末尾要素、アクティブ要素を追跡することが重要です。

ARIA 属性とスクリーンリーダー対応

role は dialog または alertdialog を使い、aria-modal＝ true を設定します。モーダルタイトルには aria-labelledby、説明文には aria-describedby を使うと良いです。背景コンテンツを aria-hidden や inert 属性でスクリーンリーダーから隠すことで、読み上げ対象を限定できます。また閉じるボタンには aria-label を付け、利用者に明確な操作オプションを示します。

背景の操作不可とスクロールロック

モーダル開時にはバックドロップを設け、背景コンテンツをクリックできないようにします。スクロールをロックし、内容のスクロールのみモーダル内で可能にします。特にモバイルではオーバースクロールやバウンス挙動に注意し、CSS や JS による補完が必要です。視覚的な跳ね返りやレイアウトシフトにも配慮します。

キーボード操作とフォーカス復帰

Esc キーでモーダルを閉じる機能は必須です。Tab 操作で内部を循環させ、モーダルが閉じた後は、モーダルを開いたトリガーにフォーカスを戻します。これによりユーザーの位置感が崩れず、操作性が保たれます。また、閉じるアイコンのフォーカス可能性、キーボードで操作できる構造を設計します。

React ポータル モーダル アクセシビリティの実践例とコードスニペット

ここでは React ポータルを使ったモーダルの実践例を提示し、アクセシビリティ対応がどう反映されるかをコードスニペットとともに見ていきます。実際の実装に役立つ具体的な設計パターンを紹介します。

TypeScript を用いたモーダルコンポーネント例

以下のような構成でコンポーネントを作ると良いです。ポータルレンダリング、フォーカストラップ、ARIA 属性などを含んだ設計が可能です。

// モーダルルートを body に作成しポータル
const modalRoot = document.getElementById('modal-root');
// モーダルコンポーネント
function Modal({ isOpen, onClose, title, children }) {
  const modalRef = React.useRef(null);
  const prevFocused = React.useRef(null);
  React.useEffect(() => {
    if (!isOpen) return;
    prevFocused.current = document.activeElement;
    modalRef.current?.focus();
    // 背景非活性化など
    return () => {
      prevFocused.current?.focus();
    };
  }, [isOpen]);
  if (!isOpen) return null;
  return ReactDOM.createPortal(
    <div role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-body">
      <h2 id="modal-title">{title}</h2>
      <div id="modal-body" ref={modalRef} tabIndex={-1}>
        {children}
        <button onClick={onClose} aria-label="閉じる">×</button>
      </div>
    </div>,
    modalRoot
  );
}

この例ではモーダルが開いた時にトリガー要素からフォーカスを保存し、閉じた時に復帰させています。タイトルと本文ラベルを aria-labelledby と aria-describedby で関連付けています。 role と aria-modal によってスクリーンリーダーにモーダルであることを伝えています。

ライブラリ使用例：react-modal の設定

react-modal ライブラリを使う場合、以下のポイントを確認するとよいです。

• Modal.setAppElement を使ってアプリ全体を非表示にする対象を指定する
• isOpen／onRequestClose／shouldCloseOnEsc などのプロパティで開閉制御
• aria ラベル属性（contentLabel や aria-labelledby／aria-describedby）を正しく設定
• shouldReturnFocusAfterClose を true にしてフォーカス復帰を保証

これらの設定により、スクリーンリーダー利用者、キーボードユーザー双方に配慮したモーダルが構築できます。

ネイティブ dialog 要素との比較表

自前実装かネイティブ要素かを比較したものを以下に示します。

テストと最新情報を踏まえた確認事項

実装した後に確認すべきテスト項目と、最近のブラウザやライブラリが追加したアクセシビリティ対応の情報をまとめます。実際のユーザー体験を保証するためのチェックリストと最新の手法です。

チェックリスト：アクセシビリティ確認項目

モーダルを設計・実装した後、以下のポイントでテストしてください。

• キーボードで Tab／Shift＋Tab がモーダル内で循環するか
• Esc キーでモーダルが閉じるか
• 開いた時にフォーカスが正しい要素に移動するか
• 閉じた後、フォーカスがトリガー要素に戻るか
• スクリーンリーダーで役割やラベルが適切に読み上げられるか
• 背景の内容が読み上げや操作から隠れているか（aria-hidden または inert の適用）
• 背景のスクロールがロックされて見た目にズレがないか

最新のブラウザと技術動向

最近の情報では、ネイティブ