ソシャゲのような10連ガチャをJavaScriptで実装した際に、Webアクセシビリティの面で、
「1秒間に3回以上の点滅させてはいけない」
ということを学んだのでメモします。
デジタル庁が出しているウェブアクセシビリティ導入ガイドブックで定められていました。
1秒間に3回以上点滅させてはいけない
光の点滅を繰り返すと、光感受性発作等を誘発しやすくなります。1秒に 3回を超える点滅するコン
テンツを作ってはいけません。
1秒間に3回以上点滅させると、光感受性発作を引き起こす可能性があるためやってはいけない、とのことでした。
(こんな事件もありましたね)
点滅以外に気をつけること
点滅以外だと、以下3点がデジタル庁のウェブアクセシビリティ導入ガイドで「達成しないと利用者に重大な悪影響を及ぼすもの」として定められています。
・音声の自動再生はさせない(もし自動再生させる場合は3秒以内の音声にとどめること)
・ダイアログを閉じられない状況にするなど、袋小路にさせない
自動でコンテンツを切り替えない(コンテンツの一時停止、非表示、停止の機能もつける必要がある)
参考:https://www.persol-pt.co.jp/salesmarketingservice/blog/web_accessibility_03/#5
上2点についてはあんまり見ない気がしますが、自動でコンテンツを切り替えるカルーセルバナーを導入しているサービスはいっぱいみますね。
Vanilla JSでカルーセルバナーを実装しているなら、clearInterval や clearTimeoutで自動切り替え処理を停止するなどやりようはありそうです。
ただ、ライブラリのSwiper.jsを使ってカルーセルバナーを実装している場合はどうしているのでしょうね?
Swiper.jsでカルーセルバナーを実装しているサイトをよく見るのですが、Swiper.jsに自動切り替えの停止機能とかあるのかが気になります。
(軽く調べた感じでは停止機能はなさそうでした)
とりあえず、今後カルーセルバナーを実装する際は自動切り替えの停止ボタンもつけるように気をつけたいと思います。