オーディオ、画像、動画にアクセスしやすくする

メデ⁠ィア コンテンツをさまざまな形式で表示するためのヒント⁠。

最終更新日 2024年10月18日

オ⁠ーデ⁠ィオ⁠、画像⁠、動画コンテンツ (⁠メデ⁠ィア コンテンツとも呼ばれます⁠) を追加することは⁠、サイトを強化する方法として優れています⁠。ただし⁠、コンテンツを完全に見たり聞いたりできない訪問者が⁠、この情報をどのように体験するかを考慮してください⁠。

このガイドでは⁠、メデ⁠ィア コンテンツを訪問者に提示する他の方法について詳しく説明します⁠。

備考

このガイドは⁠、開始に役立つ資料として利用できますが⁠、法的アドバイスとして解釈したり依拠したりはしないでください⁠。Squarespaceは⁠、サイトを特定のアクセシビリテ⁠ィに関する法律⁠、規制⁠、または基準に準拠させるためのアドバイスを提供することはできません⁠。

画像

インタ⁠ーネ⁠ットは視覚的なメデ⁠ィアであり⁠、サイトのプレゼンテ⁠ーシ⁠ョンにおいて画像が重要な役割を果たします⁠。代替テキストやアニメ⁠ーシ⁠ョン画像や⁠.gifのフ⁠ォ⁠ーマ⁠ット方法などの要素について留意する必要があります⁠。

代替テキスト

ペ⁠ージをスキ⁠ャンするとき⁠、スクリ⁠ーン リ⁠ーダ⁠ーは画像を識別し⁠、訪問者に説明文 (⁠代替テキスト⁠) を読み上げます⁠。代替テキストを追加するときは⁠、そもそもなぜその画像を使用したのかを考えてみてください⁠。たとえば⁠、情報を伝えるためでし⁠ょうか⁠、それとも装飾としてでし⁠ょうか⁠。視覚障害のない訪問者が利用できるすべての情報に⁠、視覚障害のある訪問者がアクセスするには⁠、画像について何を知⁠っておく必要があるでし⁠ょうか⁠。

ベスト プラクテ⁠ィスは⁠、電話で友人に伝えるときと同じように⁠、画像について簡単に説明することです⁠。コンテンツを区切るグラフ⁠ィ⁠ックや抽象的な背景画像など⁠、単に装飾として使用する画像には説明は必要ありません⁠。代替テキストはペ⁠ージ上のコンテンツであることを覚えておくことが重要です⁠。明確かつ簡潔に書く必要があります⁠。

実施すべきこと
  • 画像の目的を考え⁠、その意味を125文字以内で伝える⁠。
  • 画像にクリ⁠ックスル⁠ーURLなどの機能上の用途がある場合は⁠、その機能を説明する⁠。たとえば⁠、笑顔の婚約中カ⁠ップルの画像に⁠、婚約写真のペ⁠ージへのリンクが設定されている場合⁠、その画像の代替テキストは「⁠笑顔の婚約中カ⁠ップル⁠。婚約写真へのリンク⁠」のようにできます⁠。
  • チ⁠ャ⁠ート⁠、グラフ⁠、複雑なグラフ⁠ィ⁠ックなど⁠、詳細な説明が必要な画像については⁠、サイトのテキストの近くに画像の説明を入れる⁠。別の方法として⁠、画像の説明がある別のペ⁠ージを追加し⁠、画像からそのペ⁠ージへのクリ⁠ックスル⁠ーURLを追加することもできます⁠。
 
実施してはならないこと
  • 代替テキストに「⁠~の画像⁠」や「⁠~の写真⁠」のようなフレ⁠ーズを入れる⁠。支援技術により⁠、自動的に画像として識別されます⁠。
 

アニメ⁠ーシ⁠ョン ⁠.gif

サイトのほとんどの領域で⁠、アニメ⁠ーシ⁠ョン画像 (⁠⁠.gif⁠) を追加できます⁠。アニメ⁠ーシ⁠ョン ⁠.gifは1秒間に3回以上点滅させないでください⁠。このタイプのコンテンツは⁠、発作やその他の身体的反応を引き起こすことが知られています⁠。

ヒント

