画像要素にはaltプロパティがありません。

画像の情報要素は、短い代替テキストを提供することを目的とする必要があります.画像が装飾要素である場合、空のaltプロパティで上書きできます.

ドメインマスターの追加

このプロジェクトは現在、Lighthouseの公式ドキュメントでより重要ですが、実際にはLighthouseのチェックを行う際にSEOがチェックするプロジェクトなので、優先的に行います.

プロジェクトが通過しなかった理由

Lighthouseは、画像要素にalt属性がないものを検索します.
Lighthouseのアクセス可能スコアは、すべてのアクセス可能項目の加重平均です.詳細については、ライトハウスアクセス性スコアの投稿を参照してください.

画像に置換テキストを追加するには:

<img>要素すべてにalt属性を指定してください.画像のロードに失敗した場合、altのテキストは、空白の画像の代わりに、ユーザに画像が伝達される内容を理解させる.(画像とオブジェクトを含む置換テキストのマニュアルを参照してください.)
ほとんどの画像には、短い代替テキストが必要です.

<img alt="Audits set-up in Chrome DevTools" src="...">

画像に簡単な装飾や役に立つコンテンツがない場合は、空のalt=""プロパティを指定して、「アクセス可能ツリー」から削除します.

<img src="background.png" alt="">

この例に示すように、<img aria-label="Audits set-up in Chrome DevTools" src="...">を使用して画像を説明することもできます.
また、aria-labelプロパティの使用とaria-labeldbyプロパティの使用をお読みください.

以上の内容の追加説明

原文では、ARIA labelタグの<img>属性のほか、altまたはaria-label属性を使用できますが、個人的にはaltを使用することをお勧めします.

aria-labelledbyラベルにはすでに情報を提供するプロパティがありますが、他のコンテンツを作成する必要がありますか?

イメージのロードに失敗した場合、imgおよびaltは、イメージに関する情報を視覚的に提供できません.

この案については、いくつか注意すべき事項があります.一般に、画像がリスト領域のサムネイルとして使用される場合、テキストコンテンツは後で提供されるので、追加のaria-label値を使用する必要がないため、画像は空のaria-lablledby属性を保持することができる.
上記の例では、画像サムネイルにはブランドのホームページへのリンクがあるが、その後、ブランドに関する詳細なテキスト記事があるため、画像の이미지가 장식 요소라면 빈 alt 속성으로 무시할 수 있습니다.属性には説明が含まれない.
このページをLighthouseチェックすると、

SEOでは、画像要素にalt属性があり、100点保持できます.

補助機能項目では、altが違反の原因となります.
したがって、リンクにaltタグしかない場合、画像のalt属性に置換テキスト情報を提供する必要がある.

お客様がバックグラウンドで作業している場合は、イメージに関連するトランザクションを処理している場合は、링크가 식별할 수 있는 이름이 없습니다プロパティのみを使用し、<img>タグに追加のaltプロパティを指定するよう求められた場合は、通常、なぜ付与するのかを尋ねられます.
処理画像からsrcの属性が入力されると、上述した様々な理由(例えば、画像のロードに失敗した場合、テキスト形式で情報を提供できるかどうかなど)から、このLighthouseにおけるSEOとアクセス性の2つの項目のスコアを減算することができる.
最初から画像の詳細テキストの提供を検討できる場合は、設計する必要がありますが、少なくとも<img>タグを処理する場合は、altプロパティが画像パスを設定するaltプロパティと同じように必須要素として提供される必要があることを覚えておいてください.

有効な置換テキストを作成するためのヒント

<img>テキストは、画像の意図、目的、および意味を提供しなければならない.

正常な人が画像で情報を取得するように、視覚障害者はaltテキストで大量の情報を取得することができる.

グラフ、画像、グラフなどの一般的な単語は使用しないでください.

詳細はWebAIMの代替テキストガイドで確認してください.

[その他]国内Webアクセス事例

「韓国版Webコンテンツアクセスガイド2.1」では、画像関連項目srcを検収した.
Webアクセス性検証フラグを取得した場合は、指定した置換テキストが画像と同じかどうかにも注意する必要があります.そのため、指定したテキストが正しいかどうかに注意する必要があります.

ソース

https://web.dev/image-alt/
https://nuli.navercorp.com/guideline/s01/g01