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

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

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

代替テキスト(alt)とは

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

代替テキストの設定は、imgモードの画像ボックスのみに対して行うことができます。

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

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

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


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

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

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

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

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

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


リストアイテムの画像に代替テキストを設定する

上記と同様の方法でリストアイテム内の画像にaltを設定すると、全てのリストアイテムの画像に同じalt文言が登録されます。

リストアイテムの画像ごとに個別のaltを登録するには、以下の方法で行います。

代替テキストに使うalt文言を登録する

  1. リスト全体を選択します。

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

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

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

代替テキスト入力欄にalt文言を呼び出す

  1. リストアイテムを選択します。

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

  3. [代替テキスト]の入力欄をクリックし、[alt文言]のプロパティを選択します。

  4. リストアイテムごとのalt文言(テキストプロパティ)を代替テキストに登録できます。リストアイテムに共通する文言を直接入力して組み合わせることも可能です。

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


altのアクセシビリティ

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

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

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