hoverとタッチスクリーンデバイス

1. hoverと タッチスクリーンデバイス 2020.09.30 Kaori Shirahama @Frontend Conference Fukuoka スピンオフ ～福岡人大集合の会～
2. 自己紹介 • しらはま かおり（@9v9Shira） • フロントエンド エンジニア at 株式会社トレタ • 普段はAngularでWebアプリ作ってる • 最近a11yへの興味が高まっている • 兵庫 → 福岡 → 東京
3. Q. タッチスクリーンデバイスでも hoverのスタイルを 指定するべきか？
4. PCブラウザ、タブレットブラウザ（iPad Safari） で同じスタイルをつけていた
5. :hover の挙動が PCブラウザとiPad Safariで違う…
6. iPad Safariでの挙動
7. デフォルトが背景青状態とする
8. タップすると :hover のスタイルが 適用される
9. 指を離してもそのまま
10. 他のところをタップすると :hover のスタイルが外れる
11. マウス、トラックパットでの操作は PCと同じ
12. タッチスクリーンデバイスにおける hoverの概念とは？
13. CSS の :hover 疑似クラスは、ユーザーがポインティング デバイスで要素に反応したものの、アクティブ化する必要 がないものを選択します。普通はユーザーがカーソル（マ ウスポインタ―）で要素の上をホバー（通過）させたとき にこの状態になります。 MDN Web Docs.「:hover - CSS: カスケーディングスタイルシート | MDN 」. https://developer.mozilla.org/ja/docs/Web/CSS/:hover, （参照 2020-09- 29） MDN :hover
14. CSS の :hover 疑似クラスは、ユーザーがポインティング デバイスで要素に反応したものの、アクティブ化する必要 がないものを選択します。普通はユーザーがカーソル（マ ウスポインタ―）で要素の上をホバー（通過）させたとき にこの状態になります。 MDN Web Docs.「:hover - CSS: カスケーディングスタイルシート | MDN 」. https://developer.mozilla.org/ja/docs/Web/CSS/:hover, （参照 2020-09- 29） MDN :hover メモ: :hover 疑似クラスはタッチスクリーンで問題になります。 ブラウザ―によっては、 :hover 疑似クラスが全く選択され なかったり、要素をタッチした直後だけ選択されたり、 ユーザーがタッチをやめるても選択され続け、他の要素に タッチするまで続いたりします。ウェブの開発者は、ホ バー機能が制限されていたり存在しなかったりしても、コ ンテンツにアクセスできるように考慮してください
15. タッチスクリーンには hoverの概念がないため 挙動が異なるのは仕方ない
16. どうするのが良い？
17. 想定される入力方法 マウス ・ トラックパッドを 使う キーボードを使う タッチスクリーンを 直接操作する
18. マウス ・ トラックパッドを 使う タッチスクリーンを 直接操作する :hover の影響を受ける入力方法
19. マウス ・ トラックパッドを 使う タッチスクリーンを 直接操作する :hover の影響を受ける入力方法 良い影響を受ける 悪い影響を受ける
20. タッチスクリーンデバイスで マウス・タッチパッドを 使用するユーザーに hover時のスタイルを表示する タッチスクリーンで 直接操作するユーザーを 混乱させない どっちを優先する？
21. タッチスクリーンデバイスで マウス・タッチパッドを 使用するユーザーに hover時のスタイルを表示する タッチスクリーンで 直接操作するユーザーを 混乱させない 悪い影響をなくすことを優先
22. Q. タッチスクリーンデバイスでも hoverのスタイルを 指定するべきか？
23. A. タッチスクリーンデバイスでは hoverスタイルを 指定しない方が良い！
24. やったこと iPadだけスタイルを切った デバイスがiPadだったらclassに「.iPad」を付与するよ うにし、あとはCSSで調整
25. めでたし
26. 気になること
27. メディア特性使えないかな？
28. hover any-hover pointer any-pointer メディア特性が 使えたら楽そうで いいなぁ
29. hover any-hover pointer any-pointer メディア特性が 使えたら楽そうで いいなぁ hover 一番使えそう
30. hover
31. hover none 主な入力手段で全くホバーできないか、差し支えなくホ バーすることができない、又は主な入力手段がない。 hover 主な入力手段で、要素の上で差し支えなくホバーするこ とができる。
32. hover none 主な入力手段で全くホバーできないか、差し支えなくホ バーすることができない、又は主な入力手段がない。 hover 主な入力手段で、要素の上で差し支えなくホバーするこ とができる。 hoverの挙動を保証できない hoverの挙動保証できる
33. • any-hover 入力メカニズムで、ユーザーが要素上でのホバーを使用す ることができるものがあるか • pointer 主要な入力メカニズムがポインティングデバイスである か、もしそうであればどれだけ正確なものであるか • any-pointer 入力メカニズムにポインティングデバイスがあるか、もし そうであればどれだけ正確なものか
34. 試した
35. MacBook Pro Google Chrome any-hover : hover hover: hover any-pointer: fine pointer: fine
36. MacBook Pro Google Chrome any-hover : hover hover: hover any-pointer: fine pointer: fine 差し支えなくhoverができる 正確性の高いポインティング デバイスがある
37. iPad（第6世代）iPad Safari any-hover : none hover: none any-pointer: coarse pointer: coarse
38. iPad（第6世代）iPad Safari any-hover : none hover: none any-pointer: coarse pointer: coarse hoverの挙動を保証できない ポインティングデバイスはあるが 正確性が曖昧
39. Pixel3a Google Chrome any-hover : none hover: none any-pointer: coarse pointer: coarse
40. Pixel3a Google Chrome any-hover : none hover: none any-pointer: coarse pointer: coarse hoverの挙動を保証できない ポインティングデバイスはあるが 正確性が曖昧
41. hoverメディア特性 使えそう！ （IE11では使えない）
42. まとめ
43. タッチスクリーンデバイスでは hoverスタイルを 指定しない方が良いぞ！
44. hoverスタイルの制御は hoverメディア特性が使えるぞ！
45. ありがとうございました！
46. 参考 • デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ https://www.amazon.co.jp/dp/4862462650 • コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション https://www.amazon.co.jp/dp/4862462669 • MDN web docs • https://developer.mozilla.org/ja/docs/Web/CSS/:hover • https://developer.mozilla.org/ja/docs/Web/CSS/@media/hover • https://developer.mozilla.org/ja/docs/Web/CSS/@media/any-hover • https://developer.mozilla.org/ja/docs/Web/CSS/@media/pointer • https://developer.mozilla.org/ja/docs/Web/CSS/@media/any-pointer etc…