メインコンテンツにスキップ

画像ボックス:代替テキストを設定する(alt)

imgモードの画像ボックスに代替テキストを設定する方法を説明します。SEOの観点からも、この情報を設定することは非常に重要です。リストアイテム内の画像ごとに異なるalt設定をする方法も解説します。

代替テキスト(alt)とは

代替テキスト(alt)は、画像の内容をウェブクローラーやサイトの読み上げ機能に伝える重要な情報です。SEOの観点からも、この情報を設定することは非常に重要です。


画像ボックスに代替テキストを設定する

注意:代替テキストの設定ができるのはimgモードの画像のみです。

  1. 設定したい画像を選択します。

    選択した画像がBoxモードだった場合には、Imgモードへ切り替えてください。

  2. 右パネルで[画像]タブを選択します。

    パネルが閉じている場合は、右パネルを開いてください。

  3. [代替テキスト]フィールドにaltを入力します。

Point:画像ボックスのBoxモードとImgモード

画像ボックスには「Boxモード」と「Imgモード」があり、モードによって画像の扱い方や設定可能な機能が異なります。

各モードの詳細や操作方法は、画像ボックス:BoxモードとImgモードのページを参照してください。


静的リストの画像に代替テキストを設定する

リスト内の画像にアイテムごとの代替テキストを設定する場合は、テキストプロパティを作成して紐付け設定をします。

通常の画像ボックスのように、代替テキストの入力欄に直接テキストを入力すると、リストアイテム内のすべての画像に同じ代替テキストが登録されてしまいます。

(1) 代替テキスト用のテキストプロパティを作成する

  1. 表の右上の[+]をクリックし、[テキスト]プロパティを追加します。

  2. 代替テキストとして設定したい文言を入力します。プロパティ名を「テキスト」から「代替テキスト」などに変更すると管理しやすくなります。

(2) 登録したプロパティを代替テキストとして設定する

  1. リストアイテムの画像ボックスを選択します。

  2. 右パネルの[画像]タブを開きます。パネルが閉じている場合は開いてください。

  3. [代替テキスト]の入力欄をクリックし、(1)で作成したテキストプロパティを選択します。

    Tips:テキストプロパティと直接入力を組み合わせて代替テキストを設定することもできます。直接入力した内容は、全てのリストアイテムに共通して反映されます。

  4. 設定が完了すると、同一リスト内の全てのリストアイテムに反映されます。


altのアクセシビリティ

アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。

関連タグ:代替テキスト SEO アクセシビリティ

こちらの回答で解決しましたか?