ブログから情報を機械的に整理してリストアップするページをチラっと眺めてギョッとした。
昔高崎駅を利用していて、現在は転居してしまった方！高崎駅東口が生まれ変わりましたよ、マジでshine。
なにこのツンデレブロガー！「生まれ変わりましたよ、マジでshine。」ってサラリと書いていることに興味を持って、実際にこのページを開いて見ました。そしたら、こんなだった。
は？ ( ﾟдﾟ)!
「マジでshine」の部分が「マジで
」に。あれれ、意外にも「しね」と訴えているわけじゃなかった。
昔高崎駅を利用していて、
現在は転居してしまった方！
高崎駅東口が生まれ変わりましたよ、マジで
一般的なウェブブラウザを使っているならば、上記に於いて
- 本文ごと画像化している例示部分
- 文字と絵文字で表現した例示部分
これがそれぞれほぼ同じに表示されているはずです。サイズやフォント等は別として。ところがこの絵文字、キラキラした様子なので、そんな感じをalt属性として名づけられていました。英語で。
ソースコードを見ると
高崎駅東口が生まれ変わりましたよ、マジで<img src=”http://emojies.cocolog-nifty.com/emoticon/shine.gif” alt=”shine” />。
<img>タグのalt属性って、何なん？
ウェブを作る上で、文字の他に画像を使うのはごく一般的です。その画像に対し、画像を開かない設定や、そもそも画像が認識できない音声ブラウザなどに対応するために、alt属性でその画像がなんなのかということをコトバで指示します。画像に対する代替文字列です。
そうすることで、見出しを画像化したり、絵文字を使ったりしても、文字として認識され、意味を持たせることが可能になります。画像が表示できない環境でも意味が通じなくなることを防止できるわけです。
<img src=”画像のURL” alt=”代替文字列” />
ところが、そのalt属性の指示の仕方によって、偶然にも酷い具合になることがあるので注意が必要です。
それで、alt属性が何だっつーわけよ？
もう一度、先の例に挙げたHTMLソースを見てみましょう。
高崎駅東口が生まれ変わりましたよ、マジで<img src=”http://emojies.cocolog-nifty.com/emoticon/shine.gif” alt=”shine” />。
こうなってるだけなのです。絵文字「」が表示できない環境では、絵文字の代替文字列として「shine」というコトバとして認識できるようセットされています。「マジでshine」……英語「shine（シャイン）」が、ニッポン語ローマ字表記として読むと「しね」になるのも偶然だけれども、英語表記のalt属性を持つ絵文字が、前後の文字の配置によってこんな酷いことになるわけです。
- このブロガーは、ブログサービスに付随する絵文字機能を使っただけで、alt属性（代替文字列指定）には何も気にかけておられないことでしょう
- この絵文字に指示されていた代替文字列が「shine」で、その意味は「シャイン（日本語では輝き）」
- 英語「shine（シャイン）」をニッポン語・ローマ字表記として読むと「しね」
- 画像を敢えて理解せず、alt属性によって代替文字列を表示する仕様において機械的に情報を整理するリストに掲載された
- ニッポン語「マジで」に続けて表示されたことで「マジでshine」になる
どこにも罪は無く、たまたまいろいろな偶然が重なってそうなっただけなのは明白なんだけど……そのたまたまがずいぶんと酷いことになってたなぁ。
ウェブが一般化した当初から「<img>タグにはalt属性を必ず付けよ」というのが鉄則ではあるのだけれども、ただ付けりゃいいってものではないのだ、というお手本になってしまったようです。
傾向と対策？
絵文字って、心情を伝える補助記号として、ニッポンではメールやブログにて多用する傾向があります。なので、文に混ぜて使った時に意味が通じなくならないよう、alt属性（代替文字列指定）について考えた方が良さそうです。場合によっては、alt属性をカラにして、画像を表示しないブラウザではその絵文字が無かったことにする、くらいな解釈でもいいんじゃないかと思います。
また、altを敢えて「☆」「✨」などの記号にしておくのもよさそうですね。
この度、たまたま例に登場してもらったページに敬意を表して、リンクしておきます。
【リンク】BOOひらこのバタバタ突進生活記、ekinavi駅密着型情報ポータルサイト
