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で質問しましょう!
似たような質問が見つかりました
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HP作成時の確認について
-
複数のボタンで1つのエリアに...
-
背景が透明なリンクボタンで、...
-
CSSなどでHTML全体の表示を拡大...
-
文字列に波下線をつけたい
-
期間ごとに画像表示を切り替え...
-
datepickerを使ってカレンダー...
-
バナーのURLについて
-
ホームページにサウンドの「ON...
-
ALT
-
スライドショーの上にロゴマー...
-
アクセスログCGIをimgタグで埋...
-
IFRAME内に収まるように画像を...
-
フォント用javascriptの、[小][...
-
バナー同士のスペース
-
文字にマウスを重ねると画像が...
-
画像の表示
-
web制作の初心者です。車のHP...
-
HTML のリストタグにイメージを...
-
リンク先ページのサムネイルを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
IMGタグでTIFF画像を表示
-
背景が透明なリンクボタンで、...
-
カーソルを合わせると文字が出...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
pngやjsの後ろの英数字の意味は...
-
複数のボタンで1つのエリアに...
-
バナーの貼り方とバナーにリン...
-
「DecareステートメントにPtrSa...
-
崩れたレイアウトが更新すると...
-
リンクの上にマウスカーソルを...
-
サムネイル(画像)をクリックす...
-
windowsは画像にマウスオンで画...
-
form以外でのpostってできますか?
-
onmouseoverに複数の命令を書き...
-
正規表現でリンクタグを削除す...
-
HTMLにQRコードを挿入する方法
-
画像を入れ替える方法
おすすめ情報