コンテンツ作成に関するFAQ

ウェブサイトにおけるリンクテキストの作成では、ユーザーがクリックすることで得られる結果や導かれるページを具体的に示す必要があります。たとえば「詳細はこちら」のようなあいまいな表現ではなく「製品詳細ページへ」といった具体的な表現を用いることで、リンクの目的地や機能がユーザーに直接伝わり、ユーザーがサイト上での行動を決定する際の重要な手がかりとなります。

動画の字幕は下記の二つに大別できます。

ナレーションのない、製品の使い方を説明する動画などをウェブサイトに掲載する際は、テキストで内容を補完することが適当です。
以下に代替テキストの掲載方法の例を示しますので、参考にしながら、動画の内容やテキストの長さに応じて適切な掲載方法を検討してください。

フローチャート画像を掲載する場合には、視覚障害があるユーザーやスクリーンリーダーを使用するユーザーが情報にアクセスできるよう代替テキストを設定しましょう。以下は、サイトへのログイン手順を示すフローチャート画像です。こちらを例に代替テキストを考える際の参考にしてください。

代替テキストの翻訳は、ウェブサイトのアクセシビリティ向上に不可欠な要素です。コンテンツ画像だけでなく、可視ラベルのないUI要素なども翻訳の対象になります。代替テキストを忘れないようにしましょう。
翻訳作業を進める際には、代替テキストの存在とその重要性を常に意識し、高いアクセシビリティを持ったウェブサイトを目指してください。

イラストで情報を伝える際に、さまざまな状況のユーザーにも伝わるように、代替テキストを準備してください。
以下は、コーヒーマシンの使い方を4つの手順イラストで説明した場合の一例です。代替テキストを考える際の参考にしてください。
※イラストは「コーヒーマシンの使い方」を伝えるために、操作箇所がどこなのかを示すものとして用いています。

漫画はストーリー、セリフ、視覚的な要素が複雑に組み合わさったコンテンツであり、これを代替テキストで簡潔に伝えるのは難しい場合があります。以下のアプローチを一例として参考にしてください。

タブメニューの中に設置するコンテンツに対しては、以下のような点に注意することでアクセシビリティを向上することができます。

意味のある画像には内容を伝える「代替テキスト」を設定するように、音声や映像、または音声・映像の両方を含むコンテンツに対して、音声を聞くことができない、または映像を見ることができない状況でも、内容がわかる代替が必要です。
音声情報に対しては「キャプション（字幕）」、映像情報に対しては「トランスクリプト」や「音声解説」が代替コンテンツとなります。
また、動画では、上記のような代替コンテンツの他に、短いテキストでコンテンツを識別するための「ラベル」も準備しましょう。

動画の音声情報には、字幕（キャプション）が必要です。音声情報とは、音声によって伝える情報のことを指します。BGMも音声情報となるため字幕が必要です。
聴覚障害があるユーザーや、音声を利用できない、音声が聞き取りにくい環境のユーザーも、音声で表現された内容を理解できるように字幕を提供しましょう。

ウェブアクセシビリティの配慮=画像を使わない、ではなく、画像（視覚情報）だけに頼った表現にしないことが重要です。さまざまな状況にあるユーザーが利用しやすいデザインを検討していってください。

文字を含む画像に「代替テキストを設定」しただけでは、アクセシビリティの問題が解消できたとは限りません。画像に含まれる文字のコントラストを確保する必要もあります。
画像に対する代替テキストは、視覚的に画像情報を獲得できない状況や状態に対して、テキストで画像情報を提供します。一方で、画像内の文字のコントラストを確保することは、主に見える状況や状態に対して、「画像をより見やすくする」対応です。
どちらも画像の情報をより多くの人に伝えるための対応ですが、それぞれ異なる状況・状態に対する改善方法のため、画像が文字を含む場合、代替テキストの設定に加え、文字のコントラストを確保する必要があります。

アイコンの画像が表示されないとユーザーに機能を伝えることができない場合は、代替テキストを用意しましょう。

検索エンジンのクローラーが画像に関する情報を得ることができるようになります。適切なキーワードを使用し、またページのコンテンツの内容に沿った役に立つ内容にすることによって、SEO上の評価が上がる可能性があります。

画像の代わりとなる代替テキストを適切に設定することで、ウェブサイトのパフォーマンスには、次のような影響があります。

画像の代わりとなる情報を伝えることができていれば、文章の短さは問題にはなりません。

AI を利用して代替テキストを作成しても構いませんが、AI が作成したテキストでは、意図していない情報となったり、情報が不足する可能性があります。各制作フェーズの担当者、ウェブサイトオーナーにあたる花王サイト担当においては、非テキストコンテンツ（画像や音声、映像）の代わりとなる情報となっているか、AI のみに依存せず、責任を持って確認するようにしてください。

ページの全体像をわかりやすく見せる、カテゴリーや機能をユーザーの観点にたって絞り込むなど、適切な情報設計が必要です。これらの課題を解決すると、障害がない人にとっても、わかりやすく理解しやすいものになります。

キャプションで提供する情報は、動画内の音声情報です。原則として、発話内容だけでなく、音で伝える情報の全てが対象となります。背景音や効果音といった発話以外の音が、動画の内容を理解するのに必要な情報を伝えている場合は、音に関する情報もキャプションに含めます。「この動画で一番伝えたい情報は何か？」を判断基準として、内容を検討してください。

また、キャプション作成時には、繰り返し出てくる表現の表記を統一するなど、キャプションの書き方ルールについても検討すると、より伝わりやすいものとなります。CM動画のキャプションはテレビ放送の字幕をYouTube用に編集しているため、テレビ放送の字幕ルールに則った内容になっています。

「アクセシビリティ対応チェックシート」を利用して申し送りをしてください。
「要確認」にチェックを入れ、該当箇所と懸念点を「要確認理由」へ記入して、次の工程へ必ず引き継いでください。

同じ画像であっても、前後の文脈やページにおける役割によって、適切な代替テキストが異なることもあるため、注意が必要です。
画像を利用している箇所ごとに「この画像を掲載する目的は何か？」を意識し、画像を認識できない状態でも、代替テキストを聞く（読む）ことで同じ体験を提供できるよう代替テキストを作成してください。