トップバナー
NG: 1.1.1
img要素にalt属性がない。スクリーンリーダーがファイル名を読み上げてしまう。意味のあるalt属性を付与すべき。
重要なお知らせ
NG: 1.1.1
メンテナンス日時などの重要情報が画像内テキストのみで提供されている。alt=""は装飾画像用であり、情報を含む画像には適切なaltテキストが必要。また画像内テキストはリサイズできない(1.4.4違反の可能性)。
セールバナー
NG: 1.4.3
画像内のテキスト「Spring Sale 2026」のコントラスト比が約1.5:1で、WCAG AA基準(4.5:1)を大幅に下回る。背景色と文字色の差が不十分。
月次売上レポート
NG: 1.4.1
円グラフの各セグメントが色のみで区別されており、凡例にもテキストラベルがない。色覚多様性のあるユーザーにはどのセグメントが何を表すか識別できない。パターン、ラベル、テクスチャなどの併用が必要。
フォームエラー表示
NG: 1.4.1
メールアドレス欄のエラーが赤い枠線のみで示されている。エラーアイコンやテキストメッセージがなく、色覚多様性のあるユーザーにはエラー発生が伝わらない。
インフォグラフィック
NG: 1.4.4 / 1.4.5
金額や脚注が画像内テキストとして埋め込まれており、ユーザーが文字サイズを拡大できない(1.4.4)。また、本来テキストで提供可能な情報を画像化している(1.4.5)。
記事一覧
NG: 1.1.1
テクノロジートレンド2026
AI、量子コンピューティング、Web3の最新動向を解説します。
NG: 1.1.1
リモートワークの効率化
ツール選定からチーム運営まで、生産性向上のTipsを紹介。
左: altがファイル名「banner-low-contrast.png」のまま。右: altが「画像」のみで内容を伝えない。どちらも記事内容に即した説明文が必要。