こんにちは、ゆんつです。
ブログの記事には画像がつきものです。
「百聞は一見に如かず」の言葉通り、画像があることで文章だけの説明ではわかりにくかったものが劇的にわかりやすくなます。
文章+画像だと解りやすさが段違い！
僕も記事には良く画像を貼っています。
WordPressで記事に画像を貼る場合にお馴染みなのはこの「メディアを追加」という画面です。
「メディアを追加」画面の右側にある「添付ファイルの詳細」という項目で、画像の大きさを設定したり、キャプション（画像の下に表示される説明文）を入力したりします。
この添付ファイルの詳細の画面に「代替テキスト」という部分があります。
僕はつい最近まで、この部分を空白にしてブログを運営してきました。
でもこの部分。
とても重要なものなのです。
alt属性
WordPressの画像情報の「代替テキスト」の部分は、HTMLの観点で言うとalt属性と呼ばれる部分になります。
alt属性には貼り付けようとする画像の意味を端的に文章にしたものを入力するのですが、このalt属性には以下のような働きがあります。
alt属性の働き
・ 画像が表示されなかった場合に代替的に表示される
何らかの原因（回線が極端に遅い場合など）で画像が読み込まれなかった場合に、画像の代わりにalt属性に入力した文章が表示されます。
・読み上げ機能を使っていた場合、alt属性で設定した文章が読み上げられる
目の不自由な方が読み上げソフトを利用してブログを閲覧している場合に、画像にalt属性を設定していなければ、画像は読み上げられずにそのままスルーされてしまいます。
画像にalt属性を設定することにより、読み上げソフトがalt属性で画像に設定した文章を読み上げてくれ、目の不自由な方にも画像の意味が伝って記事の内容をイメージをするのに役立ちます。
・検索エンジンに画像の意味を伝えることが出来る
検索エンジンは画像の持つ意味を認識しません。
alt属性を設定することで検索エンジンが画像の意味を認識するようになるのです。
設定方法
画像貼り付け時に設定
ワードプレスで画像を貼り付けようとするとメディアライブラリが開くので、そこの「代替テキスト」欄に画像にふさわしい文章を入力すればよいだけです。
一番簡単にできるalt属性の設定方法だと思います。
既に貼り付けた画像に設定
ビジュアルエディタ画面で該当する画像を左クリックします。
するとエンピツのアイコンが現れるのでそれをクリック。
「画像詳細」という画面になるので、そこの代替テキスト欄に入力して「更新」ボタンをクリックすれば完了です。
画像タグを探して直接書きこむ方法
これは少し難しくなります。
テキストエディタ画面で該当する画像のimgタグを見つけ、そのimgタグの中にあるalt属性に
alt="画像に関連する文章"
という形式で入力する方法です。
alt属性に入力する内容
alt属性に入力する文章は簡潔でわかりやすいものが良いとされています。
例えば上の画像であれば「楽しそうに水遊びをする子供」など、短くてイメージが湧きやすいものにすると良いと思います。
詳細に説明しようとして極端な長文になると逆にわかりづらくなりますし、画像に関連するキーワードを,(コロン)で区切って何個も列挙するとスパムとみなされるようなので、そのような設定はやめておいた方が良いです。
全てに設定する必要はない
alt属性の設定は大事ですが、全てに設定する必要はありません。
例えば難しい内容の文章が続いた後に、閑話休題的な意味合いで文章の内容とは関係無いコーヒーカップの画像を挿入したとします。
でもこの画像は前後の文章とは関係ないのでaltを設定する必要はないと思います。
華やかさを出すために花の画像をワンポイントで挿入したりした時も同様です。
文章と画像が関連している場合に設定するのが良いでしょう。
altがちゃんと設定されているかをチェックする方法
chromeの場合。
ブラウザで記事を開き、該当する画像の上で右クリックします。
現れたメニューから「検証」をクリック。
すると開発者ツールというのが開いて、その画像の元になっているHTMLの内容が表示されるので、alt属性の部分を探してチェックすると、現在設定されているalt属性を確認することが出来ます。
FireFoxなら画像の上で右クリックして出たメニューで「要素の調査」をクリックすればChromeと同じように調べることが出来ます。
altを適切に設定して誰にでも優しいページを
というわけで、今日はalt属性の大切さについてみてきました。
大事なのは
- 文章と関連性のある画像にはalt属性を設定する
- alt属性の内容は簡潔に
という2点だと思います。
僕は長らく「画像は貼れていれば良い」としか思っていなかったので、代替テキストの部分を入力せずに記事を作り続けてしまいました。
alt属性の意味を知ってから作成する記事にはalt属性を設定していますし、ゆっくりではありますが出来る範囲内で過去記事の画像にもalt属性を付けていってます。
コツコツやってます
画像にalt属性を適切に設定して、どんな人が見ても楽しんでもらえるようなページにしたいですね。
それでは、またー。
コメント