ポップアップのアクセシビリティ｜キーボードで閉じられるか、読み上げで分かるか

2024年4月の法改正で何が変わったか

障害者差別解消法は2021年(令和3年)に改正され、2024年(令和6年)4月1日に施行されました。内閣府のリーフレットは、改正のポイントを次のように示しています。

合理的配慮の提供とは、障害のある人から、社会的障壁を取り除くための対応を求める意思の表明があったときに、負担が重すぎない範囲で対応することです。一方の環境の整備は、不特定多数の障害者を対象に、あらかじめ行う改善のことで、こちらは努力義務のままです。

ウェブサイトについては、政府の「障害を理由とする差別の解消の推進に関する基本方針」(2023年3月閣議決定)に分かりやすい例があります。オンラインの申込手続のウェブサイトが使いづらく、支援を求める申出があったときに、電話や電子メールで対応するのが合理的配慮の提供です。そして、以後不便を感じることのないようにウェブサイトを改良するのが環境の整備、と説明されています。

つまり、ウェブサイトやポップアップのアクセシビリティを高めること自体は、法律上は努力義務の「環境の整備」として例示されています。「2024年4月からウェブアクセシビリティ対応が義務になった」という言い方は正確ではありません。ただし、お客さまから「操作できない」と申出があったときに、別の方法で対応することは義務です。基本方針は、環境の整備と合理的配慮の提供を「両輪」として進めることが重要だとしています。

なお、法律の「事業者」には個人事業主も含まれ、対面かオンラインかというサービスの提供形態も問わないとされています。

ポップアップでつまずくのは誰か

基準はJIS X 8341-3とWCAG

日本でよく参照される規格はJIS X 8341-3:2016です。ウェブアクセシビリティ基盤委員会(WAIC)の解説によれば、この規格は国際規格ISO/IEC 40500:2012、つまりW3C勧告のWCAG 2.0と一致した内容です。その後W3CはWCAG 2.1、2.2を勧告しており、WAICがWCAG 2.2の日本語訳を公開しています。WCAG 2.2では、押せる範囲の大きさ(2.5.8)や、フォーカスが隠れないこと(2.4.11)などの基準が新しく加わりました。

デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、初めて取り組む事業者向けに、考え方と取り組み方のポイントを図解で説明しています。全体像をつかむには、まずこちらを読むのがおすすめです。

ポップアップに関係する主な達成基準

達成基準の名前はWAICのWCAG 2.2日本語訳に合わせています。

モーダルのポップアップの作法

画面の中央に出て、後ろのページを暗くするモーダルのポップアップには、W3Cの「ARIA Authoring Practices Guide(APG)」にダイアログ(モーダル)のパターンがあります。要点は次のとおりです。

1. 開いたら、フォーカスを中へ移す。多くの場合はダイアログ内の最初のフォーカスできる要素に置きます。内容によって最適な位置は変わるとされています。
2. Tabキーを中で回す。最後の項目でTabを押すと最初の項目へ、最初の項目でShift+Tabを押すと最後の項目へ戻ります。
3. Escキーで閉じる。
4. 閉じたら、開く前の場所へフォーカスを戻す。
5. 見える閉じるボタンを置く。Tabで移れる場所に、閉じる役割のボタンを入れることが強く推奨されています。
6. 役割と名前を付ける。入れ物に role="dialog" と aria-modal="true" を付け、aria-labelledby か aria-label で名前を付けます。
7. 後ろのページは操作できなくする(inert)。モーダルの外の内容とはやり取りできない状態にします。

画面の端に出る小さなバナーや帯は、閲覧を止めないので、開いたときにフォーカスを奪わないのが普通です。どの出し方が向いているかは、スマホのポップアップはSEOに不利？や離脱防止ポップアップの仕組みと出し方でも紹介しています。

公開前に10分でできる確認

1. マウスを使わずに操作する。ページを開いてポップアップを出し、Tabキーで閉じるボタンに移れるか、EnterキーやEscキーで閉じられるか、閉じたあとに元の場所から操作を続けられるかを確かめます。
2. フォーカスの枠が見えるか。Tabで移るたびに、どこを選んでいるかが分かるかを見ます。
3. 読み上げで聞く。Macの「VoiceOver」やWindowsの「ナレーター」など、OSに入っている読み上げ機能をオンにして、開いたこと・内容・閉じるボタンが伝わるかを聞きます。
4. 200%に拡大する。ブラウザの拡大で、閉じるボタンが画面の外に出ないかを見ます。
5. スマホで指で閉じる。押し間違えずに閉じられるかを実機で試します。
6. 画像の文字を確かめる。特典の条件など大事な文言が画像の中だけにないかを見ます。

