GIFなどの自動再生する要素のアクセシビリティを担保したいときの備忘録
自動再生する固定要素
アクセシビリティを意識するようになってから、Webサイトで自動再生するGIFやアニメーションについてどう実装するのが良いか？と考えるようになってきました。
特にADHD等の発達障がいを持っているわけではありませんが、あるのとないのとではコンテンツが頭に入ってくる感覚が若干違う気がします。
またWCAGのガイドラインでも取り上げられているため、見る人によって情報の受け取り方や量が違う実装はできるだけ避けたいものです。
達成基準 2.2.2: 一時停止、停止、非表示を理解する
自動再生するGIF要素をユーザーが停止できるように実装する
そんな中、直近で携わったWebサイトの実装案件で、固定ヘッダーに動き続けるGIFのロゴを実装する場面に出くわしました。（実際はGIFファイルではないですが、詳細を伝えると身バレする可能性があるためGIFとして進めます）
どう実装しようか調べていたところ、X（旧Twitter）でprefers-reduced-motionを使って実装した例の話を聞いて、その手があったか！と思い早速実装しました。
prefers-reduced-motionはiPhoneの場合、「視差効果を減らす」という設定をONにすると値がreduceになり、アニメーションが減ったりユーザーインターフェイスの動きが減ったりします。
（筆者も普段はONにしています）
もちろんiPhone以外のAndroidやWindows,Macなどでも同様の設定があります。（名称は異なります）
HTML pictureタグを使った方法
<picture>
<source
srcset="./assets/img/logo.svg"
media="(prefers-reduced-motion: reduce)"
/>
<img
src="./assets/img/logo.gif"
alt=""
width="100"
height="50"
/>
</picture>
sourceでreduce（視差効果を減らすをON）だったら動きのないSVGファイルを表示して、そうでなかったらGIFファイルが表示されます。
この判定に関してはmedia="(prefers-reduced-motion:no-preference)"として処理を逆にして表示しても問題ないかと思います。
CSS,JavaScriptでもできる
@media (prefers-reduced-motion: reduce) {
/* アニメーションを無効にしたときのプロパティと値 */
}
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
if (mediaQuery.matches) {
// アニメーションを無効にしたときの処理
}
iOS17から追加された「アニメーション画像自動再生」
上記のコードでPCでもスマホでも動作することを確認できましたが、iPhoneのアクセシビリティの動作の設定で、iOS17から追加された「アニメーション画像自動再生」という設定に気づきました。
どういう仕様なのかいまいち分からなかったので、上記のコードを用いてiPhoneで実機検証してみました。
検証方法：iPhoneで設定を組み合わせてWebサイトのGIF要素を見る
以下、GIFファイルがどういう挙動を取るかの結果です。
| 視差効果を減らす | アニメーション画像自動再生 | GIF 結果 |
|---|---|---|
| ON | ON | 動かない |
| ON | OFF | 動かない |
| OFF | ON | 動く |
| OFF | OFF | 動かない |
ほとんど動かない結果となりました。
わかったことは、WebサイトのGIFファイルに関しては「視差効果を減らす」の設定より、「アニメーション画像自動再生」の設定の方が優先度が高い、ということですね。
この「アニメーション画像自動再生」について少し調べてみましたが、今のところON/OFFをデバッグする方法はなさそうでした。。。（内部的にどのような処理をしているのかも不明）
ちなみにAppleサイトでは以下のように説明されていました。
アニメーション画像の自動再生: オフにする。（オンの場合、「メッセージ」やSafariでのGIFなど、動きの速いアニメーション画像や移動する要素が自動再生されます。）
リセットCSSに気をつけよう
本記事で紹介したprefers-reduced-motionはリセットCSSに書かれているケースがあります。
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
/* Animate focus outline */
@media (prefers-reduced-motion: no-preference) {
:focus-visible {
transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
}
:where(:not(:active)):focus-visible {
transition-duration: 0.25s;
}
}
これらのリセットCSSを利用している場合、animationやtransitionのプロパティを使用すると、iPhoneの「視差効果を減らす」などをONにしたときに、ほぼ再生しないように見える可能性があります。
私も以前、このリセットCSSに気づかずに自分のスマホだけアニメーションの挙動が異なっていてめちゃくちゃ沼った経験があります。。。
ちょっと大変かもしれませんが、アニメーションが多いサイトでは実機検証のときにprefers-reduced-motioを有効化したときとしてないとき両方でどう見えるか確認してもよいかもしれません。
おまけ：GIFよりMP4を使おう
X(旧Twitter)でのやり取りでも意見がありましたが、アニメーション画像を実装する場合、今はGIFよりMP4の方がいいみたいです。
基本的に素材はデザイナーさんが用意することが多いと思いますが、もし意見できる立場であればMP4で作成依頼してもよいでしょう。
Appleのdeveloperサイトでも明記されています。
GIFs can be up to 12 times as expensive in bandwidth and twice as expensive in energy use when compared to a modern video codec. Instead, use H.264-encoded MP4 files for animations;
（Google翻訳：最新のビデオコーデックと比較すると、GIFは帯域幅で最大12倍、エネルギー使用量で2倍高価になる可能性があります。代わりに、アニメーションにはH.264でエンコードされたMP4ファイルを使用してください。）
参考
Discussion