WordPressなどで画像を挿入する際にタイトル、キャプション、代替、説明が入力できます。
この4つは似たような意味合いの項目ですが、それぞれ異なった役割を持っています。
今回はこれらの項目の違いについて、調べたことをまとめてみようと思います。
タイトル
1段目のタイトルには画像の補助的な説明を記述します。
記述した説明は画像imgタグのtitle属性に反映されます。※1
title属性はウェブペー上のツールチップとして使われ、画像の上にマウスカーソルを置くことで表示することができます。
試しに上の画像の上にマウスカーソルをおいてみてください。
上の画像では「北海道美瑛町の青い池」と設定してあります。
ソースコードを見てみると次のように記述されています。
<img src="https://sekisuiseien.com/wp-content/uploads/2015/08/Lake-Snow-Blue-Pond-Mac-Os-.jpg" title="北海道美瑛町の青い池" alt="mac 青い池 壁紙 北海道" width="1920" height="1200" class="alignnone size-full wp-image-6735 colorbox-6961">
※1またWordPressバージョン4.2以降はaタグとimgタグのtitle属性は廃止されているためか、タイトルを設定してもHTMLに反映されないようになっています。
Why Was The Link Title Field Removed?
Link title provides a title for the link that could be different from the anchor text of a link. It provides users a chance to see the title of the document linked. Some users believed that it has accessibility benefits, but actually many screen readers cannot read title attribute in links by default. Link title popup cannot be seen by users on mobile and other handheld devices. These popups are also not visible to users who only use keyboard.
「リンクや画像のタイトル属性は一部のユーザーにおいてアクセシビリティの利点を受けますが、多くの音声読上げソフトではtitle属性は読み上げられません。またモバイルデバイスやキーボードしか用いないデバイスでも同様にtitle属性が表示できないため削除します。」ということだと思います。
ウェブトラフィックの相当数をモバイル端末が占める昨今のインターネットにおいて、一部のユーザーしか表示できない画像のtitle属性は非効率的だという判断のようです。
元々画像のtitle属性はalt属性よりも重要視されていなかったため、モバイルが普及し始めた昨今では、今まで以上にタイトル属性の必要性が薄れてきているのも事実のようです。
キャプション
2段目のキャプションには画像の下に表示する内容を記述します。
これはWordPress独自に設けられた設定項目になります。
ソースコードを見てみると次のように記述されています。
<a href="https://sekisuiseien.com/wp-content/uploads/2015/03/IMG_1788p2.jpg" class="cboxElement"><img src="https://sekisuiseien.com/wp-content/uploads/2015/03/IMG_1788p2-1024x768.jpg" alt="この画像はキャプションを説明するためのサンプル画像になります。" width="700" height="525" class="size-large wp-image-6222 colorbox-6961"></a> <figcaption class="wp-caption-text">お気に入りの世界地図です。</figcaption>
代替
代替は画像が表示できない場合に表示される、画像の代わりとして記事を補うテキストとして使われます。
HTML4では画像に関する短い説明を記述するという仕様でしたが、HTML5からは画像の代わりにaltで置き換えた際にも前後の意味が損なわれない代替テキストを設定する。
という様に、alt属性の仕様に変化が見られます。
HTML5: img 要素の alt 属性 の仕様 | attosoft.info
これは近年重要視され始めたWebアクセシビリティの向上を図ったものかと思われます。
例えば、高齢者や障害者の方々が音声読上げ機能を使われる際に、代替テキストが短い説明よりも文脈の繋がる少し長めの説明のほうが自然に読むことができますよね。
上のサンプル画像のalt属性には“この画像は代替テキストを設定したサンプル画像になります。”と記述してみました。
ソースコードを見てみると次のように記述されています。
<img src="https://sekisuiseien.com/wp-content/uploads/2014/06/giant_escape_air.jpg" alt="この画像は代替テキストを設定したサンプル画像になります。" width="2048" height="1536" class="alignnone size-full wp-image-6016 colorbox-6961">
またalt属性はSEO的にも効果があるとされているため、可能であれば設定することが推奨されています。
説明
説明は画像のメモ・コメントとして扱われ、HTMLに書きだされることはありません。
完全に管理者用の項目になります。
上の画像には説明として“過去記事にて掲載”と記述してみましたが、ソースコードを見てみるとalt属性のみで説明に関する記述がHTMLに出力されていないことが確認できます。
<img src="https://sekisuiseien.com/wp-content/uploads/2014/04/IMG_05401.jpg" alt="説明を記述したサンプル画像です。" width="3264" height="2448" class="alignnone size-full wp-image-4046 colorbox-6961">
WordPressでは代替のみの記述で十分
これらのことかWordPressの場合に至っては、代替の項目のみ記述すれば十分であることが分かります。
あとは必要に応じて画像にキャプションを設定する感じで使っていけば問題無いと思います。
また最新のWordPressの場合には、画像のアップロード時にファイル名が自動的にタイトルに設定されます。
そして代替の記述がない場合には、タイトルが代替の代わりにalt属性に挿入されるようになっているようです。(WordPress v4.3にて確認)
結果的に何もしなくてもファイル名が自動的にalt属性に挿入されるようなっていますが、記事の文脈等を配慮するためにも、画像アップロード時に個別に代替テキストを設定することが大切かと思います。
参考にしていただければ幸いです。