marketingLABOのポップアップの対応状況

marketingLABOのポップアップ(バナー)は、計測タグが表示します。2026年10月12日時点で、次のように対応しています。

一方で、次の点はまだ対応していません。

残る課題を補う使い方

1. バナー名を、そのまま読める文にする。バナー名はダイアログの名前と画像の代替テキストになります。「秋キャンペーンB案」ではなく「初回購入10%オフクーポン 11月30日まで」のように、特典と条件を書きます。
2. 開いた直後に出すモーダルを避ける。後ろのページを操作できない状態にしていないため、ページを開いてすぐのモーダルは、読み上げで気づかれにくくなります。スクロールの深さや滞在時間を条件にして、ページの内容を見てから出すほうが安全です。
3. 大事な条件はページ側にも書く。クーポンの条件や期限は、画像の中だけでなく、商品ページやお知らせのページにテキストで書いておきます。
4. 動きの少ない表示を選ぶ。浮動のバナーでは、大きく動くスライドより、フェードインのほうが動きは小さくなります。
5. 画像の文字は大きく、コントラストを高く。拡大して見る人にも読めるよう、細い文字や背景と近い色を避けます。
6. カウントダウンは閉じられる形で。動き続ける表示は、閉じるボタンで隠せるようにしておきます。期限の表示そのものの注意点はカウントダウンタイマーと景品表示法で紹介しています。

よくある質問

Q. ポップアップを出すこと自体が、アクセシビリティ上よくないのですか？
出すこと自体が禁止されているわけではありません。キーボードで閉じられる、開いたことと内容が伝わる、閉じたあとに元の操作へ戻れる、という点を満たすことが大切です。

Q. 小さなショップでも対応が必要ですか？
障害者差別解消法の事業者には、個人事業主も含まれます。ウェブサイトの改善は努力義務の環境の整備にあたりますが、お客さまから申出があったときに、メールや電話など別の方法で対応する合理的配慮の提供は義務です。問い合わせの窓口を分かりやすくしておきましょう。

Q. JIS X 8341-3とWCAG 2.2のどちらを見ればよいですか？
JIS X 8341-3:2016はWCAG 2.0と一致した規格です。WCAG 2.2はその後に加わった基準も含むので、ポップアップのように押せる範囲やフォーカスが関係する部品では、WCAG 2.2の日本語訳もあわせて見ると確認しやすくなります。

Q. メール登録のポップアップで気をつけることは？
入力欄に何を入れるかが読み上げで分かること、エラーがどの項目か分かることが大切です。特典や項目の決め方はメール登録ポップアップの作り方をご覧ください。

marketingLABOでポップアップを作るには

marketingLABOでは、画像、画像+コピー+ボタン、カウントダウン、メール登録フォームの形式のポップアップを、モーダル・フローティング・帯で出せます。フリープランでもバナーを1つ作れます(料金)。無料で登録して、上の10分の確認を自分のサイトで試してみてください。

参考にした資料

内閣府「リーフレット『令和6年4月1日から合理的配慮の提供が義務化されました』」: https://www8.cao.go.jp/shougai/suishin/sabekai_leaflet-r05.html

内閣府「障害を理由とする差別の解消の推進」(基本方針の掲載ページ): https://www8.cao.go.jp/shougai/suishin/sabekai.html

内閣府「障害を理由とする差別の解消の推進に関する基本方針」(令和5年3月14日閣議決定)本文テキスト: https://www8.cao.go.jp/shougai/suishin/sabekai/kihonhoushin/r05/txt/honbun.txt

e-Gov法令検索「障害を理由とする差別の解消の推進に関する法律」(第5条、第8条): https://laws.e-gov.go.jp/law/425AC0000000065

デジタル庁「ウェブアクセシビリティ導入ガイドブック」: https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook

ウェブアクセシビリティ基盤委員会「Web Content Accessibility Guidelines (WCAG) 2.2(日本語訳)」: https://waic.jp/translations/WCAG22/

ウェブアクセシビリティ基盤委員会「JIS X 8341-3:2016 解説」: https://waic.jp/docs/jis2016/understanding/201604/

W3C「ARIA Authoring Practices Guide: Dialog (Modal) Pattern」: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/