*

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

公開日: : ノウハウ

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上げブラウザで何の画像か説明してもらう為に必要な属性です。

しかしその ALT 属性、画像検索で優位になったり画像が表示されない時の代替テキストとして大事である事はわかっているのですが、いかんせん書くのが面倒くさいのです。ALT 属性を入力していなくても画像表示には何も支障がありません。パソコンでもスマホでもしっかり画像を表示してくれます。

何故面倒なのか?それは ALT 属性を入力してもそれが実際に役立っているのかわかりにくいからだと思います。もちろん実際には影で画像が表示されない時や音声読み上げブラウザで役に立っているという事は別として、他に役立っている事があるのか不明瞭です。例えば、画像の ALT 属性が実際に画像の説明として画面に表示されるのであれば ALT 属性を入力するのも面倒ではなくなると思うのです。

そこで現在の技術で ALT 属性を画面に表示する事ができるのか調べてみました。

ALT属性を画面に表示する事はできるか?

css には content プロパティというものがあります。これは、要素の直前か直後に文字や画像を挿入することができるものです。挿入できるものは文字、画像の他、URL、番号、属性を挿入する事ができます。これで何かできそうな気がしました。

img:after{
	content: attr(alt);
}

こんな CSS を書いてみました。img タグの直後に alt 属性を挿入するという事になります。これで一見行けそうな気がします。下記がサンプルです。

サンプル

できませんでした!

そもそも、CSS の仕様上このような書き方は無効になってしまいます。「:after/:befor」の疑似要素は、その要素内の直前・直後に挿入されるものです。

<div>(before)テスト(after)</div>

上を例に見て頂ければ、before 疑似要素では div 内の文字列の直前、after 疑似要素では div 内の文字列の直後に挿入されます。つまり、開始タグと終了タグがあるタグでのみ有効です。それを踏まえて img タグはどうでしょうか。

img タグは空要素です。

img タグには </img> というような終了タグがありません。空要素には何も含める事ができません。つまり、img タグには after/before 疑似要素は無効である事がわかります。

outside疑似要素

CSS3 の草案段階で outside 疑似要素というものがありますが実装されてはいません。outside 疑似要素では要素の外側にコンテンツを表示するもので、これが使えるようになれば画像の ALT 属性を表示できるかもしれません。しかし、現段階では不可能です。

  • Pocket

おすすめトピックス

関連記事

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

名古屋久屋大通(丸の内)の「Cafe One」で居心地良い空間でおうちごはんランチ

名古屋観光で名古屋テレビ塔と久屋大通公園を見に行った際にランチ

豊田合成リンク
名古屋栄の豊田合成リンクで氷じゃないスケートリンクで滑ってきた感想

名古屋市の栄に氷じゃないスケートリンクがあるという話を連れに聞

→もっと見る