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

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

Transcript

1. 「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点 で安全に使うには フロントエンドカンファレンス北海道2025 Taito (@taitotnk)
2. Taito ( ) メディア企業勤務 Web Developer アクセシビリティ、犬、浦和レッズが好き @taitotnk 自己紹介
3. Popover API 使ってますか？ 1 2 < " "> </ > < " " > </ > button button div div popovertarget id popover = 開閉ボタン = ポップオーバーコンテンツ mypopover mypopover (基本的には) Java Script 不要 簡単にポップオーバーの解除が可能 ( Light Dismiss ) z-index を操作する必要がない ...etc
4. 便利すぎる
5. 後は CSS でいい感じに スタイリングするだけ
7. アクセシビリティ考慮できていますか？ ESC キーで閉じる 表示 / 非表示 を User Agent に自動的に伝える 非表示時のフォーカス復帰 Popover API は基本的にはデフォルトでこれらをサポートしている これでアクセシビリティは十分？
8. 特に注意すべき WCAG 2.2 の達成基準 1.3.2 意味のあるシーケンス (レベル A) 2.4.11 隠されないフォーカス (最低限) (レベル AA) 4.1.2 名前 (name)・役割 (role)・値 (value) (レベル A)
9. 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 <!-- メニューとは関連のないコンテンツ --> <!-- メニューとは関連のないコンテンツ -->
10. 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
11. 2.4.11 隠されないフォーカス (最低限) popover=”auto” の場合は ESC キーの非表示機能によって 達成することはできる... popover=”manual” の場合は注意が必要 基本的には を使うべき “auto”
12. 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
13. 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”
14. アクセシブルな Popover を 実装していきましょう
15. Thank you Taito (@taitotnk)