Wix Learn 代替メディアとアニメーションを追加する
- Wixパートナー 和田 英也
- 2024年11月29日
- 読了時間: 10分
更新日：2025年1月15日
こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて発信いたします。
WixLearn第7回の「代替メディアとアニメーションを追加する」を詳しく解説いたします。
前回のレッスンでは代替テキストについて少しお話ししました。 代替テキストだけでなく、他の形態の代替メディアもあります。
今回はそういった代替メディアやアニメーションをサイトに使用する際の注意点をお話します。
一方で、ホームページでそういったメディアを使う際には考慮が必要です。
また、最近では高度なアニメーション技術を使用したサイトも沢山ありますが、サイトのアクセシビリティを向上させる上ではサイト上のパーツの動きを減らした方が良い場合もあります。
動くパーツは認知問題（乗り物酔い、てんかん、ADHD など）を持つサイト訪問者に問題を及ぼす可能性があるからです。
アクセシビリティを優先しすぎると、サイトの個性を出すのが難しくなるのではないか？とも感じるかもしれません。
かつては「サイトのアクセシビリティ向上と SEO（検索エンジン最適化）は同時に実現できない」と信じられていました。
しかしこれは事実ではありません。
それでは早速本題に進みましょう！
今までのWix Learn アクセシビリティ講座要約
第六回Write alt text for imagesはこちら
SECTION1Add alternative media
動画、GIF、音声ファイルなどのメディアをサイトに追加する際は、すべてのサイト訪問者がアクセスできるようにしてください。
トランスクリプト（音声の個別のテキストバージョン）やキャプション（音声のテキストバージョン）などの代替を追加をすることにより、障がいのある訪問者がサイトのコンテンツにアクセスし、楽しむことができるようになります。
ポッドキャスト
最近ではポッドキャストがとても人気です。
ポッドキャストではスマホやタブレット、パソコンに入っている専用アプリを使うことで、さまざまなジャンルのトークや音楽を聞くことができます。
ポッドキャストを提供している事業者によっては無料で聞くことができる場合もあれば、有料の場合もあります。
しかし残念ながら誰もがポッドキャストを耳で聞いて楽しめるわけではありません。
対策：音声のないメディアにテキストの説明を追加する
アクセシビリティを高めるために 1つできるのは ユーザーにトランスクリプトを提供することです。 そうすれば ポッドキャストを聞かなくても、内容を読むことができます。
サイトに音声のない GIF や動画が含まれている場合、視覚障がいのある訪問者がアクセスできないことがあります。
メディアには、開催されるイベントを説明するテキストの説明を追加することをおすすめします。
ヒント：
動画キャプション
例えば、ホームページに動画を追加するとします。
誰もが動画の音声を聞けるわけではありません。 動画キャプションとは、動画の音声をテキストで表示して、動画の内容を理解できるようにする機能です。 動画の音声が聞こえない場合や聴覚に障害がある場合でも、動画の内容を把握することができるようになります。
動画キャプションについての詳細はこちらをご覧ください。（英語）
ほとんどの動画ホスティングサイト(YouTube など)には、「クローズドキャプション」という機能があり、視聴者は動画視聴中にキャプションを表示することができます。
自分で動画をアップロードする場合は、Amara などの外部動画編集ソフトでキャプションを追加することができます。
注意：
キャプションと字幕は違います。
ヒント：
キャプションは、動画の中で話されている言語を話せない視聴者にも役立つため、多言語で提供することをおすすめします。
ライブストリーミング
Twitch などがあります。
Twitch（ツイッチ）は、Amazon.comの子会社であるTwitch Interactiveが提供するライブストリーミングプラットフォームです。
ゲーム実況やeスポーツ大会のライブ配信、モバイルゲームなどの配信が中心ですが、スポーツや雑談、音楽などの配信も増加しています。
また、YouTubeでも自動生成キャプションを目にしたことがあると思います。 このようなライブストリーミングプラットフォームが進化している一方で、現時点では 自動生成のライブキャプションを付けることができない動画がほとんどです。
対策：ライブイベントにキャプションを追加する
サイト上で配信するライブイベントには、キャプションを追加することをおすすめします。これにより、耳の不自由な方でも視聴することができます。
サイトのライブイベントにキャプションを追加する方法は 2つあります：
スクリプト：パフォーマー、ホスト、またはプレゼンターが、あらかじめ決められたスクリプトを使用する場合、このスクリプトをライブ配信に埋め込みます。この方法は、演劇などのイベントでよく使われます。
ライブ配信：ユーザーまたはソフトウェアプログラムによって、リアルタイムでイベント配信にキャプションを追加します。 この方法は、ポッドキャストのライブ録音や授賞式など、スクリプトをほとんど使用しないイベントで使用されます。
Chrome などの一部のブラウザでは、訪問者が自分のデバイスからライブキャプションを有効にすることができます。
しかし、イベントを YouTube から配信したい場合は、キャプションを動画に埋め込むか、HTTP POST でキャプションを送信できる StreamText などのソフトウェアを通じて送信する必要があります。
自動再生を避ける
自動再生とはページが読み込まれると、ビデオおよび音楽プレーヤーが自動的に再生される機能です。
ホームページに動画や音声などの再生可能なメディアを追加する場合は、自動再生されないようにしてください。
スクリーンリーダーは、メディアが原因でサイトを読み込めないことがあり、オーディオがスクリーンリーダーの読み上げより優先される場合があります。
第一に ほとんどの人は自動再生を迷惑だと感じます。
ユーザーは再生したいときに再生します。
再生したくないときは再生しません。
それだけでなくアクセシビリティの観点から見た場合、自動的に再生されると、認知機能障がいを持つ人が単に迷惑だという以上に、驚いてしまうおそれがあります。
何かを追加しようとしていて、それを自動再生する必要性が間違いなくある場合は、自動再生をオフにする方法がすぐにわかるようにしてください。
SECTION2Use animations accessibly
パララックス効果を避ける
次にお話しするのはアニメーションと視差効果についてです。
パララックス効果とは、背景と前景が異なる速度で動くアニメーション効果のことです。
サイトの中で背景が前景とは違う速度で動いて見えることがあります。
これが視差効果です。
なぜ視差効果に注意が必要なのか？
画面酔いを引き起こす可能性視差効果の動きがユーザーの無意識下で混乱を招き、画面酔いを引き起こすことがあります。特に、敏感なユーザーにとっては負担になることがあります。
アクセシビリティの問題
視差効果は、背景やストリップ部分でよく使われますが、キーボードやスクリーンリーダーでのナビゲーションを妨げる可能性があります。
アニメーションが複雑になると、障がいのあるユーザーにとってページの操作が難しくなることがあります。
アニメーションの使い方のポイント
控えめに使用する アニメーションは格好よく見えることがありますが、常に必要とは限りません。本当に効果がある場面でのみ使いましょう。
ユーザーの設定を尊重する MacやWindowsなどの多くのOSでは、ユーザーがアニメーション効果を減らす機能をオンにできます。 この設定をオンにすると、背景の視差効果が無効化されます。こうした機能を考慮してサイトを設計することが重要です。
SECTION3Interacting with animations
前章では、MacのiOSやWindowsなどの多くのOSでは ユーザーがアニメーション効果を減らす機能をオンにできるようになっており、オンにすると背景の視差効果が止まる、ということをお伝えしました。
これ自体はすばらしい機能ですが、別の問題を引き起こす可能性もあります。
それはアニメーションを誤った方法で使った場合です。
エディタに戻りましょう。
Coffeのバナーの上に「Jump start your day with a cold brew coffee」というアニメーションをつけています。
これが画面にストレートに出てきます。
かっこいいですね。
しかし、視差効果を減らす機能をオンにしている場合、次のいずれかの現象が発生します。
1つは バナー全体がアニメーションなしで表示される場合です。 この場合は問題ありません。
一方で視差効果を減らすことで、アニメーションでテキストを動かすコードがまったく実行されなくなる可能性も十分にあります。
その場合はテキストがまったく表示されません。 このバナーの場合 機能がそれほど 失われるわけではないのでそこまで問題にはなりません。 しかし 別の例を見てみましょう。
フォームフィールドをアニメーションにした場合です。
アニメーションが再生されなかった場合、ユーザーはフィールドにメールアドレスを入力できません。
ホームページによっては、最終結果をアニメーションで見せていることもあります。
しかしアニメーションを使っていてユーザーが視差効果を減らす機能をオンにしていると、ホームページがどのように反応するか予測できません。
そのため アニメーションを使うのはどうしても必要なときにだけにするのが最善策になります。
必要なときのためにWixは アニメーションオプションを提供しています。
ただし、アニメーションを使うのは何らかの機能とやり取りする必要がないときだけにしてください。
SECTION4 Pinning elements
最後に固定とズームについて説明します。
WCAG によると、アクセシビリティ対応のページと見なされるにはユーザーがページの機能を一切失うことなく、最大 200% までズームインできる必要があります。
固定機能を使っているときにズームすると、機能要素が重なって表示される例をご紹介します。
ロゴをすべてのページに表示されていることを確認し、画面に固定します。
そして適切な位置に配置します。ページのプレビューを表示して ズームを 200% にしたときにどうなるのか見てみましょう。
ロゴが固定されていて、会社紹介ストリップだけでなく、お問い合わせにも重なってしまっています。
要素を固定するときは、ズームしたときにどこにも重ならないことを 確認するようにしてください
今までのWix Learn アクセシビリティ講座要約
第六回Write alt text for imagesはこちら
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
コメント