WordPress 4.7の画像alt属性はcaptionやfile名の代わりでなく画像に必要な説明を入れる

WordPress 4.7で新しく挿入する画像は、alt textを入力しなければ、captionや画像titleをalt属性へ自動で入れません。画像に説明が必要なら、メディアライブラリのalt textへ、その画像が伝える内容を書きます。説明がなくても意味が通る飾り画像なら、空のalt属性を残します。file名やcaptionを埋めるだけでは、読者が画像から得る情報を正しく伝えられません。

alt属性は、画像を見られない状況で、その画像が何を伝えるかを補うためのものです。画面読み上げを使う人、画像を表示しない環境、通信が不安定で画像を読み込めない場面では、画像そのものではなくalt textが手がかりになります。検索用の語句を並べる欄ではありません。本文にない意味を画像が補っているなら、その意味を短く書きます。

alt text、caption、file名は役割が違う

一つの画像には、file名、title、alt text、captionが並びます。どれも画像に関する文字ですが、使う場所と読む人が違います。WordPress 4.7より前は、alt textが空の画像へ、captionか画像titleを代わりに入れる動作がありました。4.7ではこの代用がなくなりました。意図しないfile名や、本文のcaptionと同じ文を読み上げるのを避けるためです。

たとえば、施工手順を説明する記事に、配線の接続位置を示す写真を置く場合を考えます。captionに「接続前の配線」と書くだけでは、どの配線をどう見るべきかが分からないかもしれません。画像が本文で説明した「赤い線を端子Aへつなぐ位置」を示しているなら、alt textにはその図としての役割を伝えます。一方、captionには撮影時点、手順の段階、注意点など、本文を読む人へ追加する情報を置けます。二つは同じ文にする必要がありません。

逆に、記事の区切りを整えるためだけの線、同じ内容を繰り返す装飾写真、見出しの背景に入れた模様は、alt textで説明しない方がよい場合があります。画像を読まなくても本文の意味が変わらないなら、空のalt属性が、読み上げる人へ不要な情報を渡さない働きをします。「画像だから説明を書く」と決めるのでなく、その画像が本文で果たす役割から決めます。

file名を読ませないためにalt textを先に入れる

WordPress 4.7では、alt textが明示されていない新しい画像に、空のalt属性が出力されます。以前のように、画像titleやcaptionから自動で値を補わないためです。file名を元にしたtitleがそのまま読まれることや、captionを二度読むことを避けられます。

この変更を、画像へ何も書かなくてよくなったという意味に取りません。画像が重要な情報を持つなら、投稿へ挿入する前にalt textを入れます。たとえば商品写真なら、商品名だけでなく、本文で説明している色、形、比較対象を必要な範囲で書きます。グラフなら、画像にしかない増減や比較の結論を、本文かalt textのどちらで伝えるかを決めます。表の画像だけを置き、数値をどこにも書かない状態は避けます。

説明用の仮例として、service-banner-final-03.jpgというfileを使う場合を考えます。これは作業用には見分けやすくても、読者へ内容を伝える言葉ではありません。画像が「平日9時から17時まで受付」と知らせるbannerなら、alt textにはその案内を入れます。本文にも同じ営業時間があるなら、画像は飾りとして空のalt属性にし、本文だけを読めば内容が分かるようにする方法もあります。どちらを選ぶかは、画像が本文にない情報を持つかで決まります。

既存記事を急いで書き換えず新しい画像から確認する

WordPressの公式案内では、この変更は4.7へ更新したあとに新しく公開するcontentへ適用され、すでに公開したcontentには影響しないとされています。そのため、更新直後に過去記事の全画像を一斉に置き換える必要はありません。まず、これからuploadする画像と、更新する重要pageから確認します。

過去記事を見直すときも、file名が残っている画像を一括でalt textへ移すのは避けます。file名は撮影日、連番、制作途中の名称を含むことがあります。captionをそのままコピーしても、画面読み上げでは同じ説明が続く場合があります。画像ごとに、本文にない意味があるか、captionと違う説明が必要か、装飾かを確認します。

見直す優先順位は、次のように決められます。

1. 問い合わせ、サービス、商品など、読者が判断に使うpageを選ぶ。
2. 画像を一枚ずつ見て、本文にない情報を伝えるものと飾りを分ける。
3. 情報を伝える画像だけに、本文と矛盾しないalt textを入れる。
4. captionがalt textと同じ内容を繰り返していないか確認する。
5. 公開pageを開き、画像が出る位置と前後の本文を読む。

ここで、alt textだけを担当者へ任せ、本文やcaptionの更新を別の人が行うと、説明が食い違うことがあります。文章を決める人は、画像が何を伝えるかを確認します。WordPressへ入力する人は、どの画像のどの項目を変えたかを残します。テーマを修正する人は、挿入した画像のalt属性を消したり、別の値で上書きしたりしていないかを確認します。入力、本文、出力を一組で確認します。

挿入後は管理画面だけで判断しない

メディアライブラリでalt textを入れても、投稿本文へすでに挿入した画像や、themeが独自に出力する画像へ同じ値が反映されるとは限りません。重要なpageは公開画面で開き、画像の前後にあるcaption、見出し、本文の関係を確認します。themeが画像をbackgroundとして出している場合は、img要素のalt属性とは別の設計が必要になります。

外部の制作会社へ修正を頼む場合は、「画像のSEOを直す」とだけ依頼しません。対象page、対象画像、画像が補う内容、captionの扱い、themeの出力、確認する公開URLを渡します。alt textを入れる作業はできますが、画像が何を説明すべきかは、サービス内容や記事の意味を知る人が決める必要があります。作業を頼むことと、説明内容の責任を渡すことは別です。

最初の一手は、新しくuploadする画像を一枚選び、本文を読まずにその画像だけで伝える必要がある内容を書き出すことです。その内容が不要なら空のalt属性にし、必要ならメディアライブラリのalt textへ入れます。