お問合せ先 無料見積もり

APRICOT DESIGN BLOG

【ウェブアクセシビリティ】正しいalt属性の設定を学ぼう!

UPDATE : 2020.06.05

CATEGORY : Sasayama Sayaka

さやさんです。

ホームページを制作する時はもちろん、皆さんがブログを書く時などに画像の設定をすることは多いと思います。
その時、画像に設定する「alt属性」を正しく設定できていますか?


alt属性とは


alt属性とは代替テキストのことで、画像が表示されない場合に表示されるテキストです。
また、視覚障がい者の方がスクリーンリーダーや音声ブラウザを利用した際の読み上げにも利用されます。

クローラー(インターネット上のwebページを巡回して情報収集するプログラム)は
代替テキストで画像の内容を理解して検索結果等に反映させるので、alt属性を設定することでSEO効果も期待することが出来ます。
ぜひ画像を設置する場合は正しいalt属性も一緒に設定しましょう。


正しいalt属性の設定とは


alt属性は「代替テキスト」なので、当然画像に関係するテキストを設定すべきですよね。
しかし正しいalt属性の記述法を知らないと、画像に関係するテキストを設定したつもりで間違った設定をしてしまう可能性があります。


どちらの代替テキストが適切? 左のバナー画像「やっぱり炊き立てが一番」 右のバナー画像「ねこねこお米屋のホームページはこちら」 皆さんは上のバナーに設定するべきalt属性はどちらだと思いますか?

画像の中で一番文字が大きい「やっぱり炊き立てが一番。」というテキストを設定したくなりますよね。

しかし、よく考えてください。

画像が表示されなかったときに代わりに表示されるテキストが「やっぱり炊き立てが一番。」だった場合、
果たしてそれが何を示しているのかわかりませんよね。

そうなると正解は……
正しいalt属性は画像の目的や意味が記述されている右のバナー画像「ねこねこお米屋のホームページはこちら」 alt属性には画像の目的や意味が理解できるテキストを設定しましょう。


間違ったalt属性の設定として、多数のキーワードを詰め込んでしまう場合があります。
SEOを意識しすぎてしまうとこのような設定にしてしまう場合がありますが、
alt属性は画像の目的や意味を説明する文章を設定するべきです。
キーワードを設定するのは間違い alt属性の本来の役割を無視して多くのキーワードを詰め込んだ場合、
検索結果を不正操作するスパム判定されてしまう可能性もありますのでやめましょう。


最後にもう一つ、alt属性の設定で悩んでしまう画像を紹介しましょう。

画像が装飾目的の場合、画像そのものは意味を持ちません。
そのような画像の場合はalt属性の値は空にします。
装飾目的の画像の場合、値は空でよい 迷いやすい例として、上記のような画像もページの装飾を目的として設置されているものなのでalt属性の値は空で問題ありません。
(記事の内容に対するイメージ画像は画像そのものに意味は無いのでalt属性は空にします)


さいごに


alt属性はウェブアクセシビリティの観点から大切なものです。
正しいalt属性を知り、適切に設定しましょう!

  • ウェブアクセシビリティ

営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

[長野オフィス-本社-]
〒381-2246
長野県長野市丹波島1-805

[東京ブランチ]
〒100-0004
東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

[松本ブランチ]
〒390-0851
長野県松本市大字島内4619-3 QuintetDoor 1階南室

[金沢ベース]
〒920-0831
石川県金沢市東山1丁目10-1 103

記事が気に入ったら「いいね」してね。(SNSとは連動してません)

8+

この記事を書いた人Who wrote this blog

Sasayama Sayaka

向上心ハンパない、ワクワク系WEBエンジニア。写真を撮るのは苦手笑

無料見積

まずは無料でお見積もりを作成いたします。
お気軽にお問い合わせください。

無料見積もり

お問合せ先

クリックで
事務所一覧が
開きます

tel.0120-622835

営業時間/9:00〜18:00 
定休日/土日祝日

Copyright © 2020 APRICOT DESIGN All Rights Reserved.