1クール続けるブログ

とりあえず1クール続けるエンジニアの備忘録

画像はhtmlとcssのどちらで定義をすべきか

developer.mozilla.org

支援技術は背景画像を解析できません。画像がページの全体的な目的を理解する上で重要な情報を含んでいるのでいる場合は、文書上で意味を記述してください。

MDNのドキュメント内にある、cssbackground-imageプロパティには上記のような記載があります。
アイコンなどを含む画像をページに埋め込む際に、htmlのimgタグで指定するのか?それともcssbackgroundプロパティを利用するのか悩ましいところです。 SEOには詳しくはないですが、ある程度SEOにも絡んでくるのではないでしょうか。

企業によってどのように使い分けているか見てみた

企業を選ぶ基準は特にありませんが、個人的にアクセシビリティSEOを意識していそうだなと思ったところを見ています。

Google

Google SlideやGoogle Keep、コーポレートサイトを見ました。
ロゴ以外は基本的にcssbackgroud-imageプロパティを使っているようです。ただ、アクセシビリティを上げるために、ボタン代わりの画像はdiv要素を割り当てて、rolearia-lebelといったようなAttributeを付与しています。

Mozilla

Firefoxの配布ページとかを見ました。
こちらはばらつきがあり、PC用配布ページはbackgroud-imageプロパティを使っていたが、モバイルアプリ用配布ページはimgタグを使っていた。装飾的に使用されているimgタグalt=""という属性がつけていた。

アクセシビリティの考慮

WAI-ARIAW3C によって定められた仕様で、要素に適用できる追加の意味論を提供する一連の HTML 属性を定義しており、それが欠けているどのような場所でもアクセシビリティを向上させます。

developer.mozilla.org

momdo.github.io

WAI-ARIA role属性

定義済のロールの中から選択し付与することでhtml5のセマンティクスでは表現しきれない(もしくは代替要素を利用しているため表現できない)要素を意味を足すことができます。
ロールは、「抽象」「ウィジェット」「ランドマーク」などのいくつかの種類に分かれている。

aria-label

area-*属性のプロパティのひとつ!
「ラベルテキストが画面上で可視である場合、著者はaria-labelledbyを使用すべきであり、aria-labelを使用すべきでない」とのことなので画面上に表示されていないものに対して、それこそ例えばクリッカブルなアイコンなどに利用するべきと思います。 これで指定したラベルはスクリーンリーダーなどに読み上げられるそうです。

f:id:jrywm121:20200510092016p:plain

まとめ

基本的にはcssbackgroundプロパティを利用する運用で問題なさそうです。意味のある要素であれば、アクセシビリティを考慮したAttributeを付与したdivspanを用意して、その要素に対してcssで画像を付けてあげるというので自分の中では整理がつきました。
imgタグを使った場合に、装飾利用のみの画像であれば、alt属性を空と明示するべきと分かりました。

<div role="button" area-label="修正" class="modify"></div>
<img src="decoration.png" alt>
.modify {
   // url x軸の位置 y軸の位置 / x軸のサイズ y軸のサイズ 繰り返さない
   background: url('...') center center/15px 15px no-repeat;
}