Alt属性が欠落する理由
Alt属性の欠落は、意図的に行われることはほとんどありません。主な原因は次のとおりです。
- 必須項目になっていないCMSのアップロード。 多くのコンテンツエディタは、Alt属性の入力を求めることなく画像を公開できてしまうため、何も入力されないまま空欄になります。
- コピー&ペーストされたマークアップ。 サイトの別の箇所(あるいはコンポーネントライブラリのサンプル)からコピーされた
<img>タグは、元のAlt属性——あるいはその欠落——をそのまま引き継ぎます。 - デフォルトで装飾扱いされるアイコンコンポーネント。 SVGアイコンライブラリやアイコンフォントは、明示的に指定しない限りアクセシブルな名前を持たないことが多く、周囲のコンポーネントが処理してくれているだろうと思い込みがちですが、実際にはそうなっていません。
- 意味のある画像が誤って装飾用としてマークされている、あるいはその逆。 この区別を取り違えるのは、Alt属性を単に忘れてしまうのとほぼ同じくらいよくあります。
欠落箇所をすべて特定する方法
これは、Scanverraが単に表示するだけでなく、直接スコアに反映させる数少ないチェックのひとつです。Browser Testのスキャン中、Scanverraはレンダリング済みのページに対してArray.from(document.querySelectorAll("img")).filter((img) => !img.alt)を実行し、一致した項目それぞれを個別の「Missing alt attribute(alt属性の欠落)」問題として報告します。スキャンごとに最初の10件については画像のソースも併記されるため、素早く該当箇所を見つけられます。さらに、Lighthouseによる実際のimage-alt監査もアクセシビリティスコアに反映されるため、Alt属性の欠落は単なる推測ではなく、2つの箇所で検出される仕組みになっています。
修正方法
1. 意味のある画像には、実質的な説明文を書く
その画像が文脈上何を伝えているかを説明してください。単に「〜の画像」「〜の写真」といった記述は不要です。スクリーンリーダーはすでにそれを画像として読み上げているためです。
1<img
2 src="/keyboard-side-profile.webp"
3 alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4 width={480}
5 height={320}
6/>2. 純粋に装飾目的の画像は、欠落ではなく空として指定する
1<img src="/divider-flourish.svg" alt="" role="presentation" />3. 機能的なアイコンには、実行されるアクションを表すアクセシブルな名前を付ける
1<button aria-label="Search">
2 <SearchIcon aria-hidden="true" />
3</button>4. Alt属性にキーワードを詰め込まない
実質的な説明ではなくSEOキーワードの羅列のように読めるAlt属性は、アクセシビリティの目的(スクリーンリーダー利用者にとって役立たない)を果たさないだけでなく、実際にはランキングにもほとんど効果がありません。画像を見ることができない人に向けて書いてください。
ScanverraがAlt属性の問題をどう検出するか
ScanverraのBrowser Testは、ページ上にレンダリングされたすべての<img>要素を実際に検査し、Alt属性の欠落をスキャンごとに最初の10件までを上限として、実質的なアクセシビリティ問題としてスコアに反映します。単なる表示項目ではなく、スコアに組み込まれる仕組みです。