代替テキストで画像に説明書きを入れる

代替テキスト(だいたいてきすと)とは?


代替テキストとは、「自分が写っている証明写真の裏面に自分の名前を書く」と例えたらよいでしょうか。

ホームページの見た目には表示されませんが、お客様が見ている画像が何を表しているのか、説明するための枠がちゃんと用意されています。

なぜ代替テキストが必要なのか?
その説明は操作手順の後で。

操作手順

コンテンツを追加ボタンを押す

1. 編集画面の任意の場所で「コンテンツを追加」ボタンを押す。

写真または写真付き文章をクリック

 

2. 写真を追加するために「写真」または「写真付き文章」をクリックする。

 

※ここでは「写真」をクリックして以降説明します。

参照ボタンを押す

3. 画像を選ぶために「参照」ボタンを押す。

 

※ここではパソコンの中に保存された画像を選ぶ方法で紹介します。

アップロードするファイルの選択

4. アップロードするファイルの選択画面で使用する画像ファイルを選択して「開く」ボタンを押す。

代替テキストに写真の説明を入力して保存ボタンを押す

5. 代替テキスト欄に写真の説明を入力して「保存」ボタンを押す。

写真がアップされた

6. 写真がアップされたら完了。コンテンツの追加の「保存」ボタンを押す。

写真にマウスを合わせると代替テキストが表示される

操作完了後、プレビューで写真にマウスを合わせると代替テキストが表示されることを確認。

代替テキストの役割

 
ページのタイトルにも記載したとおり、代替テキストは写真の説明書きとなります。
これは、ホームページが画像表示されなかった場合の代わりに表示される、また音声読み上げ機能を用いてホームページを見ている人にはどのような画像が表示されているかを読み上げ説明してもらうための要素になります。
 
画像が見えていなくても何が写っているのかがわかるようにしておく必要があります。
 

おまけ操作(サブタイトル)

サブタイトルに入力して保存ボタンを押す

画像の追加で、文字を入力する場所がもう一つ。

サブタイトル」というのがあります。

 

画像を編集する画面でサブタイトルに画像の説明を入力して「保存」ボタンを押してみましょう。

写真の左下にサブタイトルが表示される

画像の左下に入力したサブタイトルが表示されます。