「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点 で安全に使うには フロントエンドカンファレンス北海道2025 Taito (@taitotnk) 

Taito ( ) メディア企業勤務 Web Developer アクセシビリティ、犬、浦和レッズが好き @taitotnk 自己紹介 

Popover API 使ってますか？ 1 2 < " "> < " " > button button div div popovertarget id popover = 開閉ボタン = ポップオーバーコンテンツ mypopover mypopover (基本的には) Java Script 不要 簡単にポップオーバーの解除が可能 ( Light Dismiss ) z-index を操作する必要がない ...etc 

便利すぎる 

後は CSS でいい感じに スタイリングするだけ 

No content

アクセシビリティ考慮できていますか？ ESC キーで閉じる 表示 / 非表示 を User Agent に自動的に伝える 非表示時のフォーカス復帰 Popover API は基本的にはデフォルトでこれらをサポートしている これでアクセシビリティは十分？ 

特に注意すべき WCAG 2.2 の達成基準 1.3.2 意味のあるシーケンス (レベル A) 2.4.11 隠されないフォーカス (最低限) (レベル AA) 4.1.2 名前 (name)・役割 (role)・値 (value) (レベル A) 

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 

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 

2.4.11 隠されないフォーカス (最低限) popover=”auto” の場合は ESC キーの非表示機能によって 達成することはできる... popover=”manual” の場合は注意が必要 基本的には を使うべき “auto” 

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 

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” 

アクセシブルな Popover を 実装していきましょう 

Thank you Taito (@taitotnk)