Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには

Avatar for Taito Tanaka Taito Tanaka
September 06, 2025

「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには

フロントエンドカンファレンス北海道 2025 (2025/9/6)の LT 資料です。
https://fortee.jp/frontend-conf-hokkaido-2025/proposal/c18c61b5-3685-4044-a30d-0f90faa3fd23

Avatar for Taito Tanaka

Taito Tanaka

September 06, 2025
Tweet

Other Decks in Programming

Transcript

  1. Popover API 使ってますか? 1 2 < " "> </ >

    < " " > </ > button button div div popovertarget id popover = 開閉ボタン = ポップオーバーコンテンツ mypopover mypopover (基本的には) Java Script 不要 簡単にポップオーバーの解除が可能 ( Light Dismiss ) z-index を操作する必要がない ...etc
  2. アクセシビリティ考慮できていますか? ESC キーで閉じる 表示 / 非表示 を User Agent に自動的に伝える

    非表示時のフォーカス復帰 Popover API は基本的にはデフォルトでこれらをサポートしている これでアクセシビリティは十分?
  3. 特に注意すべき WCAG 2.2 の達成基準 1.3.2 意味のあるシーケンス (レベル A) 2.4.11 隠されないフォーカス

    (最低限) (レベル AA) 4.1.2 名前 (name)・役割 (role)・値 (value) (レベル A)
  4. 1.3.2 意味のあるシーケンス 1 2 3 4 5 6 7 8

    9 10 11 12 13 < > < " "> </ > < " "> </ > < " "> </ > < " "> </ > < " " > < > </ > < > </ > < > </ > </ > </ > body button button a a a a a a ul li li li li li li ul body = メニューを開く = dog = puppy = hound = menu 1 menu 2 menu 3 popovertarget href href href id popover menu #dog #puppy #hound menu <!-- メニューとは関連のないコンテンツ --> <!-- メニューとは関連のないコンテンツ --> 1 2 3 4 5 6 7 8 9 10 11 12 13 < > < " "> </ > < " " > < > </ > < > </ > < > </ > </ > < " "> </ > < " "> </ > < " "> </ > </ > body button button ul li li li li li li ul a a a a a a body = メニューを開く = menu 1 menu 2 menu 3 = dog = puppy = hound popovertarget id popover href href href menu menu #dog #puppy #hound <!-- メニューとは関連のないコンテンツ --> <!-- メニューとは関連のないコンテンツ -->
  5. 1.3.2 意味のあるシーケンス 可能な限りポップオーバー要素は、トリガー要素の直後に配置すべき 支援技術を利用するユーザーにとって優しい順序にする > Whenever possible ensure the popover

    element is placed immediately after its triggering element in the DOM. Doing so will help ensure that the popover is exposed in a logical programmatic reading order for users of assistive technology, such as screen readers. https://html.spec.whatwg.org/multipage/popover.html
  6. 2.4.11 隠されないフォーカス (最低限) 用途によっては を使う (慎重に検討) ユーザーとの重要な はモーダルダイアログ として実装するのも手段としてはあり “autofocus”

    ”対話” 1 2 3 4 5 6 7 8 9 < > < " "> </ > < " " > < " " > </ > < > </ > < > </ > < > </ > </ > </ > body button button ul button button li li li li li li ul body = メニューを開く = = 閉じる menu 1 menu 2 menu 3 popovertarget id popover popovertargetaction autofocus menu menu hide
  7. 4.1.2 名前 (name)・役割 (role)・値 (value) 1 2 3 4 5

    6 7 8 < > < " "> </ > < " " " "> < " "> </ > < " "> </ > < " "> </ > </ > </ > body button button ul li li li li li li ul body = メニューを開く = = = menu 1 = menu 2 = menu 3 popovertarget id popover role role role role my-menu my-menu menu menuitem menuitem menuitem “popover” は対象の には影響を与えない → 適切なセマンティクスを開発者が設定する必要がある “role”