代替テキストの欠落

Silktide は、ページ上に代替テキストがまったくない画像を検出します。代替テキストとは、画像の代わりに読み上げられる説明文です。そのため、代替テキストのない画像は、画像を見ることのできない人には意味をなしません。

<!-- 問題: alt 属性がない -->
<img src="apple.png">

<!-- 修正済み: 説明的な alt テキスト -->
<img src="apple.png" alt="赤いリンゴ">

<!-- これも有効: 装飾用であることを明示 -->
<img src="decorative-swirl.png" alt="">

重要な理由

は、のない画像について読み上げる内容がありません。少なくともファイル名を読み上げますが、役に立たないことが多く、混乱を招く場合もあります。目が見えない人やロービジョンの人は、画像が伝える情報を失います。また、画像がグラフ、ボタン、リンクの場合は、ページをまったく利用できなくなる可能性があります。

画像の読み込みに失敗した場合にも alt テキストが表示されます。また、検索エンジンが画像を理解するのにも役立つため、修正することはすべての訪問者にメリットがあります。

修正方法

各画像にで代替テキストを追加します。画像を挿入する場所には、ほとんどの場合そのための入力欄があります。コードでは、上記の例のように alt 属性を使用します。
見た目ではなく、画像が伝える情報や目的を説明します。リンクやボタンとして機能する画像の場合は、リンク先や実行される操作を説明します。
画像が純粋にの場合は、空の alt="" を指定して、スクリーンリーダーが読み飛ばせるようにします。埋め草のテキストは作成しないでください。「装飾的な渦巻きの画像」と聞くより、何も聞こえない方がよい場合があります。

WebAIM は、代替テキストの書き方に関する詳しいガイドを公開しています。

Silktide によるチェック方法

各ページにあるすべての画像を検出します。
代替テキストが不要な画像を除外します。ソースがない画像、1 ピクセル以下の画像（通常はトラッキングピクセル）、スクリーンリーダーから隠されている画像が対象です。
role="presentation" 属性によって装飾用とマークされた画像を除外します。これらはから意図的に隠されているためです。
alt 属性がまったくない、残りの各画像を報告します。

空の alt="" が設定された画像はこのチェックに合格しますが、装飾用画像の対象となります。このチェックでは、その画像が本当に装飾用かどうかの確認を求めます。alt テキストは存在するものの役に立たない場合は、不十分な alt テキストの対象となります。

トラブルシューティング

装飾用の画像なのに、なぜ指摘されるのですか？

画像が装飾用として扱われるのは、空の alt="" または role="presentation" によって、コード上でそのことが示されている場合だけです。alt 属性がまったくない画像は曖昧です。支援技術には、それが「装飾用」なのか「設定し忘れ」なのかを判断できないため、このチェックに失敗します。空の属性を追加して、意図を明示してください。

画像がサードパーティーのサービスから提供されています

マップなどの埋め込みサービスによって生成された画像は、編集できない場合があります。ウェブサイトの設定で、サードパーティーコンテンツをこのチェックの対象外にできます。または、変更できない個別の検出結果をすることもできます。