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

40cb6070701421da8246dd1f1bc4abcb?s=47 shira
September 30, 2020

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

40cb6070701421da8246dd1f1bc4abcb?s=128

shira

September 30, 2020
Tweet

Transcript

  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…