画像文字 HTMLのつくり

質問

HTML上に画像文字で表現する場合にタグの作りとして皆さんはどのようにされていますか？理由も記載頂くとありがたいです。

<img タグで書いて altにテキストの内容を記載
<img でtitle属性にテキストの内容を記載
<divなどのボックスを造りその中にテキストを記載し、CSSにて背景に画像文字を表示し、テキストは非表示にする。

等々

回答No.1

Proof4

私の場合、基本的に文字を画像で表現するということをしません。アイコンフォントやCSSを使って表現することがほとんどです。
どうしても文字を画像で表現する必要性があるときは以下のようにすると思います。

imgタグで記述しaltに代替テキストを記載。あとはアクセシビリティ向上のため、role属性とaria-labelなどを付け加えるといったところでしょうか。

文字を画像で代替するときに最も気をつけねばならないことは、それが何を表すのか、仮に画像が表示されなくとも伝わるようにすることだと思っています。（これは文字を画像で代替したくない理由の一つでもあります。）これを考慮に入れて上記のような実装になります。

お礼

ありがとうございます。

画像表示でしか無理なデザインをあげてくる人もたまにいるもんで質問させていただきました。