画像ボックス：代替テキストを設定する（alt）

代替テキスト（alt）とは

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

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

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

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

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

背景・罫線・飾りなど、内容を持たない装飾目的の画像は、代替テキストの代わりに[装飾として扱う]を選択します。aria-hiddenを設定する必要はありません。

注意：[装飾として扱う]を選択できるのはimgモードの画像のみです。

注意：[装飾として扱う]を選択すると、[代替テキスト]に入力済みの内容は削除されます。[テキストを設定]に戻しても、入力した内容は復元されません。

Point：[装飾として扱う]を選択すると、サイト診断の[画像の代替テキストが未設定]を解消できます。画像の役割によっては別の対処が必要です。詳しくはサイト診断で検知される項目と対処方法を参照してください。

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

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

リストアイテムの画像ボックスを選択します。
右パネルの[画像]タブを開きます。パネルが閉じている場合は開いてください。
[テキストを設定]を選択します。
[代替テキスト]の入力欄をクリックし、(1)で作成したテキストプロパティを選択します。
Tips：テキストプロパティと直接入力を組み合わせて代替テキストを設定することもできます。直接入力した内容は、全てのリストアイテムに共通して反映されます。
設定が完了すると、同一リスト内の全てのリストアイテムに反映されます。

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

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