今回は私が実際に体験した事例です。

ちょっとWeb制作寄りの話になりますが、皆さんのサイトでも
起こりえる話だと思いますのでこの場を借りて共有します。

先日、あるサイトの制作を担当したのですが、仕上がりをお客様に
確認してもらったところ、ページ内の一部のコンテンツが
表示されないとのご指摘を受けました。

具体的には、お客様のiPhoneを使って閲覧すると、
ページの一部が表示されないという現象でした。

様々な環境・設定で確認するも手元で現象が再現出来ず、
これはお客様のiPhoneでだけ発生する固有の問題なのかも、
と思いかけていたところに、不具合が発生するページのスクリーン
ショットが送られてきました。

これをみて気がつきました。
ページ内で表示されていない要素は、アニメ効果をつけている箇所
でした。スクロールするとフワっと写真や文章が現れる、
最近のWebサイトではよく見かけるものです。

と書くと、Web制作に関わった方であれば何らかのバグを疑うと
思いますが、今回は厳密にはバクではありませんでした。

原因は、iPhoneのiOSのアクセシビリティ設定でした。
設定＞アクセシビリティ＞動作＞視差効果を減らす がオンだと
アニメーションが設定された要素が表示されないのです。

iPhoneの「視差効果を減らす」設定は、バッテリーを長持ちさせる
Tipsでしばしば紹介されることがあるので、設定されている方は
意外と少なくないかもしれません。

仮に、この不具合に気がつかずコンテンツが表示されないままだと、
大きな機会損失につながっていたかもと思うと背筋が寒いです。

恥ずかしながら今回の一件で初めて知ったのですが、
アニメーションなどの動きがある要素により、吐き気を感じたり
物事をうまく認識できない「前庭障害」というものがあるのですね。

Webアクセスビリティに基準が明記されていました。

達成基準 2.3.3: インタラクションによるアニメーションを理解する
https://waic.jp/translations/WCAG21/Understanding/animation-from-interactions.html

前述の「視差効果を減らす」をオンにするとOSのみならず、
ブラウザ上で表示するアニメーションにもその効果が及ぶことが
Webサイト側の作り方によっては起こります。

さて同様のアクセシビリティ設定は、iPhone（iOS）だけでなく
Windows、macOS、Androidにも存在します。

例えばWindow10であれば、パフォーマンスオプションの中の
「Windows内のアニメーションコントロールと要素」が該当します。

この設定は、電源オプションで「省電力」を選択時にオンになる
ことがあるので、ノートパソコンをバッテリーで使っている人は
対象になる可能性がありそうです。

試しに上記設定をWindowsでオンにして、いくつかのサイトを閲覧
したところ、私の事例と同様にコンテンツが正しく表示されない
サイトが散見されました。

気がついてないけどコンテンツが表示されていない、
そんな怖いことが自社サイトでも起こっている可能性があります。

気になる方は前述の設定をオンにして、
自社サイトをチェックしてみてはいかがでしょうか。

以下は制作者向けの情報です。

今回の件、
原因はリセットCSSに指定があったprefers-reduced-motionの値と、
使っていたJavaScript（GSAP）との組み合わせにありました。

少し前のリセットCSSにはprefers-reduced-motionは指定されて
いないものも多いみたいですが、最近の新しいリセットCSSでは
「ちゃんと」指定されているようです。

これ以上はすごく長くなるので、気になる方はググってください。

私の勉強不足が露呈して恥ずかしいです。
現場からは以上です。