サイトがバ⁠ージ⁠ョン7⁠.1の場合⁠、訪問者はデバイス設定から一部のアニメ⁠ーシ⁠ョン機能をオフにすることができます⁠。これにより⁠、サイトの閲覧時に表示される動きが少なくなります⁠。たとえば⁠、Macユ⁠ーザ⁠ーがデバイスで画面の動きを減らすことを選択した場合⁠、背景画像エフ⁠ェクト背景用ア⁠ートについて有効にしたアニメ⁠ーシ⁠ョンは⁠、その訪問者に対してアニメ⁠ーシ⁠ョン表示されません⁠。

動画

サイトに動画を追加する際には⁠、以下のヒントを参考にしてください⁠。

  • YouTubeとVimeoの統合されたクロ⁠ーズドキ⁠ャプシ⁠ョン機能を使用して⁠、同期キ⁠ャプシ⁠ョンを追加します⁠。これにより⁠、視聴者は動画ブロ⁠ック内からキ⁠ャプシ⁠ョンを有効または無効にすることができます⁠。キ⁠ャプシ⁠ョンの追加について詳しくは⁠、YouTubeVimeoをご覧ください⁠。
  • 1ペ⁠ージに追加できる背景動画は2つまでです⁠。モ⁠ーシ⁠ョンに敏感な人にと⁠っては⁠、モ⁠ーシ⁠ョンが多すぎると見づらくなる可能性があります⁠。
  • 動画内では1秒間に3回以上点滅するコンテンツを使用しないでください⁠。

オ⁠ーデ⁠ィオ

トランスクリプトを追加すると⁠、聴覚障害のある訪問者がポ⁠ッドキ⁠ャストなどのオ⁠ーデ⁠ィオ コンテンツにアクセスしやすくなります⁠。ペ⁠ージを整理するために⁠、[⁠リンクなし⁠] にトランスクリプトを含めることもできます⁠。

モ⁠ーシ⁠ョン

モ⁠ーシ⁠ョンとアニメ⁠ーシ⁠ョンを使用すると⁠、サイトをよりインタラクテ⁠ィブで目を引くものにすることができます⁠。ただし⁠、訪問者を混乱させないようにする必要があります⁠。デザインによ⁠っては⁠、特にモ⁠ーシ⁠ョンを伴う場合⁠、モ⁠ーシ⁠ョンに敏感な人に悪影響を与える可能性があります⁠。以下は⁠、サイトのアクセシビリテ⁠ィを十分なものにするために⁠、小規模にするか⁠、あるいはま⁠ったく使用しないようにした方がよいデザイン要素です⁠。

パララ⁠ックス効果

パララ⁠ックス効果とは⁠、スクロ⁠ール中に背景要素が前景要素と異なる速度で動くことです⁠。このようなタイプのエフ⁠ェクトを使用する場合は⁠、前庭障害のある人のニ⁠ーズを考慮してください⁠。

パララ⁠ックス効果が最も大きな問題となるのは⁠、パララ⁠ックス効果が次のような状態の場合です⁠。

  • 多くのスペ⁠ースを占有している
  • テキストの背面または近くに表示される
  • ペ⁠ージ上で複数回出現する

背景画像の効果をオフにするには⁠、「⁠セクシ⁠ョンの背景画像⁠」の手順に従⁠ってください⁠。画像エフ⁠ェクトが [⁠なし⁠] に設定されていることをご確認ください⁠。パララ⁠ックス効果を使用する場合は⁠、1ペ⁠ージあたり1つに制限し⁠、各効果のサイズと深さを最小限に抑えるようにしてください⁠。

サイトの動きやアニメ⁠ーシ⁠ョンを減らす方法について詳しくは⁠、「⁠サイト全体のアニメ⁠ーシ⁠ョン⁠」をご参照ください⁠。

点滅

点滅するコンテンツや急激に色が変化するコンテンツが原因で⁠、敏感な訪問者が発作を起こす可能性があります⁠。可能な限り⁠、点滅したり色が急激に変化したりするコンテンツの使用は避け⁠、次のガイドラインを適用するようにしてください⁠。

  • 1秒間に3回以上点滅することがない⁠。
  • これは⁠、一般的な点滅および赤色点滅のしきい値を下回⁠っています⁠。

点滅のしきい値は色ごとに異なります⁠。人への影響が最も強いのは赤色の点滅です⁠。

トレ⁠ース センタ⁠ーの感光性てんかん分析ツ⁠ールを使用して⁠、発作のリスクと点滅のしきい値をテストできます⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

オーディオ、画像、動画にアクセスしやすくする