img要素のalt属性で質問があります。
今windows環境のSafari3.1で確認済みなのですが、ある一定のwidthとheightを指定してやらなければsafariの場合は画像オフ(リンク切れ)の場合にalt属性が見えません。
ですが、さすがにフォントサイズと画像の大きさにによってはwidthやheightが対応できません。
これを常に見えるようにコントロールする方法はないでしょうか?
できるだけコントロールするほうが好ましいですが、safariでのアクセシビリティを上げるためにできそうなことでもかまいません。
No.1ベストアンサー
- 回答日時:
どれも、いまひとつですが思い付いたことを。
。CSSでimgの文字サイズを指定する。
img{font-size:xx-small;}
代替テキストの文字サイズを小さめに設定しておくことで「なるべく」表示されるようにする。(これは既にやってるのかな?)
title属性も付けて置く。
マウスオーバでバルーン表示してくれるのでないよりマシかも。
Javascriptでロードされていないimgのwidthやheightを再設定する。
(うまく代替テキストが収まる大きさを導き出すのは結構難しいかもしれない)
回答ありがとうございます。
javascriptが一番何かできそうですよね・・・。(Javascriptはまだまだ勉強中でよくわからないんですが)
titleとaltを別にしないといけない状況がある可能性を想定するとtitleは難しいですね。
No.4
- 回答日時:
逆に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
- 回答日時:
追記:
意外とobject要素使えるかもしれない。
https://bugzilla.mozilla.org/show_bug.cgi?id=12460
上はMinefield Trunkの話だが,Opera,Safariでもalt属性によって表示される文字列は選択できなかった。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景が透明なリンクボタンで、...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
HTMLにQRコードを挿入する方法
-
pngやjsの後ろの英数字の意味は...
-
拡張子無しで画像を表示したいです
-
クリッカブルマップでリンクを...
-
HTMLでアイコン表示?
-
HTML上の画像を結合する方法が...
-
Movable Type で画像を複数アッ...
-
form以外でのpostってできますか?
-
gooからHOOPS!に移行してきたも...
-
CSSなどでHTML全体の表示を拡大...
-
正規表現でリンクタグを削除す...
-
画像クリックでクリップボード...
-
ぷらうざの中止ボタンに相当す...
-
リンクバナーのHTMLタグ。画像...
-
スライダーの外枠に曲線を用い...
-
バナーのURLについて
-
IE11にてonclickの動作不良
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
期間ごとに画像表示を切り替え...
-
フォルダ内の画像をウェブでラ...
-
pngやjsの後ろの英数字の意味は...
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
リンク先にしているページを小...
-
画像クリックでクリップボード...
-
IE11にてonclickの動作不良
-
[twip]から[pixel]への変換
-
HTMLだけで画像をクリックして...
-
アルバムをめくるように、画像...
おすすめ情報