WordPressの代替テキストとキャプション 違いと書き方

WordPressの代替テキストは、画像を見られない人に内容や役割を伝える文章です。キャプションは、画像の下に表示して補足を伝える文章です。

それぞれ必要な情報が違うので、同じ文章で両方の欄を埋める必要はありません。架空の写真の例で、書き分け方を見ていきます。

代替テキストは画像の代わりに内容を伝え、キャプションは画像に補足を添えます。WordPressの実画面ではなく、写真や文例も説明用の架空のものです。

代替テキストは、画像の代わりになる言葉

代替テキストは「altテキスト」と呼ばれることもあります。

目が見えにくい方が画面読み上げ機能を使うときなどに、画像が何を伝えているかを知る手がかりになります。

画像が表示されなかった場合にも、内容を補う役割があります。

たとえば、次のような相談スペースの写真があるとします。以下はソラハの設備やサービスではなく、書き方を示す架空の例です。

「白い壁と木のテーブルがある、4席の相談スペース」

「店内写真」「image123.jpg」だけでは、写真から伝えたい内容が分かりません。

反対に、検索されたい言葉を何度も詰め込む必要もありません。その場所で画像が伝えていることを、短く具体的に書きます。

飾りの画像にも、必ず書くの？

いいえ。内容を伝えるためではなく、ページを飾るためだけの画像なら、代替テキストは空欄にします。

たとえば、見出しの横に置いた小さな葉の模様や、文章を区切るためだけの飾りです。

空欄にすることで、画面読み上げ機能が不要な説明を読み上げるのを避けられます。

営業時間や料金などの情報を画像だけで伝えている場合は、飾りではありません。大切な内容は本文にも書き、代替テキストは画像の役割に合わせて考えます。

また、押すと別のページに進む画像も、飾りとは限りません。画像だけがリンクになっているロゴなら「○○店のホームページ」のように、行き先が伝わる言葉にします。同じリンクの中に行き先を示す文字もある場合は、画像の代替テキストを空欄にして重複を避けることがあります。

キャプションは、見えている画像への補足

キャプションは、通常、画像のすぐ下に表示されます。

撮影した場所、写真の時期、商品の注意事項など、画像を見ただけでは分からない補足を読者へ伝えたいときに使います。

先ほどの架空の相談スペースなら、次のようなキャプションが考えられます。

「初回相談に使うスペースです。写真は模様替え後の様子です。」

写真を見れば分かる色や形を、そのまま繰り返す必要はありません。

補足がなければ、キャプションは付けなくても大丈夫です。

同じ画像でも、文章は使う場所で変わる

代替テキストは、画像ファイルだけを見て決めるものではありません。

同じ花の写真でも、お店の雰囲気を伝える写真なら「入口に飾られた白い季節の花」、商品として紹介する写真なら「白いバラとユーカリの花束」のように、そのページでの役割に合わせます。

すぐ近くの本文ですでに同じ内容を伝えている場合は、説明を重ねすぎないことも大切です。

多くの場合、「画像です」「写真です」と付け足す必要はありません。写真かイラストかの違いが内容に関わるときは、その違いを伝えます。

画像の中に文字を入れたら、それだけで伝わる？

画像に書かれた文字は、すべての人が同じように読めるとは限りません。

キャンペーン期間、料金、申し込み条件などの大切な情報は、画像だけにせず、ページの本文にも書いてください。

代替テキストへ長い案内をすべて詰め込むより、本文で読みやすく伝える方が、内容の修正もしやすくなります。

WordPressで、今のページの画像に入力する

ブロックエディターでは、次の順番で1枚ずつ設定できます。変更前の文章があれば、メモなどに控えておきましょう。

1．記事内の画像をクリックする

2．右側のブロック設定を開き、「代替テキスト」の欄を探して入力する

3．キャプションも必要なら、画像のツールバーにある追加ボタンを選び、画像の下へ入力する

4．更新前にプレビューで、キャプションの表示と本文のつながりを確認する

設定が見えない場合は、画面右上の設定ボタンも確認してください。名前や位置はバージョンで異なり、「装飾としてマーク」などの項目がある場合もあります。装飾の指定は、意味や操作の役割がない画像だけに使います。

画像ブロックで変えた代替テキストは、その記事やページの画像に適用されます。メディアライブラリで入れる代替テキストは、別の場所へ新しく挿入するときの初期値です。すでに掲載した画像を直すなら、そのページ内の画像も確認しましょう。

直した文章を戻したいときは、変更直後に画面上部の「元に戻す」を使えます。プレビューで見た目が変わらなくても、代替テキストは通常の本文として表示されないため、入力欄でも確認してください。

迷ったら、画像の役割と補足を分けて考える

画像が伝える内容やリンクの役割には代替テキスト、読者への追加説明にはキャプションを使います。必要なら両方を付けます。

代替テキストとキャプションは別々に判断し、必要なら両方を使います。

まとめ

・代替テキストは、画像の内容や役割を伝える

・飾りだけの画像では、代替テキストを空欄にする

・キャプションは、画像の下で読者に補足を伝える

・大切な日時や料金は、画像だけでなく本文にも書く

まずは、サービス紹介に使っている画像を一枚だけ開き、画像を見られなくても内容が伝わるか確認してみてください。

画像に何を書くか、どこで設定するか迷う場合は、対象ページのURLと画像を添えて、ココナラ内のメッセージからご相談ください🌿

画像や画面を送る際は、パスワードやお客さまの個人情報が写らないようにしてください。