スタッフのつぶやき

そのalt属性、いらないかも!?

  • このエントリーをはてなブックマークに追加

こんにちは、ワタナベです!

ようやく夏らしい気温になってきましたね。暑すぎます…(´;ω;`)

 

今回は、alt属性について。

alt属性とは?

alt属性(オルト属性)とはWebブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるものです。

また、スクリーンリーダーや音声ブラウザでの読み上げの際にも、画像部分ではalt属性で設定した代替テキストが読み上げられるようになります。

引用:alt属性(オルト属性)とは?代替テキストの書き方と考え方-SEOにも効果的なWebアクセシビリティ入門編-

 

色々見ていたら、気になる記事を見つけました。

「お前らはまだ img タグの alt 属性の付け方を間違っている」…!?

見てみるとなるほど。

自分はいつもページ内にあるすべての画像のaltを埋めています。
しかし、この記事を読むとaltを付けなくてよい画像にまでaltを付けてしまっています…!

たしかに、アイコンボタンなどは悩みに悩んでボタン横のテキストと同じテキストを入れる場合が多いです…(;´Д`)
これは2重説明になってしまう模様。この場合altは空でOK。

写真のaltも文章でもうその写真について書いてあるのなら空文字で全然良いとのこと。
その画像にaltがないと文章が成り立たない場合は入れる必要があるようです。

上記の記事はグーグルの社員の方がalt属性の使い方を紹介した記事のようです。
こちらにも「なんでもかんでもalt属性をがんばって入れる必要はない。」とありました。

背景や装飾などにも今まではaltを入れていましたが、これらも不要なようです…!やっぱりいらないんじゃん!
ただし、「alt=””」と指定しておく必要はあります。

 

下記記事では、An alt Decision Tree (「alt属性決定木」)の翻訳が紹介されています。

altに迷いたくないときはcssのbackgroundで画像を表示させるという暴挙によく出ていましたが(笑)、これを機にaltの設定を見直したいと思います…(/・ω・)/!

 

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