2001Yのプロフォール画像

2001Y@Y20010920T

"SEO" "アクセシビリティ" の観点から、必ず入れるべきだと度々言われるimgタグのalt属性だが、画像自体が意味を持たない場合はalt属性は空で良い。

<img src="icon.png" alt="" />

「SEO的にalt属性を指定するべき」という主張は「alt属性を指定するなどのアクセシビリティ的に優れたサイトはSEO的にも評価されやすい」というロジックだと理解している。

実際、Googleのサイト品質を測定するツールであるLighthouseにはアクセシビリティ(日本語ではユーザー補助)に分類されている。

Lighthouseのalt属性についての項目はアクセシビリティに分類されている

alt属性は画像が見えない場合にコンテンツを理解するために使われるもの。具体的には視覚弱者の方などのが音声読み上げ機能を使う際や、インターネット帯域不足などによりファイルにアクセスできない場合などが「画像が見えない場合」に当たる。

そうした時に、装飾的な画像(ボタンのアイコンなど)の理解は不要となるため、alt属性は空でよいということになる。

ここで間違ってはいけないのはalt属性を指定しなくて良いわけではなくalt属性を空に指定する必要がある。

<!-- ❌ --> <img src="icon.png" />
<!-- ⭕️ --> <img src="icon.png" alt="" />
<!-- 🔺 --> <img src="icon.png" alt="矢印のアイコン" />

実際にWebの国際標準規格としての仕様などを策定している非営利団体であるW3Cのガイドラインには以下のように記述されされている。

この達成方法の目的は、支援技術が無視できるように画像をマークアップする方法を示すことである。

title 属性が使用されておらず、代替テキストが空に指定されているなら (例 alt="")、それは画像を無視して差し支えないことを支援技術に示している。

注記: alt 属性を 「空」にするのと、alt 属性が指定されていないことは同義ではない。

https://waic.jp/translations/WCAG-TECHS/H67