hoverと タッチスクリーンデバイス 2020.09.30 Kaori Shirahama @Frontend Conference Fukuoka スピンオフ ～福岡人大集合の会～

自己紹介 • しらはま かおり（@9v9Shira） • フロントエンド エンジニア at 株式会社トレタ • 普段はAngularでWebアプリ作ってる • 最近a11yへの興味が高まっている • 兵庫 → 福岡 → 東京

Q. タッチスクリーンデバイスでも hoverのスタイルを 指定するべきか？

PCブラウザ、タブレットブラウザ（iPad Safari） で同じスタイルをつけていた

:hover の挙動が PCブラウザとiPad Safariで違う…

iPad Safariでの挙動

デフォルトが背景青状態とする

タップすると :hover のスタイルが 適用される

指を離してもそのまま

他のところをタップすると :hover のスタイルが外れる

マウス、トラックパットでの操作は PCと同じ

タッチスクリーンデバイスにおける hoverの概念とは？

CSS の :hover 疑似クラスは、ユーザーがポインティング デバイスで要素に反応したものの、アクティブ化する必要 がないものを選択します。普通はユーザーがカーソル（マ ウスポインタ―）で要素の上をホバー（通過）させたとき にこの状態になります。 MDN Web Docs.「:hover - CSS: カスケーディングスタイルシート | MDN 」. https://developer.mozilla.org/ja/docs/Web/CSS/:hover, （参照 2020-09- 29） MDN :hover

CSS の :hover 疑似クラスは、ユーザーがポインティング デバイスで要素に反応したものの、アクティブ化する必要 がないものを選択します。普通はユーザーがカーソル（マ ウスポインタ―）で要素の上をホバー（通過）させたとき にこの状態になります。 MDN Web Docs.「:hover - CSS: カスケーディングスタイルシート | MDN 」. https://developer.mozilla.org/ja/docs/Web/CSS/:hover, （参照 2020-09- 29） MDN :hover メモ: :hover 疑似クラスはタッチスクリーンで問題になります。 ブラウザ―によっては、 :hover 疑似クラスが全く選択され なかったり、要素をタッチした直後だけ選択されたり、 ユーザーがタッチをやめるても選択され続け、他の要素に タッチするまで続いたりします。ウェブの開発者は、ホ バー機能が制限されていたり存在しなかったりしても、コ ンテンツにアクセスできるように考慮してください

タッチスクリーンには hoverの概念がないため 挙動が異なるのは仕方ない

どうするのが良い？

想定される入力方法 マウス ・ トラックパッドを 使う キーボードを使う タッチスクリーンを 直接操作する

マウス ・ トラックパッドを 使う タッチスクリーンを 直接操作する :hover の影響を受ける入力方法

マウス ・ トラックパッドを 使う タッチスクリーンを 直接操作する :hover の影響を受ける入力方法 良い影響を受ける 悪い影響を受ける

タッチスクリーンデバイスで マウス・タッチパッドを 使用するユーザーに hover時のスタイルを表示する タッチスクリーンで 直接操作するユーザーを 混乱させない どっちを優先する？

タッチスクリーンデバイスで マウス・タッチパッドを 使用するユーザーに hover時のスタイルを表示する タッチスクリーンで 直接操作するユーザーを 混乱させない 悪い影響をなくすことを優先

Q. タッチスクリーンデバイスでも hoverのスタイルを 指定するべきか？

A. タッチスクリーンデバイスでは hoverスタイルを 指定しない方が良い！

やったこと iPadだけスタイルを切った デバイスがiPadだったらclassに「.iPad」を付与するよ うにし、あとはCSSで調整

めでたし

気になること

メディア特性使えないかな？

hover any-hover pointer any-pointer メディア特性が 使えたら楽そうで いいなぁ

hover any-hover pointer any-pointer メディア特性が 使えたら楽そうで いいなぁ hover 一番使えそう

hover

hover none 主な入力手段で全くホバーできないか、差し支えなくホ バーすることができない、又は主な入力手段がない。 hover 主な入力手段で、要素の上で差し支えなくホバーするこ とができる。

hover none 主な入力手段で全くホバーできないか、差し支えなくホ バーすることができない、又は主な入力手段がない。 hover 主な入力手段で、要素の上で差し支えなくホバーするこ とができる。 hoverの挙動を保証できない hoverの挙動保証できる

• any-hover 入力メカニズムで、ユーザーが要素上でのホバーを使用す ることができるものがあるか • pointer 主要な入力メカニズムがポインティングデバイスである か、もしそうであればどれだけ正確なものであるか • any-pointer 入力メカニズムにポインティングデバイスがあるか、もし そうであればどれだけ正確なものか

試した

MacBook Pro Google Chrome any-hover : hover hover: hover any-pointer: fine pointer: fine

MacBook Pro Google Chrome any-hover : hover hover: hover any-pointer: fine pointer: fine 差し支えなくhoverができる 正確性の高いポインティング デバイスがある

iPad（第6世代）iPad Safari any-hover : none hover: none any-pointer: coarse pointer: coarse

iPad（第6世代）iPad Safari any-hover : none hover: none any-pointer: coarse pointer: coarse hoverの挙動を保証できない ポインティングデバイスはあるが 正確性が曖昧

Pixel3a Google Chrome any-hover : none hover: none any-pointer: coarse pointer: coarse

Pixel3a Google Chrome any-hover : none hover: none any-pointer: coarse pointer: coarse hoverの挙動を保証できない ポインティングデバイスはあるが 正確性が曖昧

hoverメディア特性 使えそう！ （IE11では使えない）

まとめ

タッチスクリーンデバイスでは hoverスタイルを 指定しない方が良いぞ！

hoverスタイルの制御は hoverメディア特性が使えるぞ！

ありがとうございました！

参考 • デザイニング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…