かめ。ブログ

alt属性なしとalt=""で意味が違う

2022年7月1日
2022年7月1日

目次

alt=""と、特に指定しなくていい場合は空にしておいた方がSEO的に良いというのはぼんやりと聞いたことはあったのですが。
「空にするぐらいならなくてもいいんじゃないの。」とこっそり思っていたのですが
alt=""alt属性なしには明確な違いがあるようです。

下記の記事で、モヤモヤしていた問題が解決しました。
お前らはまだ img タグの alt 属性の付け方を間違っている

記事ではaltの使い方間違ってるケースあるようね、というのが紹介されています。

watwgの公式でaltの間違った例などサンプルを間違えて紹介されているのでこちらを見てみるのが一番良いかと思います。
そこにalt属性ありなしについても書かれています。
whatwg Requirements for providing text to act as an alternative for images

alt属性なしのケースとは

原文

In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g., a webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not themself know what the images represent (e.g. a blind photographer sharing an image on their blog).

Google翻訳

いくつかの不幸なケースでは、画像が関連する代替テキストなしで自動化された方法で取得されているため(たとえば、ウェブサイト)、またはページがユーザーを使用してスクリプトによって生成されているため、代替テキストがまったく利用できない場合があります-ユーザーが適切または使用可能な代替テキストを提供しなかった場合(写真共有サイトなど)、または画像が何を表しているのかを作成者自身が知らないため(ブログで画像を共有している盲目の写真家など)に画像を提供した。

Deepl翻訳

残念なことに、代替テキストのない画像(ウェブカメラなど)、ユーザが提供した画像を使ってスクリプトで生成されたページ(写真共有サイトなど)、あるいは作者自身がその画像が何を表しているかを知らない(盲目の写真家がブログで画像を共有するなど)ため、代替テキストが全くない場合があります。

ちょっと翻訳した文章が少し違ったので翻訳した文章を二つ貼っておきます。

分かりやすく自分なりに解釈すると

  • 写真投稿サイトなどで、ユーザー投稿によって表示された画像
  • 盲目の写真家が画像をブログなどで共有する場合

webサイト製作者がその画像が何を表しているかわからない場合にはalt属性が指定しないということが可能ということかと思います。

alt属性が省略できる条件

ただし、このような場合、alt属性は省略できますが、次のいずれかの条件も満たす必要がありようです。

The img element is in a figure element that contains a figcaption element that contains content other than inter-element whitespace, and, ignoring the figcaption element and its descendants, the figure element has no flow content descendants other than inter-element whitespace and the img element.

  • img用がfigcaptionを含むfigure要素ないにあること
  • figcaptionにテキストが存在していること
  • figcaption以外にテキストおよびフロー・コンテンツが存在していないこと

または

The title attribute is present and has a non-empty value.

  • タイトル属性が存在して、空でない場合。

ただしalt省略するのは最小限にとどめるべき

Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

このようなケースは、絶対に最小限にとどめるべきです。
もし、作者が本当の代替テキストを提供できる可能性が少しでもあるなら、
alt属性を省略することは許されないでしょう。

とのことですので、なるべくはaltはつけましょう。
altが必要がない場合には明示的にはalt=""としましょうということのようです。

まとめ

ほかにもaltの使い方については参考にさせていただいた記事に丁寧に書かれているので、参考にしつつaltは正しく指定するよう心がけていきたいです。

alt属性を書かないケースとalt=""のケースは明確な違いがあるので正しく使い分けるようにしようということ。
基本的にはalt入れる方がよく、周りのテキストですでに保管されている場合でもalt=""と入れましょう。

という話のようです。

意識しないと忘れがちな部分でもあるので気をつけていきたいですね。



関連する記事