Safariのalt属性

質問

img要素のalt属性で質問があります。
今windows環境のSafari3.1で確認済みなのですが、ある一定のwidthとheightを指定してやらなければsafariの場合は画像オフ(リンク切れ)の場合にalt属性が見えません。
ですが、さすがにフォントサイズと画像の大きさにによってはwidthやheightが対応できません。

これを常に見えるようにコントロールする方法はないでしょうか？
できるだけコントロールするほうが好ましいですが、safariでのアクセシビリティを上げるためにできそうなことでもかまいません。

回答No.4

神崎 渉瑠（@taloo）

逆にwidthやheightを指定しない、というのはいかがでしょうか？
widthやheightは記述が推奨される属性だとは思いますが、
書かなければ、メジャーなブラウザでFirefoxと同じような表示になると思います。
（結構前に検証した記憶なので、今では違ってるかも。
メジャーなブラウザの中にiCab、Omniweb、Netfrontは含まれません。）

IEのobjectはclassidをちゃんと指定してやらないと、paddingがかなり大きく取られて、コンテンツが思うとおり表示できないと思います。

Firefoxの独特の表示方法により、<span>と同じ見た目になりますが、
alt属性はあくまで属性ですから、マウスで選択できなくて正解じゃないかと思います。

お礼

私もできるだけwidthやheightは指定したくないですね。
ただ、何も指定しないとやっぱり見えなくて(汗
今自分の中で一番有力なのはmin-heightとmin-widthをem指定するというものなんですが、これも画像が表示されている状況ではどうしようもなくなりますし。

objectに関してはいろいろと考えてはみたんですが、safariは画像が表示されないときでも代替要素を表示しないようで、imgよりも酷い状況になってしまいました。

補足

なかなか難しいようですのでこのあたりでいったん締め切ろうと思います。
ありがとうございました。

回答No.3

himajin100000

追記:
意外とobject要素使えるかもしれない。

https://bugzilla.mozilla.org/show_bug.cgi?id=12460
上はMinefield Trunkの話だが,Opera,Safariでもalt属性によって表示される文字列は選択できなかった。

回答No.2

himajin100000

object要素を使ってみる。

#IE6で問題出たような気がするけど,手元の環境はIE 8になっているので
VPC使うのも面倒くさいし,検証は断念。

お礼

実はobjectのほうはもっと深刻で、imgの場合は横幅は文字数ぐらい確保されるのですが、objectはまるで代替要素がないかのように表示されます。
objectの代替要素としてaltを入れたimgでieには対応できるのですが、結局imgの問題に戻ってしまいますし。

回答No.1

steel_gray

どれも、いまひとつですが思い付いたことを。。

CSSでimgの文字サイズを指定する。
img{font-size:xx-small;}
代替テキストの文字サイズを小さめに設定しておくことで「なるべく」表示されるようにする。（これは既にやってるのかな？）

title属性も付けて置く。
マウスオーバでバルーン表示してくれるのでないよりマシかも。

Javascriptでロードされていないimgのwidthやheightを再設定する。
（うまく代替テキストが収まる大きさを導き出すのは結構難しいかもしれない）

お礼

回答ありがとうございます。

javascriptが一番何かできそうですよね・・・。(Javascriptはまだまだ勉強中でよくわからないんですが)
titleとaltを別にしないといけない状況がある可能性を想定するとtitleは難しいですね。