Web Accessibility Academy · レッスン

前庭障害とパララックスのリスク

大きな動きが一部のユーザーに害を及ぼす理由を理解します。

レッスン 2/413 ステップ

「前庭障害とパララックスのリスク」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

平衡感覚の仕組み

内耳には前庭系と呼ばれる平衡感覚の仕組みがあります。これがうまく働かないと、画面上の普通の動きでも強い違和感を覚えることがあります。🌀

障害によって起こる症状

前庭障害があると、スクロールアニメーションによって、視線をそらした後も続くめまい、吐き気、頭痛が起こることがあります。

思っているより身近な問題

数百万人の成人が何らかの前庭系の症状を抱えています。あなたが公開するすべてのサイトに、そうした人々も利用者として含まれています。

パララックスは主な誘因

パララックススクロールでは、レイヤーごとに異なる速度で動きます。このずれは、内耳に負担をかける典型的な不一致動作です。

大きな動きが問題になる

問題は動きの規模です。大きな移動、ズーム、全画面スライドは、小さく素早いフェードよりもはるかに強い不快感を引き起こします。

速度と距離が重なる

広い距離を速く移動する動きほど負担が大きくなります。ゆっくりと短い動きなら、敏感な前庭系への刺激を抑えられます。

自動再生は選択の機会を奪う

ユーザーが開始していない動きは、さらに負担になります。自動再生される背景やループ動画には、予告も身構える手段もありません。

設定を尊重する

負担の大きい効果は、動きに関するメディアクエリの条件内に置きます。ユーザーが動きを減らしたい場合は、パララックスを完全に削除してください。

@media (prefers-reduced-motion: reduce) {
  .parallax-layer { transform: none !important; }
}

穏やかな代替手段を用意する

動く場面を静止した画像や単純なフェードに置き換えます。回転するような感覚を生じさせずに、内容を伝えられます。

動きをオフにしてテストする

自分の OS で動きを減らす設定を有効にし、サイトを閲覧します。それでも何かが大きく動くなら、まだ対応が必要です。

報告を信じる

自分はその効果を見ても問題ないかもしれませんが、敏感なユーザーはそうとは限りません。自分の快適さではなく、常にユーザーのフィードバックを信頼してください。

理解度チェック

前庭系に負担をかける典型的なアニメーション手法はどれでしょうか。

復習

前庭系は、パララックスのような大きく速い、互いに食い違う動きを苦手とします。動きを小さく、遅くし、ユーザーが動きを減らしたら削除してください。✅

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
30
レッスン
120

よくある質問

「前庭障害とパララックスのリスク」レッスンは無料ですか?

はい。「前庭障害とパララックスのリスク」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「前庭障害とパララックスのリスク」で何を学びますか?

大きな動きが一部のユーザーに害を及ぼす理由を理解します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「前庭障害とパララックスのリスク」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか?

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. CSSとJSでのprefers-reduced-motion
  2. 前庭障害とパララックスのリスク
  3. 発作を防ぐ3回の閃光しきい値
  4. 自動移動コンテンツを一時停止、停止、非表示にする
← Web Accessibility Academyに戻る